WPBeginner» Blog» Tutorials» How to Add the Google +1 Button to your WordPress

How to Add the Google +1 Button to your WordPress

Last updated on June 22nd, 2012 by Editorial Staff

Free WordPress Video Tutorials on YouTube by WPBeginner

How to Add the Google +1 Button to your WordPress

Yesterday, Google announced the launch of their much waited +1 button. This is a huge step towards adding the social aspects to the search results. In this article, we will discuss everything you need to know about Google +1 button including the step by step guide to adding it in your WordPress blog or site.

What is the Google +1 Button?

Google’s +1 button is a huge step toward adding social aspect to search results. It is a similar concept as Facebook Like button except it is for search results. In google’s word, it is your friend’s way of saying “this is pretty cool” or “you should check this out”. In another words, it is a public way of stamping something with your approval, so your friends, contacts, and others on the web find the best results when they search. This +1 button is currently available on English searches for Google.com.

Similar to the Facebook Like Button, Google +1 button will also show faces of your contacts (Gmail, Buzz, and Reader).

Why use Google +1 Button?

While Google has stated that this will not affect search ranking, in the interview with Mashable, Google rep Jim Prosser said this is something that the company is “very interested” in incorporating in some form at some point in the future. It is already true that when you are logged in to Google, you see different results than when you are logged out. We believe that this +1 button will certainly have a significant impact on search results in the near future even if the public announcement is not made. So it is best that you start using it right away and take full advantage of it.

We could only imagine this is something that will be added into the Google Banner ads and potentially in other social networks in the future.

How to Add Google +1 in WordPress

Google has created an official page for publishers which contains numerous sizes however there are some customizations that you may need to make if you are using WordPress. So follow the steps below:

Open your theme’s footer.php file and paste the following code above the closing of your body tag:

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

If you are using a theme framework in which case you will not have the footer.php file, then paste the following code in your functions.php file or custom functions area:

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

Once you have pasted the JavaScript, now open your theme file where you want to add the Google +1 Button. Most likely it will be your single.php file. Before you go ahead with this, there are numerous size options. Below is a reference guide:

Google Plus One Size Display

The code to paste in your template for each size is below. Just copy the one that you like and paste it inside your post’s loop.

//Code to paste for the Tall Button
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>

//Code to paste for the Standard button
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

//Code to paste for the Medium Button
<g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone>

//Code to paste for the Small Button
<g:plusone size="small" href="<?php the_permalink(); ?>"></g:plusone>

If you want to show the button without count, then you can add the parameter count=”false” in the code above. An example of the code should look like this (Note this does not work with the Tall size because it must have the count):

<g:plusone size="small" count="false" href="<?php the_permalink(); ?>"></g:plusone>

Yoast shared a very interesting tip yesterday by showing how you can track Google +1 interaction in Google Analytics. If you want to track the interaction of your Google +1 button, then change the Google +1 code to look like this:

<g:plusone size="tall" callback="plusone_vote"></g:plusone>

And then add the following code in your site’s footer below the script that we added in step 1. Example code should look like this:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript"> 
			function plusone_vote( obj ) {
				_gaq.push(['_trackEvent','plusone',obj.state]);
			}
</script>

We have already added the button on our site. Will you be adding / using it?