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

Google introduced the +1 (Plus One) button for websites. +1 will help your friends, family, contacts and rest of the world to find more relevant topics they are searching for on Google Search. Google +1 (Plus One) shows them under your post in Google SERP (Search Engine Results Pages). Blogger has also enabled this feature and you can easily add it to your blog.

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, static pages, archive etc.) and individual/post page etc. You will have an option whether to include a counter or not.

The Easiest Way To Add the Google +1 Button To Blogger

The easiest way to add the Google +1 button to blogger is by enabling the Share Buttons. Go to Blogger's dashboard > Design > Page Elements tab and Click the "Edit" link on "Blog Post" section. This will open a new pop-up window where you have to select the "Show Share Buttons". That's it.

Advanced Option to Add the Google +1 (Plus One) Button to Blogger

Now here's comes an advanced option to add the Google +1 (Plus One) button to Blogger. This comes handy when you want a more customized +1 button. To get this you can visit the +1 Official Site and easily generate the code for the type of button you want. All you need is the JavaScript that is needed to be added to the head section.

1. Go to Design > Edit Html tab and Check "Expand Widget Templates".
2. Search for the Closing </head> and before it add the plus one JavaScript:

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

3. Now the next step is to place the Google +1 in the post area, search for <div class="post-header-line-1"/> or <data:post.body/> and place the below code immediately after it.

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

Now, Save the template!

Customize Google +1 Button:

To change the sizes of the button you have 4 options to play with.

size="small" - To display small size +1 button of 15px

size="medium" - To display medium size +1 button of 20px

size="standard" - To display standard size +1 button of 24px

size="tall" - To display tall size +1 button of 60px

Changing these attributes with these names (small,meduim,standard,tall) with the size already in the button code highlighted with red..... For an example if you want large button,

<g:plusone size="tall"></g:plusone>

You can also change the following values like : (float:left) to right if you want the button to be on right side of the post whether it is below or above post body.

Also you can change the count="true" value to false if you don't want the counter to be displayed with the button..... For an example

<g:plusone size="standard" count="false"></g:plusone>

Thats all ! Hope that was easy to implement.

You might also like: Add Floating Share Buttons To Your Blogger Sidebar
Add Social Share Count Buttons Below Post Title Blospot
Add Floating Facebook Likebox To Your Blogger Blogspot
How To Create A Google Plus Page For Your Blog Website