Add Google +1 (plus one) Button to WordPress

Google recently announced the +1 button (check out the video in the sidebar to the right) and already folks are scrambling to add it to their long list of counter buttons above and below blog posts. So now we have Twitter, Facebook, StumbleUpon, Delicious, LinkedIn and Google +1. Super.

I’m no different. I scrambled too. You can see my efforts in the top right of this post (by the title). Go ahead, click it. It wants to be clicked.

Adding +1 to WordPress

We’re going to quickly add this new button to your WordPress blog so your readers can, yet again, get their click on.

Login via FTP or navigate to the Appearances section of your WordPress Dashboard and find the header.php file. Right before the </head> tag add the following:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Go to the +1 button webmaster’s tool and configure the size you want and the URL to +1. Then put the following code (it may look a bit different depending on what size you chose) wherever you want the button to show up. I recommend the sidebar (so readers can +1 your entire site) or to individual posts (so users can +1 your posts):

<g:plusone size="tall" href="http://designpx.com/"></g:plusone>

To put the button in your sidebar, just insert the preceding code into a text widget. To put the button on individual posts you’re going to have to add the preceding code to the body of a post or automatically by adding it to the WordPress Loop.

Adding Google +1 Button to the Thesis Theme

Adding the button is even easier for Thesis theme users. Go to the WordPress dashboard and under the Thesis menu navigate to Site Options > Document Head and enter the following in the Additional Scripts box:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Then open up your custom_functions.php file and add one of the following depending on where you want the button:

//ADD GOOGLE +1 BUTTON TO TOP OF POSTS
function add_google_plus_one() {
	if (is_single()) { ?>
		<div class="google-plus-one"><g:plusone size="medium" href="<?php echo get_permalink(); ?>"></g:plusone></div>
	<?php }
}
add_action('thesis_hook_before_post', 'add_google_plus_one');
//ADD GOOGLE +1 BUTTON TO RIGHT OF HEADLINE
function add_google_plus_one() {
	if (is_single()) { ?>
		<div class="google-plus-one"><g:plusone size="tall" href="<?php echo get_permalink(); ?>"></g:plusone></div>
	<?php }
}
add_action('thesis_hook_before_headline', 'add_google_plus_one');

If you’re putting the button to the right of your headline you’re going to have to add the following CSS to your custom.css file:

.google-plus-one {
	float: right;
	background-color: #f9f9f9;
	border: 1px dotted #ccc;
	padding: 5px;
	margin: 0 0 5px 10px;
}

More Google +1 Resources

• Google +1 Button API — for webmasters and programmers who want to further customize the +1 button.
• Google +1 Button WP Plugin — Otto put together a simple plugin that adds the +1 button to the end of your posts.
• Tracking Google +1 Button Interaction in Google Analytics — Joost de Valk has put together a great short tutorial for tracking +1′s in Google Analytics by adding a simple callback and event tracker script.
• Thesis +1 Guide — here’s a Thesis guide from the DIYthemes blog.

Unfortunately the +1 button only works for people who are logged in to their Google accounts (and, for now, it doesn’t work with Google Apps users). Hopefully this isn’t another Google Wave.

Tagged as: Google, Google Plus

Post Short Link: