Add Google Plus One Button on Blogger

Add Google Plus One ( +1 ) Button on Blogger

Google has released an alternative to the Facebook and Twitter Sharing buttons named +1.If you like something that you find on the web, you can hit the +1 button, and your +1's will help friends, contacts, and others on the web find the best stuff when they search. This tutorial will guide you on adding the same to your Blogger Blog.

Checkout this video to know more about the +1 button

Why Should I add the Google +1 Button?

1. The Plus one button will have a  major impact on your Search results. When a friend of yours does a search in Google, your +1s will count.

2. You can get a detailed report about the +1 metric and how it affects your search traffic over at Webmaster Tools. You can read more about it at the Official Google Webmaster Blog - http://googlewebmastercentral.blogspot.com/2011/06/1-reporting-in-google-webmaster-tools.html

Adding Google Plus one (+1) button to Blogger

1. If you are already using the official Blogger Sharing buttons, you should  already be seeing the +1 buttons on your blog. If it is not, then  go to that tutorial, and you will get the answer to how you can fix it.

2. No I don’t want to add those Blogger Sharing buttons, but would love to add the +1 button somehow. If that’s the case, then read on..

3.Generate the Google +1 button code using the following generator.(The codes and the tutorial will be updated with the options that you make using the generator)

Configure the Button Demo
Button Type
Language
Float
Location of the Button
Display

4. Go to Blogger Dashboard > Design > Edit HTML and click on the button which says “Expand widget Templates”. Look for </head> and immediately above that paste

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

5. Now look for <data:post.body/> and immediately below that paste

<div>
<g:plusone size="standard" expr:href="data:post.canonicalUrl"/>
</div>

6.Save the template, and you should see the Google  +1 buttons on your blogger blog.

You think its cool?, then  +1 it :P

