Here’s a quick reference guide to adding a Google +1 button to your website. There seems to be lots of instructions so I’ve tried to collate the best of those I’ve found to make it as simple as poss.
To make them appear, you simply need to add this code just before your closing body tag (which looks like </body>). It is a line of javascript provided by Google:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
If you’re using WordPress, often good themes will allow you access to edit this section of your page without having to delve into the template files. If you do have to dig through the theme’s files, you can be pretty sure </body> will be in your file called footer.php.
Once that’s in place, as long as the code you’ve inserted is displaying on each page you want the Google buttons to appear on you then just need to add one these snippets of code:
SMALL: <g:plusone size="small"></g:plusone>
MEDIUM: <g:plusone size="medium"></g:plusone>
STANDARD: <g:plusone></g:plusone>
TALL: <g:plusone size="tall"></g:plusone>
Other resources:
- Google’s instructions and video are here: http://www.google.com/webmasters/+1/button/
- The Torchbox team also have a nice guide: http://www.torchbox.com/blog/google-releases-plus-one-button-code
- This is a good guide for making it HTML5 standards compliant: http://www.elevatelocal.co.uk/blog/how-to-add-google-1-button-plus-one-html5-02063128
Here’s what the tall one looks like:
Hey Geecologist,
Thanks for mentioning my post on Elevatelocal 🙂
Pleasure Yousef, thanks for writing a great intro as well!