Adding the new google plus one (+1) button to your Drupal site

I am sure someone will roll a module very soon, but in the meantime I thought I would blog about our first experiences in adding the plus one button ...

There is plenty of background on the google plusone button already - http://www.google.com/+1/button

It sounds very simple, and indeed it is - with only one small gotcha that we couldn't find any documentation for. We basically followed the steps outlined here : http://code.google.com/apis/+1button/ which is simply :

1. Include the google plusone javascript file somewhere on your page - recommended in the footer.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

2. Work out the layout of your plusone button, there are a couple of options - all with varying degrees of "in your face"ness. You can do this here http://www.google.com/webmasters/+1/button/

3. Add a special tag in the location where you would like your plusone button to appear - there are HTML4 and HTML5 versions of this available, if in doubt go with the HTML4 one. Your tag will look something like this

<g:plusone count="false"></g:plusone>

And that's it ... well at least that should be it - however we just couldn't get this configuration to work, we consistently got a red exclamation mark after clicking the plusone button. After a bit of experimenting we figured out that the URL of the current page needs to be "forced" into the plusone tag in an href attribute - giving something like

<g:plusone href="http://www.computerminds.co.uk/about" count="false"></g:plusone>

Obviously you aren't going to hardcode this URL - but instead populate the href attribute using a smidge of PHP - something like

<g:plusone href="

 print url($_GET['q'],array('absolute'=>true));

" count="false"></g:plusone>

And that should do it ... don't forget you need a google profile https://profiles.google.com to use plus one ...