How To Add The Google +1 Button To WordPress

It hasn’t been too long since the release of the new Google +1 button and it seems that everyone has already added it to their website or WordPress blog. In fact, I added the button as soon as it became available to WPExplorer.com to test it out. After adding it to my site I figured I would show you how to create a short function that will automatically add the button to all of your posts. You may want to show other social buttons a long with the plus 1 button, if so, you can easily do so by adding them inside the same function.

Add Google +1 Button To WordPress

Below are 3 easy steps showing you how to create a Google Plus One button function in your theme so it automatically adds the button to all your posts.

Step 1: Include the javascript

The Google Plus 1 button requires that you call the Google +1 API in your HEAD section. To do so, simply paste the following code into your functions.php file:

function google_plus_one_script() { ?>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<?php }
add_action('wp_head', 'google_plus_one_script');

Step 2: Add a function for your button

Next you’ll want to create the function that adds the actual button to your posts. This function will run only on your single posts and it will add the button right before the main loop:

function google_plus_one_button() {
if (is_single()) { ?>
<div id=”plus-one-button”><g:plusone size=”medium”></g:plusone></div>
<?php }
}
add_action(‘loop_start’, ‘google_plus_one_button’);

Step 3: Hook your function to the top or bottom of your post loop

Google +1 WordPress Function Full Code

Below is what your full code should look like that you will be inserting into your functions.php file or custom_functions.php file if you are using a child theme like Thesis.

// add google +1 script to WordPress HEAD
function google_plus_one_script() { ?>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<?php }
add_action('wp_head', 'google_plus_one_script');

// add button function
function google_plus_one_button() {
 if (is_single()) { ?>
 <div id="plus-one-button"><g:plusone size="medium"></g:plusone></div>
 <?php }
 }

// attach function to hook
add_action('loop_start', 'google_plus_one_button');