Our Blog

How to add a Google +1 button to your website


Posted by
2 June 2011
13:07
5 comments

Today Google started rolling out the +1 button to the web. Up until now, the +1 button was only available on google search results on google.com itself.

There doesn’t seem to be any formal documentation on exactly how to add the +1 button to your website though. We had a look at a few of the sites who got access to the +1 button through partnering with Google, and reverse engineered it.

Google Plus One Button

To add a +1 button to your web page, paste the following embed code onto the page where you want the button to appear:

<iframe allowtransparency="true" frameborder="0" hspace="0" id="I1_1307012621585" marginheight="0" marginwidth="0" name="I1_1307012621585" scrolling="no" src="https://plusone.google.com/u/0/_/+1/button?hl=en-US&amp;jsh=s%3Bplusone%3Agoogleapis.client%4021550740_8d71de52%2Fclient%3Bgoogleapis.proxy%4021550740_8d71de52%2Fproxy%3Bplusone%3Agoogleapis.client%3Aiframes-styles-bubble%4021550740_8d71de52%2Fbubble%3Biframes-styles-bubble!plusone%3Agoogleapis.client%4021550740_8d71de52%2Fbubble_only%3Bplusone-unsupported%4021550740_8d71de52%2Funsupported#url=YOUR_PAGE_URL&amp;size=medium&amp;count=true&amp;id=I1_1307012621585&amp;parent=YOUR_SITE_URL&amp;rpctoken=982298531&amp;_methods=_ready%2C_close%2C_open%2C_resizeMe" style="width: 82px; height: 20px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="-1" vspace="0" width="100%"></iframe>

(remove all the newlines when copying this – it should be a single line of code)

Replace YOUR_SITE_URL with the root url of your website, ie http://wewillraakyou.com

Replace YOUR_PAGE_URL with the url of the page that will be +1′d, ie http://wewillraakyou.com/2011/06/google-plusone-button-howto/

Replace all colons in your url’s with %3A and slashes with %2F, ie http%3A%2F%2Fwewillraakyou.com

Viola! You have a fully functional +1 button. (like the one on top of this post)

UPDATE: June 2, 2011
Shortly after doing this though, we not only discovered the official +1 button generator (pointed out by @matijarijavec in his comment below), but also a number of WordPress plugins, like this one, making it easy to add the button on your blog.

Well – at least we did it the dirty way!

Posted by

5 Comments

  • Posted by matija
    June 2, 2011 at 3:20 pm | Permalink

    whats wrong with +1 button generator?

    http://www.google.com/webmasters/+1/button/

    except that is JS code and not iframe? :)

  • Posted by Adriaan Pelzer
    June 2, 2011 at 3:45 pm | Permalink

    Haha – that’s a LOT cleaner! Thanks!

    I googled for something like this, and couldn’t find it … how ironic

  • August 9, 2011 at 10:10 pm | Permalink

    What about the I1_1307012621585 and 982298531 IDs? are those of your account?

  • Posted by Breaing News
    September 15, 2011 at 7:27 pm | Permalink

    I try to add it to my site, but when I check error by W# Validation, it shows error.
    Please tell me why?

  • Posted by Lars Holdgaard
    January 20, 2012 at 10:25 am | Permalink

    Thanks – just what I needed. IFrame is just so much more easier to work with :-)

Leave a Comment

Your email is never shared. Required fields are marked *