Add Google +1 Button to Blogger

How to add Google +1 Button to Blogger

After the introduction of Google +1 button (Plus One), it has become a trend for the publishers to add it to their websites and blogs, whether it is hosted on Blogger or WordPress. So the general question that will pop up in our minds is what is so popular about this +1 button?
Well, the answer is, when you finds a web content to be useful and click Google +1 button to share it on Google+, it will not only help your friends and contacts on Google+ Circle to get to know about the interesting content but will also help them to find more relevant search results on Google.

Now let us start the discussion about why you are here, that is, to add Google +1 button to Blogger posts. It can be done by two ways, first is a very simple way where you have to only enable some settings and you are ready to use it and next is the advance way where you have to edit Blogger template to include Google Plus One button.

Easy Way

If you want an easy way then Blogger has already enabled it for us, all you need is to turn on the official share buttons which includes Google +1 button. It can be found under Layout tab; click the “Edit” link under “Blog Posts” gadget, select “Show Share Buttons” and save it; but I must say that you cannot customize or can choose any other sizes.

Advance way

It comes handy when you are thinking to add Google +1 button within Blogger posts with a different size and/or type on your desired position manually.
Step 1: Login to Blogger and go to your blog’s Template tab.
Step 2: Click “Edit Html” and check “Expand Widget Templates”.
Step 3: Configure the the below options to generate Google +1 button code for Blogger and copy it.

Button options

Size:
Annotation:
Width: pixels (?)
Language:

---

Float:
Show on:

Preview and code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: none;'>
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
</div>

</b:if>

Step 4: Find <data:post.body/> and before or after it (or if you want you can add it in both places to show Google +1 button above and below Blogger posts) add the above code.
Step 5: Find </body> and immediately before it add the below script.

<script type="text/javascript">
  window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

  (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>

Step 6: Save your template.

Attributions

• Size - Google +1 button is available in four sizes.
• Annotation - If you select ‘inline’ you will get to set the width. The default width is ‘450’ pixels while the minimum recommended is ‘120’. Only your friends’ faces will be seen if they have +1ed the post.
• Language - It will get to your blog’s default language but you can always set it to your locale language.

Points to note:

• I have gone with the asynchronous script in step 5. I have found out that sometime it fails to load if it’s not placed immediately above the closing body tag. If you are facing such problems then add the simple onload version instead.

  <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {lang: '<data:language/>'}
  </script>

• For more information, visit Google +1 button documentation page.
• Create Google Plus page for you blog to gain more exposure.