Hi Guys,
Well you know what, sometimes making use of whats available for creative use makes sense. Google +1 buttons were introduced ages ago and they are serving well for their purpose. We want to be careful as well on how we use them. Following up on my previous blog post which talked about how to use Facebook like to unlock content, this post will talk about how to use a Google +1 button to unlock content.
First up is to know if its ok with the Web God called Google. So I believe it is. Anyway you can check out the Buttons Policy here
https://developers.google.com/+/web/buttons-policy
You should be specifically look at the last paragraph which says
Publishers may not direct users to click a Google+ button for purposes of misleading users. Publishers may not promote prizes, monies, or monetary equivalents in exchange for Google+ button clicks. For the avoidance of doubt, Publishers may direct users to a Google+ button to enable content and functionality. When a Publisher directs users to a Google+ Button, the button action must be related to the Publisher or the Publisher’s content. For the +1 button, the content or functionality that is enabled for the user must also be accessible to any of the user’s social connections who also enable it.
Anyway let get the ball rolling and lets see what can be done with our Google Plus button.
You can create your plus one buttons from the URL below
https://developers.google.com/+/web/+1button/
The HTML that is given to us by Google looks like this
The Markup
|
1 |
<div data-annotation="inline" data-width="300" data-callback="googlePlusCallBack" data-href="http://jaspreetchahal.org"></div> |
If you check the API then you would see what
- data-annotation
- data-width
- data-callback
- data-href
means, most important bit above is the data-href and data-callback properties data-href is the URL that you are asking your users to like data-callback is the JavaScript callback function. We have defined our callback googlePlusCallBack above which we will implement soon. Lets add our hidden content to the page
Extended Markup
|
1 |
<div id="hiddencontent" style="display:none">This content will be shown once user click +1's</div> |
Now lets check what our JavaScript will look like
The JavaScript Code
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> |
This is something that Google provides and maintain.
Last thing we need to do is to write our googlePlusCallBack function. Remember that this function should be in Global scope and is accessible on the page.
The CallBack function
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> function <strong>googlePlusCallBack(responseFromGoogle) { if(responseFromGoogle.state == "on") { document.getElementById('hiddencontent').style.display = ''; } else if(responseFromGoogle.state == "off") { alert("Please reconsider your action. We provide quality content so atleast you can leave your +1 vote. "); //OR any other message you can think of... } </strong> } |
|
1 |
<em id="__mceDel"></script> </em> |
And thats pretty much it.
You are done.
One question I was asked was to:
How do you know if someone has already plus one’d the URL. I would assume you can use cookies to in the callback function. or record IP’s and send data to the database so that you know. Anyway that will not really fullproof the knowing part but at the moment the Plus API does not support this functionality.
If you have better thing to say in this regards the please leave your comments.
I hope that you will like this post and you may already have +1nd it. Button is right at the top.
Demo
A demo is now available from here. Do a view source on the page to see what’s going on.
http://jaspreetchahal.org/examples/google-plus-one-to-show-content.html
I hope this helps
Cheers,
Leave a Reply