Getting visitors to google plus one your page before showing your locked or hidden page content

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

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

Now lets check what our JavaScript will look like

The JavaScript Code

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.