How to Add Google Plus one (+1) button to your blog (Blogger)

Google plus one is a recommendation button from Google Plus something similar to Facebook's Like button. The difference between Facebook's Like is that it is shown under the button in your post where as Google +1 shows them under your post in Google SERP (search engine results pages).

Here is a short tutorial that will walk you through the steps on adding a Google +1 button to every blog post in your 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 checkbox on top right of the code window.

4.     Find the following code in your HTML:

<data:post.body/>

5.     Paste the following +1 button code immediately below (after) it:

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

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

<p></p>

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

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

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

</div>

</b:if>

<!-- 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. 

      

·    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.

8.     Position it on top of post
Place the button code before (instead of after) <data:post.body/>.

9.     Position it on the right
Change the float in line 4 from left to right.

10. 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 8.

11. Preview before saving. 

---