16 July 2011
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 Official 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
1. Go to Design > Edit Html tab and Check "Expand Widget Templates".
<div style='float:left;padding:10px;'>Now, save the template!
<g:plusone expr:href="data:post.url" size="standard" count="true"></g:plusone>
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,
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>
More reference: +1 button API on Google Code.
Thats all ! Hope that was easy to implement.
Ahmed Shehzad Hi, I am the Founder and Editor of Blogger4ever, I loves writing about Blogger Tricks and Tips, Blogger Tutorials, Hacks and Widgets and everything about Blogger.... Follow me on Google+