Add Google +1 (plus one) button to Blogger posts

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 shows them under the 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.

(If you don’t want to add the button under blog posts, there is another method: Add it to a  floating social media sharing bar)

Update Sep. 2011: Switch to the new Google +1 (asynchronous) script. Split the code into two parts, the first part (script) placed in the head section of template, the second part (button code) stays.

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 </head> tag, and paste this script right above it:

   <!-- Google +1 script Start -->
   <b:if cond='data:post.isFirstPost'>
   <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>
   </b:if>
   <!-- Google +1 script End -->
   

5. Next, look for <data:post.body/> and paste the following +1 button code immediately under it:

   <!-- Google +1 button Start -->
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <p></p>
   <div style='float:left;padding:10px;'>
   <g:plusone expr:href="data:post.url" size="standard" annotation="bubble"></g:plusone>
   </div>
   </b:if>
   <!-- Google +1 button End -->

6. Configure button 
   You can configure the button by changing the attributes of the g:plusone tag in line 5 (in step 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 annotation attribute to none.
7. Button repositioning
   The +1 button code (in step 5) positions the button on bottom left of each post. You can change the positioning if you wish to.
   • 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
   Conditional tags prevent the button from appearing on static pages. If you want it to appear on static pages as well, remove the tags (step 5 line 2 and 7).
9. Preview before saving.

Enjoy!