How To Include Google Plus One Button In WordPress Site

Jul 27, 2011

On my blog site, I always want to improve my social engagement with my audience. Since my site is new and is only less than six months old, I want to see how it grows. With the help of wordpress plugins it became easy for web publishers like me to monitor my blog site. On the internet, there’s a great plugin that you can download to see how many of your audience spread the word about your post on a particular social networking site. It can be downloaded from the ShareThis website and it’s called the ShareThis plugin. Unluckily, this plugin does not include Google Plus One button.

ShareThis plugin can be used on almost every blogging site like WordPress, Blogger, Posterous, Typepad etc. You can even use this plugin on any website that you choose. But for ease of integration on my WordPress site, I use the wordpress plugin version of ShareThis. The only problem is that, after downloading and installing this plugin on my website Google Plus One button is not present. You can only find the buttons for facebook, twitter, email and sharethis. Read this the rest of this post to find out how you can include Google Plus One button.

If you will go to the publisher site, you can find the instruction on how to implement the google+1 button. But what will you see is plain HTML that was intended to be manually inserted on your site’s HTML code. I search all over the internet and found nothing that will direct me to my goal. I want to utilize the power of Google+ but not to implement it manually. I want the google plus one button to be included in my ShareThis plugin.

To solve the problem, I compare the codes from the plugin settings with the instruction provided by ShareThis. Luckily it was easy to spot the hint how to include the google plus one button. See picture below.

To go with the flow of the code, I just insert ‘plusone’ on the first text box that contains the facebook, twitter, email and sharethis services. Then, I copy the format of the HTML code that will represent the actual button on my site. All you have to do is to set the class property of the span element to ‘st_sharethis_hcount’. Then I create the necessary HTML code to represent the google plus one button and paste it on the second text box. See example below.

Example:

Facebook button:
<span class=’st_facebook_hcount’ st_title=’<?php the_title(); ?>’ st_url=’<?php the_permalink(); ?>’ displayText=’share’></span>

Google Plus One button:
<span class=’st_sharethis_hcount’ st_title=’<?php the_title(); ?>’ st_url=’<?php the_permalink(); ?>’ displayText=’share’></span>

After modifying the settings, I save the settings by clicking the ‘Update Share This Options’ button on my wordpress dashboard. By the way I use ‘st_plusone_hcount’ because I choose to use ‘Horizontal Count’ style in the ShareThis plugin. If you want to use a different style just make it sure that you will set the correct value of the ‘class’ property of the span HMTL tag.

That’s it, using plugins are really cool. But you have to wait for the plugin author to upgrade it to include the functionality that you want. Yoi ichinichi o!