How To Add Google +1 (Plus One) Button To Blogger

Google +1 (pronounced �plus one�) is a recommendation button somewhat similar to Facebook like button. Both of them show friends that recommended your post. But while Facebook Like button shows them under the Like button in your post, Google +1 shows them under your post in Google SERP (search engine results pages).

This tutorial will show you how to add a Google +1 button to every blog post in a Blogger blog. It allows your readers to recommend your posts to their Google friends and contacts right from your blog post.

This button will +1 the containing post, regardless the page you are at. It will work on both multi-post pages (home page, archive etc.) and individual/post page etc. You will have an option whether to include a counter or not.

Let us proceed with the tutorial:

1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Tick the  Expand Widget Templates check box on top right of the HTML window.
4. Find the following code in your HTML, this is the code for your post content:

   1	<data:post.body/>

5. Paste the +1 button code immediately below (after) it:
   view sourceprint?

   1	<!-- Google +1 button Start -->

   2	<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

   3

   <p></p>

   4	<div style='float:left;padding:10px;'>

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

   6	<g:plusone expr:href="data:post.url" size="standard"count="true"></g:plusone>

   7

   </div>

   8

   </b:if>

   9	<!-- Google +1 button End -->

6. Configure button  
   You can configure by changing the attributes in line 5. 
   • Select the size of button by replacing the value of  size attribute with a value from the table below.

     Button size (with count)	Value
     	small
     	medium
     	standard
     	tall

   • You can remove the count by changing the value of count attribute from true to false.
7. Button repositioning 
   The code above positions the button on bottom left of each post. You can change the positioning if you wish.
   • Position it on top of post 
     Place the button code before (instead of after)<data:post.body/>.
   • Position it on the right 
     Change the float in line 4 from left to right.
8. Displaying button on static pages 
   The code above doesn't display the button on static pages. To make it appear on static pages as well, remove the conditional tag -code line 2 and 7.
9. Preview before saving.

Enjoy!