After weeks of hype, the Google +1 Button is finally here.
Yesterday Google let the button loose for developers to embed in their websites and included the button with search results on google.com with other country search engines to follow soon.
Adding the Google +1 Button to your website
Google has provided a button creation page which configures and generates the code for the button according to the options you select.
There are four button sizes on offer, three horizontal buttons at 15px, 20px and the “standard” 24px and one vertical button called “tall” at 60px.
Language options are available too, however at present only English (US) is working with the button for search results on google.com.
Expanding the Advanced options section allows you to choose whether to display the button count along with other options to add a javascript callback function which can be used to track your button clicks in Google Analytics (see next section).
Changing the options updates the button preview windows on the right hand side and the code you need to add to the site is displayed at the bottom.
There are two parts to the code that you’ll need to add to your website before the button will work and these need to be placed in different areas of your page. Google has included comments in the code snippets which clearly eplain where they should go.
The first part of the code adds the javascript support and should be added to your page, preferably before the closing </body> tag.
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-GB'}
</script>
Next, place the second part of the code on your web page where you want the +1 button to appear.
<!-- Place this tag where you want the +1 button to render --> <g:plusone size="medium" callback="plusone_vote"></g:plusone>
Tracking the Google +1 Button clicks in Google Analytics
To get the most out of the +1 button we’re going to show you how to track each button click with Google Analytics.
Expand the Advanced options section, leaving the Parse option set to the default (on load).
In the JS Callback function field type plusone_vote (see image above).
Next, place the following code somewhere before the closing </body> tag on your web page.
<script type="text/javascript">
function plusone_vote( obj ) {
_gaq.push(['_trackEvent','plusone',obj.state]);
}
</script>
This function will record each push of the +1 button in Google Analytics as an event, “on” for a vote and “off” if someone removed their vote.
What’s next?
Google does plan to add more control and tracking of the +1 button within Webmaster Central but at the time of writing, there doesn’t appear to be any changes.
A note for Google Apps users. You’ll have to wait a few weeks before you can use the button.
Currently Google Apps does not support or have access to Google Profiles which the +1 button uses. Google has promised that this will change in the next few weeks. We’ll let you know when that happens.
However, you can still go ahead and add the +1 button to all your websites.
Happy +1-ing!
