How to add a Google +1 button to your website
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.
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&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&size=medium&count=true&id=I1_1307012621585&parent=YOUR_SITE_URL&rpctoken=982298531&_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 Adriaan Pelzer
5 Comments
whats wrong with +1 button generator?
http://www.google.com/webmasters/+1/button/
except that is JS code and not iframe?
Haha – that’s a LOT cleaner! Thanks!
I googled for something like this, and couldn’t find it … how ironic
What about the I1_1307012621585 and 982298531 IDs? are those of your account?
I try to add it to my site, but when I check error by W# Validation, it shows error.
Please tell me why?
Thanks – just what I needed. IFrame is just so much more easier to work with
Leave a Comment