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="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

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 = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

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="http://developers.google.com/+/api/"></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>

<script>

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

</script>

Hope it helps!