Add Google +1 (plus one) button to Blogger posts

Google plus one

Google+1 (pronounced “plus one”) is a recommendation button somewhat similar to Facebook Like button. Both of them show friends that recommended your post. But while Facebook Like shows them under the button in your post, Google +1 shows them under your post in Google SERP (search engine results pages).

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, archive etc.) and individual/post page etc. You will have an option whether to include a counter or not.

(If you don’t want to add the button under blog posts, there is another method: Add it to a  floating social media sharing bar)

 1 Blogger below post

Update Sep. 2011: Switch to the new Google +1 (asynchronous) script. Split the code into two parts, the first part (script) placed in the head section of template, the second part (button code) stays.

Let us proceed with the tutorial:

  1. Go to Design Template > Edit HTML.
  2. Back up your template.
  3. Tick the  Expand Widget Templates checkbox on top right of the code window.
  4. Find the </head> tag, and paste this script right above it:
    <!-- Google +1 script Start -->
    <b:if cond='data:post.isFirstPost'>
    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
    </b:if>
    <!-- Google +1 script End -->
    
  5. Next, look for the first instance of <data:post.body/> and paste the following +1 button code immediately under it:
    <!-- Google +1 button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <p></p>
    <div style='float:left;padding:10px;'>
    <g:plusone expr:href="data:post.url" size="standard" annotation="bubble"></g:plusone>
    </div>
    </b:if>
    <!-- Google +1 button End -->
  6. Configure button 
    You can configure the button by changing the attributes of the g:plusone tag in line 5 (in step 5). 
    • Select the size of button by replacing the value of  size attribute with a value from the table below.

      Button size (with count)

      Value

      google plus one small  small
      google plus one medium  medium
      google plus one standard  standard
      google plus one tall  tall
    • You can remove the count by changing the value of annotation attribute to none.
  7. Button repositioning
    The +1 button code (in step 5) positions the button on bottom left of each post. You can change the positioning if you wish to.
    • Position it on top of post
      Place the button code before (instead of after) <data:post.body/>.
    • Position it on the right
      Change the float in line 4 from left to right.
  8. Displaying button on static pages
    Conditional tags prevent the button from appearing on static pages. If you want it to appear on static pages as well, remove the tags (step 5 line 2 and 7).
  9. Preview before saving.

Enjoy!

104 comments to "Add Google +1 (plus one) button to Blogger posts"

Beben Koben June 3, 2011 at 2:20 AM    

on step 5...facebook button!!!
hihihi :D

Greenlava June 3, 2011 at 3:05 AM    

@Beben Koben
Aha...thanks for spotting it :)
Correction done.

Selina June 3, 2011 at 5:59 AM    

Thanks again Greenlava, button added :)

New York's Hottest Blogger! June 3, 2011 at 8:13 AM    

Hello Blogger SENTRAL! Google made it fairly easy for blogger/blogspot users (and for WP users) to add the +1 button, but for those of us still sticking with the old so-called "classic" blog*spot template, we had to figure it out for ourselves! I came up with a solution that's not 100% perfect, but it does the job!

Here's the link:
http://dave-lucas.blogspot.com/2011/06/add-google-1.html

Greenlava June 3, 2011 at 11:16 AM    

@Selina
You're welcome.

@New York's Hottest Blogger!
Thanks for sharing.

Unknown June 3, 2011 at 3:13 PM    

hi mr. greenlava
i have use your auto read more option on my post
and somehow i could not find the exactly
where should i put the html code?
thanks

edinesia June 4, 2011 at 12:20 AM    

thank for your tutorial, its very good

Anonymous,  June 4, 2011 at 9:22 AM    

Thank you. In step 8, do you mean "remove conditional format code in line 2 and 8" (not line 7)?

Greenlava June 4, 2011 at 1:58 PM    

@Anonymous
You're right. Thanks.
It's fixed now.

Greenlava June 4, 2011 at 2:11 PM    

@elmyra
Remove code line 2 and 8, and put it under the first data:post.body.

gavee June 5, 2011 at 12:17 AM    

Green lava, please visit my blog about plusone button, whats wrong ? thank for your time
my blog http://www.ac-elektrik.com/

Greenlava June 5, 2011 at 1:42 AM    

@gavee
Nothing wrong with it. It's working fine from here.

Gerie June 5, 2011 at 3:00 AM    

That was a real help, thanks and just subscribed

syuxer June 5, 2011 at 1:29 PM    

tq..:)

jiff0777 June 5, 2011 at 1:51 PM    

its working fine for me. For those who couldnt make it, its because of you may be having more than one
so, try one by one. you will get it.. Have a look mine...
Http://www.spicytec.com

Thanks admin..

Jun June 6, 2011 at 2:05 PM    

thanks, your blog is great, i click the button ;)

Anonymous,  June 6, 2011 at 11:28 PM    

