Hyped as the next big thing since the Facebook 'Like' button - this tutorial explains how to add the Google +1 button to your site and extend your social network. I found that a plugin wasn't working for me with another third-party plugin and I needed a solution so here it is for you all to use! This tutorial will show you how to make some simple modifications to your WordPress blog to show the button - without using a plugin.

In Google's own words: The +1 button is shorthand for "this is pretty cool" or "you should check this out."

Requirements: To +1 posts or look at your own +1 statistics, you will need a Google Profile. In my opinion, all webmasters should have one (to make use of the excellent Google Webmaster Tools) but if you don't, please visit the following link: Google: New Account.

Introduction

The Google +1 button is seen by some as a move by Google to close the gap between them and Facebook. Whether or not this is the case, it's likely that this will become very popular similar to the 'like' button and should not be ignored by webmasters.

This tutorial will show you how to make some simple modifications to your WordPress blog to show the button - without using a plugin. I found that a plugin wasn't working for me with another third-party plugin and I needed a solution so here it is for you all to use!

Step 1 Call the JavaScript Code from your Theme's Footer File

The first thing you need to do is to add a snippet of code just before the </body> tag in your theme's footer template. To do this, simply login to your WordPress Dashboard and click on: Appearance > Editor.

On the right-hand menu you should see a list of files that can be edited. Select the Footer (footer.php) file from this list. We're going to add a small piece of code here to call the JavaScript from Google's server which will handle the function of the button.

In the editor, scroll down until you find the </body> tag and copy/paste the following code directly above it.

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

Then click on the Update File button underneath the code.

Note: In certain themes, you may not be able to access the footer.php file, or find the </body> tag in it. In that case, you need to enter the following code into your theme's functions file (functions.php)

function show_google_plus_one()
{ echo '<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>';<br>
}<br>
add_action('wp_footer', 'show_google_plus_one');

This hooks into WordPress and will run every time the template calls the <pre>wp_footer</pre> function.

That's it! Now it's time to add the button to your site.

Step 2 Choosing your Button

The button can be styled in several ways. The easiest way to choose, is to visit the Google +1 website and create a custom button: Google +1 Your Website

Once you've chosen your preference, you're ready to insert the code onto your site!

Step 3 Adding the Button

Now it's time to decide where you want the button to appear on your site. The typical place for using this is at the top of individual Posts. You may already have the Facebook 'like' button installed so next to that could be a good start. Once you've decided, go back to the Dashboard and in the same window (Appearance > Editor) select the Single Post (single.php) from the right-hand menu. Locate the area you want the button to appear and paste the code from the Google +1 Button website into your single.php template file, then hit the UpdateFile button and that's it!

Wrapping Up

I'm sure there are a hundred other great ways of accomplishing this (and yes, there's bound to be lots of great plugins that might work for you as well), but I hope this little tutorial will help anyone out there trying to do this on their own. If you have any ways to improve this (or you have any questions), give me a shout in the comments!