Google recently releases its Plus One service, and, as usual, dozens of people immediately made WordPress plugins utilizing it. Google Traffic Pop by Tyler Quinn is an excellent example. In this tutorial, I’m going to demonstrate how to make a (very simple) Google +1 plugin for WordPress.

First, you need to create your plugin file (I named mine simple-google-plus-one.php) and place the necessary plugin header code inside it.

1
2
3
4
5
6
7
8
9
<?php
/*
Plugin Name: Simple Google +1 Button
Plugin URI: https://pippinsplugins.commaking-a-simple-google-1-plugin
Description: Adds a Google +1 Button to your posts and pages
Version: 1.0
Author: Pippin Williamson
Author URI: http://184.173.226.218/~pippin
*/

This will make your plugin available to WordPress. Next, we will write a quick function that will load the javascript for the button from Google.

1
2
3
4
function simple_google_plus_one_script() {
	wp_enqueue_script('plusone', 'https://apis.google.com/js/plusone.js');
}
add_action('init', 'simple_google_plus_one_script');

Note the add_action() hook at the bottom. This activates the function (and its contents) when WordPress loads.

And the last part is to write a function that will render the button HTML.

1
2
3
4
5
6
7
function simple_google_plus_one_button($content) {
	if(is_single()) {
		$content .= '<div class="google-plus-one" style="margin: 10px 0;"><g:plusone></g:plusone></div>';
	}
	return $content;
}
add_filter('the_content', 'simple_google_plus_one_button');

I’ve placed the code provided by Google inside of a DIV with a class and an inline style to provide it a little bit of a margin.

Now when you activate the plugin, you will see the Google +1 button rendered at the bottom of your post!

Download the complete plugin below.

Download

Change Log

7-6-11: Adding is_single() conditional so that +1 button only shows up 
on single post pages.

Enjoy!

  1. Wai Phyo Han

    Nice post! I’ve write the google +1 plugin for wordpress for last week. In my plugin, I want to use wp_enqueue_script for plusone.js but cannot use. Because I would like to add additional meta data (languages) in script like that

    {lang: ‘fr’}

    So I use wp_head instead. How do I use wp_enqueue_script with additional meata data?

    Here’s my plugins page
    http://wordpress.org/extend/plugins/google-1-social-button/

    Thanks

    • pippin

      You can probably do it with the wp_localize_script() function. It allows you to pass parameters to your scripts.

  2. Wai Phyo Han

    Thanks. I will try it.

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email