thanks..

zulkbo June 7, 2011 at 11:23 PM    

salam..
terbaik!!
saya dah add
:)

Reyad Islam June 7, 2011 at 11:33 PM    

thanks for this!!
have added successfully

codewall June 9, 2011 at 12:23 PM    

thanks for this tutorial:
see mine. I attached it with addthis share button:
http://codewall.blogspot.com

price india June 11, 2011 at 1:57 AM    

how can i add this button to my addthis widget?

Greenlava June 13, 2011 at 3:38 PM    

@price india
You can read it here:
Adding Google +1 button to AddThis toolbox.

Unknown June 16, 2011 at 10:47 AM    

This is awesome.. Google +1 button will make every bloggers getting more famouse their blog and the position on SERP..

great job!

Naser @ Best Tips For Blogging June 16, 2011 at 11:35 AM    

Google +1 button will completely destroy SERP of small businesses, where as spammers will sponsor +1 button clicks to their site, thus making Google’s Search Engine Spammers Engine. Another fail after Buzz

Jamie June 16, 2011 at 12:59 PM    

my button couldn't align to the left right. what should I do?

Greenlava June 16, 2011 at 4:01 PM    

@Jamie
To align right, replace float:left to float:right.

Anonymous,  June 16, 2011 at 9:20 PM    

this is make your blog loading slower..

New trick..
http://fikri.my/blog/2011/06/08/script-yang-lebih-baik-untuk-google-1.html

but this doesnt work with blogger, because of the ALL HEAD CONTENT on blogger template - googlesystem

Nizam June 20, 2011 at 6:43 PM    

i put this google plus button but it look like my visitor don't like to click that button.hehe

达达 June 21, 2011 at 6:19 PM    

HI, it works, but like Daus says, it'll slow down loading times a bit, I think the problem lies with the "Skipping duplicate osapi method definition" introduced by the plusONE javascript (take a peek with firebug while the page loads and you'll get an idea). The only reference I can find indicating this issue is www.stilbruch.at/2011/06/new-news-or-no-news-googles-social.html , in summary, it depends, will the plusONE button pick up in popularity to justify the slight inc in loading time, or would Google fix this

timing fx June 23, 2011 at 3:06 AM    

great your tips, thanks for share :)

Feey1 June 23, 2011 at 10:51 AM    

Is there a way I could add the +1 Button to my blog(say, the sidebar)that would plus the whole site?

Unknown June 23, 2011 at 1:56 PM    

Already apply..but people dont like to push the button...:(

Greenlava June 23, 2011 at 3:18 PM    

@Feey1
Place the code below in a HTML/Javascript widget.
[script type="text/javascript" src="https://apis.google.com/js/plusone.js"][/script]
[g:plusone expr:href="data:post.url" size="standard" count="true"][/g:plusone]

or you can try the floating buttons.

Feey1 June 23, 2011 at 11:05 PM    

It didn't work. The text just appeared.

Greenlava June 25, 2011 at 4:39 PM    

@Feey1
Oops sorry, try this:
[script type="text/javascript" src="https://apis.google.com/js/plusone.js"][/script]
[g:plusone size="standard" count="true"][/g:plusone]

and make sure you replace < and > symbols with [ and ] respectively.

Dimanchec3 July 3, 2011 at 3:39 AM    

I was looking for this, THANKS! It totally worked on my page.

Unknown July 7, 2011 at 10:10 PM    

Thanks it works great!

Mahabubur Rahaman July 9, 2011 at 4:03 AM    

Dear sir... I haven't found any
in my blogs html section. Its a custom theme. downloaded from online. what to do?

Mahabubur Rahaman July 10, 2011 at 1:17 PM    

I am trying to add Google+1 in My Blogger blog, I tried out a lots of time, but I was unable to add this. Its not working. What to do can any one explain?

Greenlava July 10, 2011 at 11:45 PM    

@Arman
Have you ticked the Expand Widget Templates checkbox before finding the code?

达达 July 12, 2011 at 6:52 PM    

Hello Greenlava,

I've just noticed that Google +1 button is not sharing the correct thumbnail (though the title content excerpt is correct)> I can't seem to find a solution all over at Google help forums or the web. Facebook Like is able to do sharing properly. I remembered you have fix for the Facebook like button before. Any clues or fixes that you know of?

My post summary page. http://when2meets2.blogspot.com/search?max-results=7
Sharing at the post page also results in the same error, e.g. http://when2meets2.blogspot.com/2011/04/raming-tea-house-siam-celedon.html

Many thanks,
When2Meets2

Bethany July 14, 2011 at 8:01 AM    

How would you add this button to the right nav. The place where you can "add a gadget"

Greenlava July 14, 2011 at 6:04 PM    

@Bethany
Please read reply #36. Put the code in a HTML/Javascript gadget.

Henrik Falk July 17, 2011 at 6:00 AM    

I have added the code:
[script type="text/javascript" src="https://apis.google.com/js/plusone.js"][/script]
[g:plusone size="standard" count="true"][/g:plusone]
(and replaced [] with <>) in a HTML/JavaScript gadet on my site www.nerdyentertainment.com but no +1 shows up.
The gadget is located right above the follower gadget.

AJ Banda July 18, 2011 at 4:28 PM    

wow.. really helpful post.. thanks for this one!

Greenlava July 18, 2011 at 9:58 PM    

@Henrik Falk
Apparently putting the code in a widget no longer works on some blogs :)

