Google +1 Button For Blogger

BloggerLike Facebook, Twitter sharing button where user can share the content which he/she likes on facebook or Twitter respectively, Now Google has also released an similar button which is know as Google +1.

By adding +1 to your pages you can make your Blogger blog stand out. +1 buttons let your readers share your content recommend it on Google search. Read more in this post Google +1 : Public Stamp of Approval

When a signed-in Google user is searching, your Google search result snippet may be annotated with the names of the user’s connections who’ve +1'd your page. If none of a user’s connections has +1'd your page, your snippet may display the aggregate number of +1's your page has received.

Now Google has released a new set of code for the +1 button. To add this Google +1 button with the fresh set of code in your Blogger / Blogspot blog just follow these simple steps.

 

Step 1 :

Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

blogger design

blogger edit html

blogger expand widget

 

Step 2 :

Now find (CTRL+F) this in the code:

</body>

And place the following code just before/above it:

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

 

Step 3 :

Now find (CTRL+F) this in the code:

<data:post.body/>

To place the Google+1 button at the top left corner of your post paste this code before/above it :

<div style="float:left; padding:4px;">
<g:plusone size="standard" expr:href="data:post.url"></g:plusone>
</div>

Note :

  • To change the button position from "Top-Left" to "Top-Right" just change the float position to left. i.e. float:right changes to float:left.
  • To place the Google +1 button at the end of your post paste the code after/below <data:post.body/>.
  • To change the button style just change size="standard" to smal, medium or tall.

 

 

Step 4 :

Save the template.