04 June 2011

How to add Google +1 button to Blogger website?


After Twitter, Facebook and other social networking sites Google also introduced the +1 button to add to your website. The people who liked your content can click on +1 button.  By adding the +1 button to your blog, you’re providing an easy way for your visitors to recommend your posts to their friends right from your blog.

This button also appears in Google search engine results. +1 buttons let people who love your content recommend it on Google search.

Method 1:- Adding +1 button from Page Elements

Go to Design >> Page Elements >> From Blog Posts click Edit. Click on Show Share Buttons. +1 button is there. Save it.

Method 2:- Adding +1 button by editing HTML template
If you have enabled Show Share Buttons from Page Elements but still it is not appearing then you can try following procedure.
  1. Go to Design >> Edit HTML and click on Expand Widget Templates. Place following code BEFORE </head>
  2. <script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'hi'} </script>
  3. Now look for <div class=”post-header-line-1 or <data:post.body/> and add following code BELOW it
<div style=’float:left; margin-left:10px;’>
<g:plusone expr:href=’data:post.url”></g:plusone>
3. You can also add to sidebar using Add a Gadget >> HTML/Java Script and add following code
 there and save

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

Method 3:- Incorporating +1 button with AddThis
If you are using AddThis script, you can add +1 button code to shot it with AddThis buttons as follows.

1. First do the step 1 as described in Method 2 above
2. Go to Design >> Edit HTML and click on Expand Widget Templates and look for AddThis code and code in RED to original AddThis buttons code

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_google_plusone'/>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_counter addthis_pill_style'/>
<script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4daaf36d0b7c565c' type='text/javascript'/>
<!-- AddThis Button END -->

3. Save the template.

Note: You can customize +1 button appearance here: http://www.google.com/webmasters/+1/button/index.html

Introducing the +1 Button video

Related Posts


June 13, 2011 at 8:33 PM

I dont like the button like from this service, it gets always translated into spanish, I tried changing it but I could't. So I added another box for sharing with FB, and I tried with the single button like from FB, but I was not able to put it inline with the rest of the buttons.

[Uhm.. your comments form doesnt let one see the capthca code, I had to use the key TABS to pulll it up...]

August 4, 2011 at 1:39 AM

If you follow the correct steps then you will get the desired effect.

Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More