Blog Tutorial Untuk Indonesia July 23, 2011 at 9:03 PM    

Nice post...Keep Blogging

Bryonm July 29, 2011 at 11:06 AM    

Thanks! Very groovy.

Milind Shrivastava August 3, 2011 at 6:34 PM    

Thanks for the post. I wanted to add the button besides each post title so that it appears only on post pages and not on home page.
I am happy with the way it currently looks on the separate posts pages in my blog but want to correct (actually remove) them from the home page. any idea if I could do that?
I have put the button on the posts pages html and not on the blog template:

http://milindblog-hobee.blogspot.com/

GoDaddy Code August 6, 2011 at 1:20 AM    

Thanks a lot Greenlava ... :)

Greenlava August 7, 2011 at 8:51 PM    

@milind
Replace the conditional statement in line 2 with this one:
[b:if cond='data:blog.pageType == "item"']

Milind Shrivastava August 8, 2011 at 5:47 PM    

@Greenlava
Thanks for the help! Quite a few of my readers suggested me that it looks cool in the floating bar, so I left it there :)

Nurul,  August 11, 2011 at 5:15 PM    

thanks for the help, it works! :)

Akif August 11, 2011 at 9:57 PM    

i have plus oned this and sure im gona use ths on my blog thanks anyway

seomaster440 August 12, 2011 at 2:17 PM    

Promoting google+ votes is becoming a very hot business. Using these types of services could have negative or positive affects on SEO.
We just have to see how google treats them. Another place to buy google plus votes is bulkones.com
Will be interesting to see how this evolves over the next few months.

Unknown August 13, 2011 at 9:39 PM    

conflict between google plus button and lightbox
There is a serious conflict b/w Google plus button and lightbox script the buttons works fine in all other pages but when lightbox script is added to the page there is some problem.

It has a JavaScript error and the Google plus one button wont show up

Jen@born2impress August 13, 2011 at 11:50 PM    

The button is only showing on my first post....How can I make it show in all posts?
Thanks for the tutorial!

Jen@born2impress August 14, 2011 at 12:28 AM    

Got it.
Thanks!

brando August 14, 2011 at 8:17 PM    

The google+1 button is working on my site, but it's only showing up in the first blogpost on the page. how can I get it in all of them? Take a look at the blog here:
http://exercisebasics.blogspot.com

Greenlava August 17, 2011 at 11:32 AM    

@Brando87
It's looking fine from here.

brando August 18, 2011 at 2:05 AM    

yes, I figured it out, thanks for the great post.

ecambodia August 25, 2011 at 11:59 AM    

That is nice article that i find it. good post!

Gintas August 27, 2011 at 9:03 PM    

You can get the +1 button for your blog at Google webmaster tools. Simply just add a new HTML/JavaScript widget with the code.

Eset Nod32 September 6, 2011 at 9:06 AM    

thanks for share ... good website!! and keep posting friend

Infoshare September 14, 2011 at 3:05 AM    

tnx a lot dude.

kamera sistemleri September 20, 2011 at 7:11 AM    

I have to admit that the idea of organising people into groups I find very compelling. Right at the moment I don't share my facebook page with business contacts. I suspect many others have the same issues that a facebook page is about your social life and you quite possibly don't want to mix that with your business life. I think there may be a cultural aspect to this as well. In the US I think there is less of a divide between private and business life, here in the UK I think we tend to have a firmer divide. Whether that's a good or bad thing who's to say but it does impact how we view applications like Facebook from a business standpoint.

I'm going to be signing up for a Google+ account because I think this is a bold experiment from Google and I'm fascinated to see how it turns out.

Best regards,

studietoelagen September 30, 2011 at 12:01 AM    

FINALLY something that worked for me, really thanks!

Munir ardi September 30, 2011 at 6:03 AM    

do you tutorial if we want to add this buton just in sidebar thanks

Greenlava September 30, 2011 at 8:52 AM    

@Munir ardi
Follow the same steps above, except in step 5. Use this code instead:
[g:plusone size="standard" annotation="bubble"][/g:plusone]
and place it in a HTML/Javascript gadget.
Replace < and > symbols with [ and ] respectively.

