Google +1 button for Blogger

Posted by Anonymous on 7/27/2011

Today, Google released it's best share button ever named +1 which can be considered as the best alternative to Facebook and Twitter shares. If you want to share something that you like, with your friends, just hit the +1 button on that site.

As you can see here at the top right. If you like this post, don't forget to hit +1 at last. If you hit the +1 button, it will help your friends, relatives, co workers and others to find the best stuff on the web. If you want to know more about this button check out this video.

To add the button to Blogger

Follow the instructions below to add it to your Blogger blog

Go to blogger.com and log into your account.
Go to DESIGN > EDIT HTML and click "Expand Widget Templates"
Find the </head> and above/before that place the following code.

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

{lang: 'en-US'}

</script>

Now look for <data:post.body/>. If you find multiple occurrences of <data:post.body/> try each one. In my case I found three <data:post.body/> and opted for the second occurrence.
If you want the +1 button to appear above the post content then place the following code before <data:post.body/> or if you need the button to appear below the post content paste the below code after <data:post.body/>.
Use this code for the +1 button to appear everywhere.

<div style='float:right'>

<g:plusone size="tall" expr:href="data:post.url"/>

</div>

If you want the +1 button to appear only on the post pages use this code instead of the one above.

<b:if cond='data:blog.pageType == "item"'>

<div style='float:right'>

<g:plusone size="tall" expr:href="data:post.url"/>

</div>

</b:if>

If you want the +1 button to appear everywhere other than the static pages use this code instead of the above two codes.

<b:if cond='data:blog.pageType != "static_page"'>

<div style='float:right'>

<g:plusone size="tall" expr:href="data:post.url"/>

</div>

</b:if>

NOTE : You can of course edit the parameters in blue color to suit your needs. To change the button size you can use either small or medium or tall or standard.

Save the template.

Now you can see the +1 button as per your settings! Hope you liked this post. If you loved it, please don't forget to hit the +1 button at the top right and hoping to get comments from you too.