Tag Archives: jquery

You’ve probably seen sites like MacHeist and Make Use Of run promotions where you can unlock a software license or enter a drawing for an iPad by posting a message to Twitter or Facebook and then entering your email address into a form that magically appears after. It has also become an increasingly common practice for recording artists to give away free music downloads in exchange for Liking them on Facebook.

There’s probably sufficient documentation on how to implement this sort of thing with Twitter, so let’s try something a bit different. How about those new Google +1 buttons?

The +1 button has a convenient JavaScript callback that could be used for all sorts of fun things, such as un-hiding content on the page.

First, you need to put the button markup on your page, as well as the content you wish to hide until said button is clicked. The DIV holding the content should of course be hidden by default. Be sure to set the callback parameter of the button.

<div id="plusonebutton">
 <g:plusone callback="plusone_callback" href="http://www.webmaster-source.com"></g:plusone>
</div>

<div id="plusonecontent" style="display:none">
 <p><strong>The user has clicked the +1 button.</strong> Here's some content that was not previously visible. Lorem ipsum dolor sit amet.</p>
</div>

Next, you want to include the +1 script and jQuery in your page header. After you’ve taken care of that, you need to write your callback function. The function fires when the button is clicked (assuming the name matches the one specified in the button parameter) and passes a JSON object containing the button state, among other things.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
 function plusone_callback(response) {
 if (response.state == 'on') {
 $("#plusonecontent").fadeIn();
 $("#plusonebutton").fadeOut();
 }
 }
</script>

The callback should check the JSON object to see whether the state is set to “on” rather than “off,” and replace the button with your hidden content if that is the case.

You can see a demo of the finished page here.

I don’t know whether Google frowns upon this sort of thing or not, but it would be a great way to provide a surprise bonus (e.g. an ebook or song download) when someone likes one of your pages. So, just don’t use it for anything spammy or deceptive and you should probably be fine.

Update: It has come to my attention that this could be used in many crappy ways, such as those irritating people who force you to Like a video on Facebook before they let you watch it. (Which is completely against the spirit of the concept, as well as social media.) Don’t do stuff like that. Seriously.