IDS October 13, 2011 at 1:05 AM    

Nice post bro! Thx for the tutorial

Shoaib Awan October 27, 2011 at 11:26 PM    

Thanks very much may allah bless you........

Asif Icbal November 3, 2011 at 2:25 AM    

thank you very much. i got it

Sarah King November 4, 2011 at 2:00 AM    

Great instructions and it works thanks. However, on my blog at www.katts03.co.uk its showing the +1 button for each post but when I click on the individual posts its not showing on the actual posts. Is there a way to do this?

Greenlava November 5, 2011 at 8:26 AM    

@Sarah King
It's working from here.

Tara November 10, 2011 at 4:17 AM    

For some reason I don't have in my code :( any other suggestions?

Tara November 10, 2011 at 4:20 AM    

It also says "TEMPLATE ERROR: Invalid data reference post.url: No dictionary named: 'post' in: ['blog'] "

Greenlava November 11, 2011 at 9:55 PM    

@Tara
Have you checked the Expand Widget Templates checkbox before searching for the code (data:post.body)?
That error usually occurs when you place the code outside of Blog widget.

Lifes Health Care November 26, 2011 at 12:21 AM    

Thanks so much.. really help me. I have add it into my blog...

dee December 17, 2011 at 8:35 PM    

I added the code like you instructed but still no button. I took out line 2 and 7 just in case and still doesn't show. Any suggestions? http:werthe2ndgeneration.blogspot.com
Sharon L. Perry
aolegacy@gmail.com

Greenlava December 17, 2011 at 10:56 PM    

@Agent Orange Legacy - Children of Vietnam Veterans
Where did you put the code? I don't see it.

Profit Maker January 14, 2012 at 4:00 PM    

I could not found code in my blog code.... :(
plz help what to do???

SEO February 1, 2012 at 6:29 PM    

Nice post.I want unique plus 1 button for my blog not for all pages.For example
www.one.blogspot.com/ +3
www.one.blogspot.com/inner page +0

I dont want like this i want like this
www.one.blogspot.com/ +3
www.one.blogspot.com/inner page +3

yusuf February 2, 2012 at 2:03 PM    

thank you after add your code on my home page now google + button working properly.

TaxiBrasov February 13, 2012 at 3:15 AM    

10x a million!!! just what i wanted!

Economizor Energie February 13, 2012 at 3:16 AM    

u'r the best, u saved me!

mae,  February 16, 2012 at 11:21 AM    

There are two
Put the code under both ?

Greenlava February 17, 2012 at 1:28 AM    

@mae
Under the first one.

Webdesign March 1, 2012 at 9:53 PM    

This was what I needed!!!

se7enx March 6, 2012 at 6:47 PM    

Hi all,
Have anyone know to use google+1 to hide part of a post,if people want to read more they have to click google+1 button and then the rest of the post will show up.Thanks.

hyundai sài gòn March 16, 2012 at 12:31 PM    

Thanks again Greenlava, button added, thanks thanks thanks....

GTA San Andreas March 31, 2012 at 11:41 PM    

Good Post! Benefit of adding this Google + is that Bing and Yahoo take it seriously in their algorithm!

Lure Making May 1, 2012 at 8:28 PM    

Hi,
Found exactly what I was looking for here. Code works perfectly, plus one button added to my blog posts, Many thanks.
Joe.

BOSE June 10, 2012 at 2:53 PM    

Can U tell me, how to add +1 button for each links in a recent posts widget.. thank you..

Greenlava June 11, 2012 at 3:35 PM    

@Anonymous
Sorry I can't. I don't know how to do that.

Shazy June 15, 2012 at 5:37 AM    

Nice Bro! Thanx

Manoj July 19, 2012 at 6:12 PM    

I/m unable to add google+ button, getting error code as :Invalid data reference post.isFirstPost: No dictionary named: 'post' in: ['blog', 'skin', 'view']

Greenlava July 25, 2012 at 5:27 PM    

@Manoj V B
You've probably put the code somewhere it doesn't belong i.e. outside the post template.

jayr October 17, 2012 at 9:20 PM    

Thanks! I use this trick on my blog..

FlowingEvents November 16, 2012 at 3:17 PM    

Thank You Very much for this Code. It worked for me. WELL dONE man :)

iLoveTrick November 29, 2012 at 2:49 PM    

Nice Post Dear.and nice blog.

way priaz January 22, 2013 at 9:53 AM    

makasih sob, artikel yang saya cari nih pusing banget nyari script google +1

Anam Ahlun February 3, 2013 at 12:00 PM    

why not showing in my blog??
please help

Kranthi March 9, 2013 at 2:00 AM    

It helped us to keep the Google plus code in our blog.
Thanks for sharing.

Unknown July 1, 2013 at 6:09 PM    

nice job. step by step . congrats !

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.