How to Add goOgle "+1" button to your website

On 1st June 2011 goOgle rolled out +1 Button for Websites so that you viewers can +1 their articles right from the page and their connections would be able to see their recommendation on the search page.

All you need to do to add “+1 button” to your website is to insert just two lines of code. (Yeah! Its that simple!)

Place this line of code in your head section or just before you  close the body tag:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

then place this code where you want your “+1 button” to appear on page.

The URL to +1 is determined by one of the three things given below (and in given order):

"<g:plusone></g:plusone>"

1) The href attribute  defined in the <g:plusone> tag
E.g.:

<g:plusone href="http://psychocoding.blogspot.com/"></g:plusone>;

2) rel attribute of <link> tag

If href attribute of plusone tag has not been set then goOgle looks for the href attribute in the link tag and rel attribute’s value.

E.g.:

<link rel="canonical" href="http://psychocoding.blogspot.com/" />

3) URL of the page
If both the above values are not specified then goOgle looks for the URL of the page as defined in document.location.href i.e the URL as found in DOM.

Note: If you want to configure this in WordPress you can use the function get_permalink();to echo the url of your post.
E.g.

<g:plusone href="<?php echo get_permalink();  ?>

"></plusone>

or you can make use of the canonical URL defined by wordpress in the head section of your every post.

This is just the basic stuff If you want to customize your +1 button to more extent you can goto through this page and learn about changing the size of button or showing or hiding the count of your button etc.

By default <g:plusone></plusone> will render as:

<g:plusone size="standard" count="true"></g:plusone>

The size attribute can take values: small, medium, standard, tall

and count attribute can take values: true, false

Thats all about Adding and customizing goOgle +1 button on your website/blog.


Note : This article is originally posted by Snehil Khanor [a] http://blog.snehilkhanor.com/category/technology/google/