Learn how to add Google +1 button to your WordPress blog or website. The Google plus one button lets people recommend your posts on Google search.

Add Google +1 (plus one) Button to WordPress

Written by in Tutorials |

Add Google +1 Button

Click +1 to publicly give something your stamp of approval. Your +1′s can help friends, contacts, and others on the web find the best stuff when they search.

GoogleGoogle +1 Button

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.

Add the JS Before the Closing </head> Tag

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>

Add the +1 Button

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

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.

Enjoy this post? Consider sharing it:

  • http://www.goldsilverdata.com Newage23

    I added plusone as a text widget on the wordpress twentyeleven theme. It works for Firefox, but none of the other major browsers. Any idea why?

    Here is my code in the Text Widget:

    Thanks,
    Newager23

    • http://designpx.com/ Jason Manheim

      There have reports of JS conflicts, etc. but that’s mostly for IE. I went to your site and it appears to work on both Safari and Chrome.