92 comments :

  1. great man!! luv it also +1 it ;)

    ReplyDelete
  2. great for blogger in built template user as it is automatically added to it

    ReplyDelete
  3. you always make it easy...thanks...
    promote ;)

    ReplyDelete
  4. Great Job!

    I have applied it on my blog.

    Please follow me i will follow you with comments.

    Thanks.

    http://bdclaymart.blogspot.com/

    ReplyDelete
  5. mmm can't find in my Edit HTML. Any suggestions?

    ReplyDelete
  6. I did as instructed, and now have the button on my blog twice. One at top of posting below my title, and one at bottom of the post under my signature. I have gone back into the Edit HTML, removed the string by the and also by the It took out the bottom one, but I cannot get that top one removed. Also, I checked, and I had it marked to be done at the bottom of the post, so not sure what happened here. Now, how do I get rid of the one at the top of the post???

    ReplyDelete
  7. It's a shame I didn't find this sooner. I could've pointed my sister here instead and saved myself a bit of time! :-)

    ReplyDelete
  8. @John- All the buttons on your non-post pages, point to the same url. eg: all buttons on your home page will allow you to +1 the homepage url rather than the individual posts. You should pass the post url in the <g:plusone/> tag to resolve it :)

    ReplyDelete
  9. @nugget - i think you didn't check the "Expand Widget Templates" check box. did you?

    ReplyDelete
  10. Can you teach me how to put this code in two columns like in this post? all my share button with counter align in horizontally. I want it to align in two columns. Like here: http://geekpick.blogspot.com/2011/05/limited-time-offer-ocster-backup-pro.html

    I don't have enough knowledge in HTML so please teach me step by step.

    Please help me. Thank you very much.

    ReplyDelete
  11. thats nice, i wish that work more then fb or ttr, thanks for updating us.thanks a lot.

    ReplyDelete
  12. Thank you for this one. I just saw it from somebody else's blog and now I found a tutorial on how to install it. More power! You've been very helpful!

    ReplyDelete
  13. It looks great, it's time to try

    ReplyDelete
  14. I readed all your post from top to bottom (2005-2011)
    it was very good and Useful. .

    Keep Blogging . ..

    ReplyDelete
  15. Thank you so much for this post. Worked true to form with the only change being instead of divstyle I put div style, and, added padding-left and margin-right details to the second lot of code.

    Take Care,
    Peter

    ReplyDelete
  16. Nice Guys. My blog is good looking now. thanks for tutorials

    ReplyDelete
  17. Hi

    Thanks for +1 I was able to do it and found its working

    Thanks

    ReplyDelete
  18. Thank you very much! Terrific tool for installation! Works great!

    ReplyDelete
  19. Installed, the button appeared yesterday, and today is no longer displayed. Why?

    ReplyDelete
  20. Why you're not use Google +1 on this site?on this site?

    ReplyDelete
  21. @Asoka Site - it's used all over my blog.

    ReplyDelete
  22. great work look at some new stuff

    ReplyDelete
  23. Thank you for this tip n tutorial! Really helpful stuff! Keep the good work rolling!

    Sankara

    ReplyDelete
  24. I Like U blog, U r the best. I want to create a registration form in my blogspot blog as enrollment in Facebook, twitter, and the like. Is it possible in blogspot? If possible, please make the article. Thank you in advance. Greetings bloggers ...

    ReplyDelete
  25. Installed yesterday and now it's gone ...

    ReplyDelete
  26. Did as per your instructions but i can't see the gadget anywhere :(
    Please help !

    ReplyDelete
  27. If works well, but I'm trying to align the button with my two current twitter and facebook button (both in the same div class='shareblock' with specified padding as showed below, I replaced the brackets with squared on for display)

    .facebook-share-button {
    padding: 0px 2px 0px 0px;
    vertical-align: top;
    }

    .twitter-share-button {
    padding: 0px 2px 0px 0px;
    vertical-align: top;
    }


    .
    .
    .
    .
    [div class='shareblock']
    [a class='facebook-share-button' expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count']Partager[/a]
    [a class='twitter-share-button' data-count='horizontal' data-text='Du nouveau sur le blog:' data-via='mdamejo' expr:data-url='data:post.url' href='http://twitter.com/share']Tweet[/a]
    [/div]

    Any idea how I can do that?

    ReplyDelete
  28. I dont find this on my HTML-

    ReplyDelete
  29. Great. Thanks....+1

    I add this on my blog....:D

    ReplyDelete
  30. Thanks blogger plugins.

    I am a big fan of blogger plugins.....

    I reads all article of this site.....

    you got +1 from me......

    ReplyDelete
  31. I had read your this article that is very good.........
    but i want to know that how will i put google+ and facebook like button in one line..
    as i saw when i am putting these code then facebook button and google + button going in different line.

    ReplyDelete
  32. why do i get two buttons? I just want the one with the other share buttons. Do I need the one above <head> or below <data:post.body>

    ReplyDelete
  33. Nice info man, one +1 for your post.
    I'm getting an +1 for my blog too :)

    ReplyDelete
  34. Nishant and M'dame, just remove the div and /div to get it on the same line as your facebook button.

    ReplyDelete
  35. why is google plus one doesn't work starting from first week of august 2011?

    ReplyDelete
  36. you are great man I really like your work

    thanx for sharing this valueable stuff

    ReplyDelete
  37. thanks a bunch i will upload this on my blog <3

    ReplyDelete
  38. and if you make a widget for blogger sidebar id appreciate this for sure. thanks for this blogger plugin mate

    ReplyDelete
  39. hey this is nice...
    in my blog, it places the +1 button link it to the post...
    i ned to put it for my blog....

    how to do it?
    plz rply...
    thanx

    ReplyDelete
  40. I wonder if it also has a dislike feature which is frequently abused for example on YouTube. I understand that any rating counts for more than no rating but rating with the intention to do harm rather than good to someone is pathetic.

    We will try to get as much as +1 we can because we know the benefit of it with seo prespective (and soon we will see many people started to sell +1 as well) but a normal user do not know about it and where facebook like button is one step ahead from it.

    ReplyDelete
  41. i dont have this tag in my html
    is there what else to search in tag?

    ReplyDelete
  42. nice and easy but the problem is not work with me please help

    ReplyDelete
  43. thanks for your tips...!!!!!
    i like this

    ReplyDelete
  44. Thanks for this valuable information.. i have added this on my blog here is the URL http://love-is-poisoning-u.blogspot.com

    ReplyDelete
  45. thank, i had also added to my post..
    feel free to look.. n klik the plus one

    http://muazfaris.com

    ReplyDelete
  46. Dear Sir,
    I have tried it for my site but couldn't did it. I have putted the code in the template, but +1 is not showing in my site or in the posts. Please reply

    Thanks
    Prasanta

    ReplyDelete
  47. very useful information ... thanks buddy...!!

    ReplyDelete
  48. Hello,

    is there any way to change/modify the icon other than those four in button_type?
    for example I wanna use my own icon for G+

    thanks

    ReplyDelete
  49. I thought the G+ would never come up right on my blog, until I found this post. Thank you so very much!

    ReplyDelete
  50. When I tried what the tutorial explanations above said to do it just showed up as errors on my blog. I posted the first lines above but I could not find the line so I tried posting it in a couple locations around where <data:post. and other items came up that sounded logical but none worked. I current;y have the +1 buttons for my individual posts but would like to place it there for the page period if this will work out. If you can drop me a line with where I might find that line of code I would appreciate it. Thank you.

    ReplyDelete
  51. Can u fix it for me, i am unable to install the plus 1 button on my custom template, http://707monty.blogspot.com please help me

    ReplyDelete
    Replies
    1. I'm also using a custom template on my blog. What I did was go to "Design", under "Edit HTML", check the "expand widget templates" and scrolled to the bottom of the code.

      Then copy and paste the "plusone.js" script code as shown in this article right above the body and html tags.

      After that you will just need to paste the tag shown in "http://www.google.com/webmasters/+1/button/" in anywhere in your own blog posts to render it out.

      The tag I meant is the "g:plusone></g:plusone..." thingy. Leave the rest of the script code out because you've already added it into your template.

      If you still can't get it, find me.

      Delete
    2. I have a custom template and this worked for me. Thanks.

      Delete
  52. hello my template is mash2 this method is not working my site plz tell me how can i add google plus button
    visit
    http://mesotheliomaonlineclinic.blogspot.com/

    ReplyDelete
  53. Thanks a lot, so excited, I finally got it.

    ReplyDelete
  54. When I click on your Google Plus I get this error message. Same happens on my site >

    The page you requested is invalid.

    Has blogger changed something?

    Regards - Peter

    ReplyDelete
  55. I tried somebody Else's tutorial, and it didn't work. So glad I found yours, I got it within a minute.

    ReplyDelete
  56. Really this is an helping tutorial.thanks for sharing

    ReplyDelete
  57. Thank you very much. I tried cutting and pasting the google+ button (from the official site) directly into my blog post but it just didn't render.

    After cracking my head for hours, I found your article and voilà...I can now render the button anywhere in my blog posts whenever I want to.

    Thank you.

    ReplyDelete
  58. Thanks for this Google Plus 1 button script, i will use for my blogger

    ReplyDelete