Bookmark and Share

Friday, September 16, 2011

Google+ +1Button examples

You can add the 1+ button to your pages in various ways, here are 4 live examples, the latest with javascript integration:
Adding the 1+ button like this

is really simple, just add this line of code :
<script type="text/javascript" src=""></script>

Another useful option is to include the button using asynchronous rendering:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

Another option to add a +1 button that reference another web site, here is an example, referencing google+ api’s page:
Google APIs!

And the code used:

<g:plusone size="tall" annotation="Google+ api page rocks!" expandto="top" href=""></g:plusone>

You cal also call a function after the user's click, you can alert a message to the user or access a special page when the user appreciates your page:

<g:plusone annotation="Code recipes rocks!" size="tall"  callback="doSomethingAfterClick"></g:plusone>

And the javascript code:
<g:plusone annotation="Code recipes rocks!" callback="doSomethingAfterClick" size="tall">;/g:plusone>


function doSomethingAfterClick(jsonParam)
    if (jsonParam.state=='on')
        alert("Thank you dear!");
        alert("Oh no!!! I'm really sad!");


Hope it helps!