Fadi Hania Blog - Wordpress: Creating Your Own Google +1 Plugin
Posted by Fadi Hania on 13th June 2011

WordPress: Creating Your Own Google +1 Plugin

Lately, Google launched the new social network recommendation button called Google +1 Button. The +1 button can be used by users to recommend contents for their friends in search results. As a blogger, you want to add this new social gadget to your blog to enable your readers to recommend your posts in search results, in other words reach more readers through search results. The easiest way to add Google +1 Button to your posts is to use a plugin, like the Easy Google +1 Plugin launched with article, or to build your own as you will learn by continue reading this article.

If you prefer to add the +1 button directly to your blog theme or to learn more about the button and how to use it, you can read my previous article Adding Google +1 Button to Your Posts.

The +1 button can be added to your posts using either your theme or through a plugin. Adding it directly to your theme is a good idea but unfortunately it will disappear when you try to change your theme. So, adding the button using a plugin guarantee that you will find your button even when changing your theme. The Simple Google +1, you are going to create in this tutorial, will do two jobs, the first is to add the script part of the +1 button to your blog head tag and then display the button in your posts.

Creating Plugin Files

The first step in creating any plugin is creating the PHP files and choosing the plugin name. To create a plugin you need to choose a name for your plugin, and try to choose a unique one. The name of your plugin in this tutorial is Simple Google +1 (you can choose other names if you like).

Each WordPress plugin should have at least one PHP file which will use a name derived from your plugin name, this file will be installed later into your WordPress plugins directory, <your-wwwroot>/wp-content/plugins/. You can create your plugin file into a directory of the same name which will contain all your plugin files if you had more than one file, like PHP, styles or resource files. In this tutorial you will create a directory named simple-google-plusone, with a PHP file inside it with the same name.

Plugin Files Structure

 

Plugin File Headers

After creating your plugin files you must include a standard plugin information header in your plugin’s main PHP file. The header information is actually a simple PHP comment that will be displayed in your plugin description and contains the following information about the plugin:

  • Plugin Name: the name of the plugin which is Simple Google +1 in this tutorial.
  • Plugin URI: your plugin website address, which will be displayed as link.
  • Description: a brief description about your plugin and its functionality.
  • Version: your plugin version number, in this plugin you can use 1.0 as it is the first version.
  • Author: the name of the person who created this plugin, and that means you.
  • Author URI: the address of the author website.
  • License: a description of the license your plugin is distributed under.

The final plugin header will look something like the following:

<?php
/*
Plugin Name: Simple Google +1
Plugin URI: http://fadihania.com/2011/06/wordpress-creating-your-own-google-plusone-plugin
Description: A simple plugin to add the Google +1 Button to your posts. It was created as part of the tutorial WordPress: Creating Your Own Google +1 Plugin.
Author: Fadi Z. Hania
Version: 1.0
Author URI: http://fadihania.com/
License: GPL2
*/
?>

Using WordPress Plugin Hooks

WordPress Plugin Hooks are necessary to create a plugin, it allows your plugin to call specific functions at specific times and events. So each time WordPress runs an event it checks to see if any plugin have registered a function to run at that event and that gives you the ability to modify the default behavior of WordPress. There is two kinds of hooks in WordPress:

  • Actions: are triggered by specific events that take place in WordPress, such as publishing a post, changing themes, or displaying a page of the admin panel. Your plugin can use the Action API to respond to the event by executing a PHP functions.
  • Filters: are hooks that are launched to modify the text and content of various types before adding it to the database or displaying it in the browser. Your plugin can use the Filter API to specify one or more of its PHP functions are executed to modify specific types of text at these times.

Let’s take our Simple Google +1 Plugin as an example, we need to register a function to be executed before WordPress adds the head contents by calling the wp_head() function. That can be done using the “wp_head” action hook which we will use to add the Google +1 button script to the <head> tag. The second thing you need the Simple Google +1 Plugin to do, as we described before, is modifying the content of your posts to add the Google +1 button before or after your posts, which can be done by registering a function to be executed before displaying your posts’ content using the “the_content” filter hook. So, your Simple Google +1 Plugin will use the following two hooks:

  • The wp_head action hook: to add the Google +1 button script to your blog <head> tag.
  • And the_content filter hook: to modify your posts’ content and add the Google +1 button tag to your posts.

