Add Google Plus One Button on Blogger

6/02 11:24:00 AM Thursday, June 2

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

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

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

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

<div>
<g:plusone size="standard" expr:href="data:post.canonicalUrl.html"/>
</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. Umar FarukJune 2 at 1:41 PM

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

  2. mohanmekapJune 2 at 4:38 PM

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

  3. Beben KobenJune 2 at 10:06 PM

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

  4. MonkJune 3 at 12:20 AM

    thnx buddy

  5. UnknownJune 3 at 1:28 AM

    nice buttons

  6. UnknownJune 3 at 2:26 AM

    Great Job!

    I have applied it on my blog.

    Please follow me i will follow you with comments.

    Thanks.

  7. nuggetJune 3 at 3:52 AM

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

  8. LilacsJune 3 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???

  9. Edmonton artistJune 3 at 8:03 AM

    my blog does not have

  10. AnonymousJune 3 at 10:59 AM

    Thanx!! +1 for you!

  11. JohnJune 3 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! :-)

  12. UnknownJune 3 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 :)

  13. UnknownJune 3 at 2:50 PM

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

  14. vj.onixJune 3 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.

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

    Please help me. Thank you very much.

  15. Janet GomezJune 4 at 10:48 AM

    Thanks :)

  16. Yash hoodaJune 5 at 12:02 AM

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

  17. BoffillJune 5 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!

  18. YohanesJune 5 at 10:03 AM

    It looks great, it's time to try

  19. lodge4hackerJune 6 at 9:28 AM

    I readed all your post from top to bottom
    it was very good and Useful. .

    Keep Blogging . ..

  20. AdminJune 7 at 6:03 PM

    i will try

  21. PeterJune 7 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

  22. Blogger-ASJune 8 at 12:42 PM

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

  23. atty. stacyJune 9 at 1:12 PM

    doesnt work for me can't find

  24. Floramea SureshJune 12 at 11:04 PM

    Hi

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

    Thanks

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

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

  26. BloggerblurJune 14 at 2:31 AM

    It looks great, thanks buddy

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

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

  28. Kurnia SeptaJune 18 at 2:05 PM

    I like it

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

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

  30. UnknownJune 28 at 10:43 AM

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

  31. MubashirJune 28 at 6:30 PM

    great work look at some new stuff

  32. Sankara Subramanian CJune 30 at 10:42 PM

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

    Sankara

  33. Tasawuf IslamJuly 1 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 ...

  34. Zero TalentJuly 1 at 8:06 PM

    Installed yesterday and now it's gone ...

  35. UnknownJuly 7 at 9:08 PM

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

  36. Justin EdwardsJuly 7 at 11:48 PM

    Bravo!!

  37. jasonJuly 8 at 10:01 PM

    perfect!!!

  38. ContractorJuly 12 at 4:37 AM

    thanks it works like a charm.

  39. M'dame JoJuly 14 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)

    Any idea how I can do that?

  40. AppreviewfreeJuly 19 at 8:16 PM

    Thank you for the tutorial :)

  41. UnknownJuly 28 at 9:47 PM

    I dont find this on my HTML-

  42. MilanJuly 31 at 12:14 AM

    Great. Thanks....+1

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

  43. nishant bhaktaAugust 1 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......

  44. nishant bhaktaAugust 1 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.

  45. StephAugust 2 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>

  46. M'dame JoAugust 2 at 12:11 PM

    What nishant bhakta said...

  47. AmyAugust 3 at 7:26 PM

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

  48. Farmer's City WifeAugust 4 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.

  49. JelBeeAugust 4 at 4:46 PM

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

  50. Infamous HiteshAugust 5 at 5:13 PM

    you are great man I really like your work

    thanx for sharing this valueable stuff

  51. AnujaAugust 6 at 11:12 AM

    i don't have :(

  52. Saket MishraAugust 8 at 4:28 AM

    thanks a ton

  53. AkifAugust 11 at 7:21 PM

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

  54. AliAugust 11 at 7:22 PM

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

  55. AniruddhaAugust 12 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

  56. alarm sistemleriAugust 16 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.

  57. reiseauktionAugust 16 at 1:03 PM

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

  58. Hoang NguyenAugust 24 at 10:07 AM

    so great !!!!!!!

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

    thanks for the tip

  60. mohamedAugust 31 at 3:13 AM

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

  61. AsyArieLAugust 31 at 4:51 AM

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

  62. Jacks WilsonAugust 31 at 5:00 PM

    Thanks for this valuable information.. i have added this on my blog here is the URL

  63. mzSeptember 1 at 4:59 AM

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

  64. PrasantaSeptember 14 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

  65. UnknownSeptember 29 at 7:36 PM

    Amazingly worked out. TQVM.

  66. fuadOctober 27 at 7:12 AM

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

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

    its working fine thanks for share

  68. Lazuli SaraeNovember 10 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

  69. MaricelDecember 11 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!

  70. ShanjeiDecember 20 at 9:23 AM

    nice.. working

  71. nomanDecember 22 at 11:06 PM

    o! first time. Yes, i have it

  72. Vanessa ValenciaDecember 24 at 10:34 AM

    i can't find



    how is it..?

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

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

  74. UnknownJanuary 24 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.

  75. January 27 at 10:29 AM

    hi all

  76. Ch UmairJanuary 28 at 8:09 PM

    Can u fix it for me, i am unable to install the plus 1 button on my custom template, please help me

    1. BuLaDiFuApril 12 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 "..." 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.

    2. Kaliqo~April 21 at 2:53 AM

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

  77. AdminFebruary 24 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

  78. Manpreet SinghFebruary 27 at 10:08 PM

    great work man......

  79. Surga KenariMarch 6 at 7:48 PM

    thx a lot brother..

  80. deobaraanmdMarch 16 at 4:19 PM

    very useful1

  81. kobiruzzamanMarch 17 at 7:45 PM

    helpfull

  82. gnesopMarch 27 at 9:34 PM

    thank you

  83. UgochiApril 3 at 11:03 PM

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

  84. PeterApril 5 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

  85. Amanda TempelApril 7 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.

  86. gnesopApril 8 at 5:05 PM

    thank you

  87. Mohamed NaseefApril 11 at 2:31 PM

    Really this is an helping tutorial.thanks for sharing

  88. BuLaDiFuApril 12 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.

  89. UnknownApril 10 at 4:30 PM

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

  90. AbhinavOctober 12 at 6:00 PM

    thanks