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

91 comments :

  1. Umar FarukJune 2, 2011 at 1:41 PM

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

    ReplyDelete
  2. www.mohanmekap.comJune 2, 2011 at 4:38 PM

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

    ReplyDelete
  3. Beben KobenJune 2, 2011 at 10:06 PM

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

    ReplyDelete
  4. MonkJune 3, 2011 at 12:20 AM

    thnx buddy

    ReplyDelete
  5. UnknownJune 3, 2011 at 1:28 AM

    nice buttons

    ReplyDelete
  6. UnknownJune 3, 2011 at 2:26 AM

    Great Job!

    I have applied it on my blog.

    Please follow me i will follow you with comments.

    Thanks.

    http://bdclaymart.blogspot.com/

    ReplyDelete
  7. nuggetJune 3, 2011 at 3:52 AM

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

    ReplyDelete
  8. LilacsJune 3, 2011 at 4:13 AM

    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
  9. Edmonton artistJune 3, 2011 at 8:03 AM

    my blog does not have

    ReplyDelete
  10. AnonymousJune 3, 2011 at 10:59 AM

    Thanx!! +1 for you!

    ReplyDelete
  11. JohnJune 3, 2011 at 12:19 PM

    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
  12. UnknownJune 3, 2011 at 1:03 PM

    @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
  13. UnknownJune 3, 2011 at 2:50 PM

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

    ReplyDelete
  14. vj.onixJune 3, 2011 at 7:30 PM

    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
  15. Janet GomezJune 4, 2011 at 10:48 AM

    Thanks :)

    ReplyDelete
  16. Yash hoodaJune 5, 2011 at 12:02 AM

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

    ReplyDelete
  17. BoffillJune 5, 2011 at 9:20 AM

    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
  18. YohanesJune 5, 2011 at 10:03 AM

    It looks great, it's time to try

    ReplyDelete
  19. SivasankarJune 6, 2011 at 9:28 AM

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

    Keep Blogging . ..

    ReplyDelete
  20. AdminJune 7, 2011 at 6:03 PM

    i will try

    ReplyDelete
  21. PeterJune 7, 2011 at 6:58 PM

    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
  22. Blogger-ASJune 8, 2011 at 12:42 PM

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

    ReplyDelete
  23. atty. stacyJune 9, 2011 at 1:12 PM

    doesnt work for me can't find

    ReplyDelete
  24. Floramea SureshJune 12, 2011 at 11:04 PM

    Hi

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

    Thanks

    ReplyDelete
  25. Светлана КовалеваJune 14, 2011 at 12:01 AM

    Thank you very much! Terrific tool for installation! Works great!

    ReplyDelete
  26. BloggerblurJune 14, 2011 at 2:31 AM

    It looks great, thanks buddy

    ReplyDelete
  27. Светлана КовалеваJune 14, 2011 at 3:29 PM

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

    ReplyDelete
  28. Kurnia SeptaJune 18, 2011 at 2:05 PM

    I like it

    ReplyDelete
  29. M Isron W (Asoka Site)June 22, 2011 at 9:06 PM

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

    ReplyDelete
  30. UnknownJune 28, 2011 at 10:43 AM

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

    ReplyDelete
  31. MubashirJune 28, 2011 at 6:30 PM

    great work look at some new stuff

    ReplyDelete
  32. Sankara Subramanian CJune 30, 2011 at 10:42 PM

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

    Sankara

    ReplyDelete
  33. Tasawuf IslamJuly 1, 2011 at 2:04 PM

    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
  34. Zero TalentJuly 1, 2011 at 8:06 PM

    Installed yesterday and now it's gone ...

    ReplyDelete
  35. UnknownJuly 7, 2011 at 9:08 PM

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

    ReplyDelete
  36. Justin EdwardsJuly 7, 2011 at 11:48 PM

    Bravo!!

    ReplyDelete
  37. jasonJuly 8, 2011 at 10:01 PM

    perfect!!!

    ReplyDelete
  38. ContractorJuly 12, 2011 at 4:37 AM

    thanks it works like a charm.

    ReplyDelete
  39. M'dame JoJuly 14, 2011 at 1:40 PM

    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
  40. AppreviewfreeJuly 19, 2011 at 8:16 PM

    Thank you for the tutorial :)

    ReplyDelete
  41. UnknownJuly 28, 2011 at 9:47 PM

    I dont find this on my HTML-

    ReplyDelete
  42. MilanJuly 31, 2011 at 12:14 AM

    Great. Thanks....+1

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

    ReplyDelete
  43. nishant bhaktaAugust 1, 2011 at 9:04 AM

    Thanks blogger plugins.

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

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

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

    ReplyDelete
  44. nishant bhaktaAugust 1, 2011 at 9:29 AM

    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
  45. Steph from fangswandsandfairydust.comAugust 2, 2011 at 6:11 AM

    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
  46. M'dame JoAugust 2, 2011 at 12:11 PM

    What nishant bhakta said...

    ReplyDelete
  47. AmyAugust 3, 2011 at 7:26 PM

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

    ReplyDelete
  48. Farmer's City WifeAugust 4, 2011 at 4:58 AM

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

    ReplyDelete
  49. JelBeeAugust 4, 2011 at 4:46 PM

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

    ReplyDelete
  50. Infamous HiteshAugust 5, 2011 at 5:13 PM

    you are great man I really like your work

    thanx for sharing this valueable stuff

    ReplyDelete
  51. AnujaAugust 6, 2011 at 11:12 AM

    i don't have :(

    ReplyDelete
  52. Saket MishraAugust 8, 2011 at 4:28 AM

    thanks a ton

    ReplyDelete
  53. AkifAugust 11, 2011 at 7:21 PM

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

    ReplyDelete
  54. AliAugust 11, 2011 at 7:22 PM

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

    ReplyDelete
  55. AniruddhaAugust 12, 2011 at 8:59 PM

    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
  56. alarm sistemleriAugust 16, 2011 at 6:52 AM

    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
  57. reiseauktionAugust 16, 2011 at 1:03 PM

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

    ReplyDelete
  58. Hoang NguyenAugust 24, 2011 at 10:07 AM

    so great !!!!!!!

    ReplyDelete
  59. Νίκος ΤσότσοςAugust 30, 2011 at 1:19 AM

    thanks for the tip

    ReplyDelete
  60. mohamedAugust 31, 2011 at 3:13 AM

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

    ReplyDelete
  61. AsyArieLAugust 31, 2011 at 4:51 AM

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

    ReplyDelete
  62. Jacks WilsonAugust 31, 2011 at 5:00 PM

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

    ReplyDelete
  63. mzSeptember 1, 2011 at 4:59 AM

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

    http://muazfaris.com

    ReplyDelete
  64. PrasantaSeptember 14, 2011 at 12:48 AM

    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
  65. UnknownSeptember 29, 2011 at 7:36 PM

    Amazingly worked out. TQVM.

    ReplyDelete
  66. fuadOctober 27, 2011 at 7:12 AM

    very useful information ... thanks buddy...!!

    ReplyDelete
  67. اخبار مصرNovember 10, 2011 at 8:49 PM

    its working fine thanks for share

    ReplyDelete
  68. Lazuli SaraeNovember 10, 2011 at 9:49 PM

    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
  69. MaricelDecember 11, 2011 at 3:25 PM

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

    ReplyDelete
  70. ShanjeiDecember 20, 2011 at 9:23 AM

    nice.. working

    ReplyDelete
  71. nomanDecember 22, 2011 at 11:06 PM

    o! first time. Yes, i have it

    ReplyDelete
  72. Vanessa ValenciaDecember 24, 2011 at 10:34 AM

    i can't find



    how is it..?

    ReplyDelete
  73. 10 Hal Menarik Dunia Kita - Arham VhyDecember 26, 2011 at 12:54 PM

    I don't have Google plus because I'm 17 year old..

    ReplyDelete
  74. UnknownJanuary 24, 2012 at 12:25 PM

    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
  75. Email: sok.vannak168@yahoo.comJanuary 27, 2012 at 10:29 AM

    hi all

    ReplyDelete
  76. Ch UmairJanuary 28, 2012 at 8:09 PM

    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. BuLaDiFuApril 12, 2012 at 7:47 PM

      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. Kaliqo~April 21, 2012 at 2:53 AM

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

      Delete
  77. AdminFebruary 24, 2012 at 2:42 AM

    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
  78. Manpreet SinghFebruary 27, 2012 at 10:08 PM

    great work man......

    ReplyDelete
  79. Surga KenariMarch 6, 2012 at 7:48 PM

    thx a lot brother..

    ReplyDelete
  80. deobaraanmdMarch 16, 2012 at 4:19 PM

    very useful1

    ReplyDelete
  81. kobiruzzamanMarch 17, 2012 at 7:45 PM

    helpfull

    ReplyDelete
  82. UgochiApril 3, 2012 at 11:03 PM

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

    ReplyDelete
  83. PeterApril 5, 2012 at 5:13 PM

    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
  84. Amanda TempelApril 7, 2012 at 8:16 PM

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

    ReplyDelete
  85. gnesopApril 8, 2012 at 5:05 PM

    thank you

    ReplyDelete
  86. Mohamed NaseefApril 11, 2012 at 2:31 PM

    Really this is an helping tutorial.thanks for sharing

    ReplyDelete
  87. BuLaDiFuApril 12, 2012 at 7:24 PM

    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
  88. UnknownApril 10, 2013 at 4:30 PM

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

    ReplyDelete
  89. AbhinavOctober 12, 2015 at 6:00 PM

    thanks

    ReplyDelete

Subscribe to: Post Comments ( Atom )