Theoretically, you can choose any name for your hook registered functions but in real world you have to choose a unique name so it does not conflict with functions in other plugins. You can do that by either add a prefix to your functions like your plugin name initials or write your functions as a part of class.

Adding +1 Script to <head>

The add_action() function of the Action API is used to register a function to be executed in response to a specific action, and it takes two parameters, the action name and the function both as string.

In your Simple Google +1 Plugin, you can use the name “sgpo_script” for your wp_head registered function. The sgpo prefix is the Simple Google Plus One initials.

add_action('wp_head', 'sgpo_script');

Next you will write your PHP function with the same name you registered for the wp_head action.

function sgpo_script() {
    //...
}

Now add the Google +1 button script to <head> tag by simply using the PHP echo() function. You can change the display language to your preferred language.

echo('<script type="text/javascript" src="https://apis.google.com/js/plusone.js">');
echo('{"lang": "en-US"}');
echo('</script>');

Override Post Content

To register a function to filter the content of your posts, use the add_filter WordPress function which also takes two parameters the filter hook name and your plugin function name. The following code register the sgpo_content function to filter the_content hook and creates the sgpo_content function which have one parameter the $content variable. The $content parameter contains your post content.

add_filter('the_content', 'sgpo_content');
function sgpo_content($content) {
    //...
}

The next step is to add the +1 button tag to your posts’ content by simple PHP dot concatenation and then return the new content. The following code adds the default settings +1 tag to the beginning of your posts. You can easily concatenate it to the end of your posts by starting first by the $content variable.

function sgpo_content($content) {
    $content = '<g:plusone></g:plusone>' . $content;

    return $content;
}

You can change the settings of your +1 button by using the size, count and href attributes. The href will be next replaced by each posts’ permalink.

$content = '<g:plusone size="standard" count="true" href="<your-post-permalink>"></g:plusone>' . $content;

The final step is to include your button inside a <div> tag with a class name that you can use to style your +1 button, and then to add your posts’ permalink as the href attribute of the +1 button. You can get your post permalink using the get_permalink() function that takes the post ID as parameter. The $post variable is one of WordPress global variables you will use to get the current post ID.

global $post;
$content = '<div class="simple_google_plusone">' .
               '<g:plusone size="standard" count="true" href="' . get_permalink($post->id) . '"></g:plusone>' .
           '</div>' . $content;

Easy Google +1 WordPress Free Plugin

This article is the launch of my first public and free WordPress plugin, Easy Google +1 Plugin. It is an easy and fast way to add the new +1 button to your posts and easily configure the size, alignment, language, position of your button. In addition to contextual help explaining all the settings how you can use it. The Easy Google +1 Plugin is an advanced version of the plugin you have already learned how to create in this tutorial.

Easy Google +1 admin menu

 

Easy Google +1 settings

 

Easy Google +1 contextual help

Conclusion

In this tutorial, you have learned how to create your own plugin by first creating the required files, fill your plugin header, register action and filter functions and finally add your Google +1 Button to your posts. Finally, do not forget to recommend and share this article and my new Easy Google +1 Plugin to your social network and if you have any questions or suggestion please get in touch.

Following is the complete Simple Google +1 plugin code and a downloadable .zip version.

<?php
/*
Plugin Name: Simple Google +1
Plugin URI: http://fadihania.com/2011/06/wordpress-creating-your-own-google-plusone-plugin
Description: A simple plugin to add the Google +1 Button to your posts. It was created as part of the tutorial WordPress: Creating Your Own Google +1 Plugin
Author: Fadi Z. Hania
Version: 1.0
Author URI: http://fadihania.com/
*/

add_action('wp_head', 'sgpo_script');
function sgpo_script() {
    echo('<script type="text/javascript" src="https://apis.google.com/js/plusone.js">');
    echo('{"lang": "en-US"}');
    echo('</script>');
}

add_filter('the_content', 'sgpo_content');
function sgpo_content($content) {
    global $post;
    $content =  '<div class="simple_google_plusone">' .
                    '<g:plusone size="standard" count="true" href="' . get_permalink($post->id) . '"></g:plusone>' .
                '</div>' . $content;

    return $content;
}
?>
Be Sociable, Share!