You may have noticed the Google +1 button showing up on your favorite websites and blogs. (e.g. Mashable) This is Google’s response to Facebook’s über popular Like button that appears on just about every website on the planet.

There are a two plugin options for adding it to your WordPress self-hosted blog.

1. Install a Google +1 plug-in (Simple enough)
2. Install the AddThis plugin, which includes Google +1 along with a myriad of other services. (Also simple, free account required)

But if you are looking for a little more control than a plugin can offer you, here’s how to add it by yourself.

Level of difficulty: Easy

Time Needed: Less than 10 minutes

Note: If you use the Thesis framework, do not use this tutorial. Also, if you upgrade your theme you may need to repeat this procedure.

Step 1

From your dashboard, scroll down to the Appearance section and click Editor.

Step 2

From the Theme Editor, select your Header file. (Default theme Twenty Ten shown below, most themes have a similar file.)

Step 3

Find the </head> tag. Insert the code below in the line immediately before </head>
<!– Place this tag in your head or just before your close body tag –><br /> <mce:script _mce_src=”https://apis.google.com/js/plusone.js” type=”text/javascript”></mce:script>

To save, click Update File.

Note: You can acquire this code directly from Google here.

Step 4

This step varies from theme to theme, but for most you will select the Main Index Template to edit next. (Most likely alternative is Comments.)

Step 5

Decide where you’d like to put the Google +1 button. I like to place things like this between the main content and the comments, but you can move it around wherever you’d like and it should work the same.

For Twenty Ten, to place the button between the blog post content and the comments, I pasted the code below just below the <!– #comment –> tag.
<!– Place this tag where you want the +1 button to render –><br /> <g:plusone size=”small”></g:plusone>

Once you’ve done that, click Update File and you are done!

Note: To see all of the size options, visit the Google +1 page for webmasters.

BONUS

Why stop there? Why not add a little McLane Creative Monster Sauce to the thing by including a Facebook Like Button and Twitter Retweet Button? Swap out the code below for Step 5 to get the results above.
<br /> <table width=”260″ border=”0″ align=”left” cellpadding=”10″ cellspacing=”10″> <tr> <td> <div id=”fb-root”></div> <p><mce:script _mce_src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></mce:script><fb:like href=”<?php echo urlencode(get_permalink($post->ID)); ?>” send=”true” width=”220″ show_faces=”false” font=”arial”></fb:like> </td> <p> <td><a href=”<?php echo urlencode(get_permalink($post->ID)); ?>” class=”twitter-share-button” data-count=”horizontal” data-via=”mclanecreative”>Tweet</a><mce:script type=”text/javascript” _mce_src=”http://platform.twitter.com/widgets.js”></mce:script></td> <td><g:plusone size=”small”></g:plusone></td> </tr> </table> <p>

Questions? Leave a comment or head over to the WordPress Help Center and start a topic.

Like this post? Help me out by giving it a Google +1, Retweet, or Like.

Tagged as: Facebook Like, Google +1, Google Plus One, Twitter Retweet, Viral Lift

Tweet