How to add the Google Plus One (+1) Button to WordPress

Google Plus One ButtonGoogle has just announced the availability of the Plus One (+1) button for webmasters. Google +1 is similar to Facebook’s “Like” button. Clicking “+1” on a webpage will share the page publicly with your friends. But where can your friends see this? Unlike Facbook, Google doesn’t have a homepage where you can see all your friends’ activity. Instead, your +1’s will be shown to your friends – in the actual Google Search results. If you click +1 on a news article about Android, the next time your friend searches for “Android” there’s a good chance they’ll see this article, with a little icon beside it indicating you recommend the link.

Obviously, Google +1 is a powerful tool for website owners. By placing a simple button on your website where visitors will click, you can directly influence your search ranking! But how can you add the +1 button to WordPress? There are no plugins or widgets for +1 yet. Instead, I’ll show you how to add the Google +1 button directly to your WordPress site.

The easiest method is to add a new widget to your sidebar, containing the Google +1 code. Simply follow the steps below:

  • Get the button code from Google +1 for Webmasters
  • Log into WordPress, and click Appearance > Widgets.
  • Drag a new Text widget to your sidebar of choice.
  • Copy and paste the full button code into the large text box as shown.
    <!-- 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"></script>
    
    <!-- Place this tag where you want the +1 button to render -->
    <g:plusone></g:plusone>
    
  • Enter a title, such as “Recommend This Page” (optional)
  • Click Save

You’re done! The Google +1 Button has been added to your sidebar as a new widget.

The instructions recommend placing the script tag in the head section, separately to the actual button itself. However, this would involve editing your template, which is a little more complicated and error-prone. I’ve found the button works fine with all the code in one place, as shown above.

Update: Wow, that was quick! There’s already a +1 WordPress Plugin available. This guy’s done a good job, I encourage you to checkout the plugin if you want to integrate +1 into the posts themselves.

I’ve added the +1 button to this website (in the social header) as you can see in the screenshot below. Check it out, click a few +1’s and see if your recommendations start showing up on Google’s search results!

Google Plus One +1 Button on Website
The new Google +1 Button on Making Money With Android