WordPress: Adding Google +1 Button to Your Posts

Today, Google launched the +1 button for the entire web, which make it easier for users with just one click to recommend contents to their friends in search results, all that with a single click. When you use Google’s +1 button to recommend an article, product or any other content, then the next time people in your social network search they will see your +1′s recommendations in their search results. So, I decided to write an article about how to add Google +1 button to your posts and gives your visitors the ability to recommend your articles in search results.

You can use my newly released plugin, The Easy Google +1 Plugin, for easy addition of the Google +1 Button to your posts or you can learn how to build your own simple plugin by reading my article Creating Your Own Google +1 Plugin.

The Google +1 button can be added to your articles in two steps, the first is to include the Google’s API JavaScript and the second is display the +1 button at the right place in your articles using the +1 tag. Now, start editing your theme to add the +1 button.

Including +1 Button JavaScript API

You can include the +1 button JavaScript API in your theme in either of two ways:

• Adding the <script> tag directly to your header.php theme file.
• Adding it through a new init action function.

To add JavaScript API to your header file directly, first open your header.php file and add the following <script> tag just before the wp_head() function call.

//Your theme header.php file

<script src="https://apis.google.com/js/plusone.js" type="text/javascript"><!--mce:0--></script>

wp_head();

You can also include the +1 button JavaScript API in your theme using the init action, to do that start by first adding the init action to your theme function.php file.

//Your theme function.php file

add_action('init', 'init_plusone');

Next, add the function named init_plusone() which passed as the init action handler.

function init_plusone() {
    //...
}

Finally, include the +1 button JavaScript API using the wp_register_script() and wp_enqueue_script() functions. Do not forget to include both function calls only on pages other than admin pages.

if (!is_admin()) {
    wp_register_script('plusone', 'https://apis.google.com/js/plusone.js');
    wp_enqueue_script('plusone');
}

The wp_register_script() takes two parameters the first is a name to be used when including the registered script and the other is the link to JavaScript file. The wp_enqueue_script() is used to include a script using the registered name.

Display +1 Button in Article

The second step is to include the +1 tag in your article to display the +1 button. You can do that by first picking the right place to add the +1 button into your theme index.php and single.php files and then add the tag. The +1 one tag should be included inside your posts loop.

After opening your index.php file, add the simple +1 one by including the following code (use the same code in your theme single.php file to add the button when the article is displayed single).

<!--?php if (have_posts()) : ?-->
    <!--?php while (have_posts()) : the_post(); ?-->
        //...

        //...
    <!--?php endwhile; ?-->
<!--?php endif; ?-->

This is not enough because you need to make the +1 button recommendation specific for each article not for the whole page, so you will use the href parameter to add the permalink of your article to be recommended using the_permalink WordPress function.

You can also customize your +1 button by using the +1 tag parameters, for example to change the button size use the size parameter which can have one of four values: small, medium, standard and tall. Use the tall parameter which will display the button vertically.

You can hide the count part which displays the number of +1s for that page using the count parameter.

You can also change the language of your +1 buttons, for example to change the language to Arabic you can add the following to your <script> tag.

<script src="https://apis.google.com/js/plusone.js" type="text/javascript"><!--mce:1--></script>

Conclusion

You have learned in this article how to add the new Google +1 button to your WordPress blog articles, for more information about the Google +1 button you can visit Google’s +1 Button API Documentation.
Recommend this article to your social network using Google +1 Button, and other social buttons: