How to add Google +1 to WordPress websites using AddThis

BY digiTech - July 3, 2011
Web Design Austin


As you know, Google has released their own version of the Facebook Like Button, which is going to be a key component in Google’s new social media tools that they are planning to implement. When Google +1 was released two weeks ago I struggled to find a way to implement this new technology into my website. I prefer to use AddThis, a very handy social media tool for sharing your website, so I am going to give you instructions on how to add the Google +1 buttons to WordPress websites using the AddThis plugin. The problem with the AddThis plugin is that at this time, there is not the option for Google +1 in the pre-defined icon sets, and the custom button will not function correctly with most WordPress themes, but there is a work around, here’s how:

 

WordPress Webmasters:

The first thing you want to do click add new plugin under your plugins sidebar on the left hand side. Search for AddThis, and install the correct plugin. Make sure the by line says “By The AddThis Team” to ensure it is not a third party plugin. Install and activate the plug-in, then go into the AddThis settings, and click addtional style options. I prefer to use the pill style facebook/twitter/sharethis buttons below the post only because they are very sleek and attractive looking. If you want to use the same style, your settings should look like this:

 

 

Once you have selected your style click save changes. That is all we need to do with the AddThis plug-in for now, here comes the tricky part… Click editor on the left navigation bar under plugins. In the top right drop down box, choose AddThis, and click select. What we are doing is basically replacing the standard orange AddThis share button which appears to the right of the facebook/tweet with a Google +1 button using PHP.

 

Make sure the file selected on the right side for editing is on addthis/addthis_social_widget.php which should be the top and default selected file. Click in the WYSIWYG editor and do a ctrl+f (Find) and search for ‘fb_tw_sc’ => array Once you find this phrase, you will be at the correct line where you need to change the code. Now, change the following code.

 

Original Code:

[show_shortcode]
‘fb_tw_sc’ => array( ‘src’ => ‘

‘ , ‘img’ => ‘fb-tw-sc.jpg’ , ‘name’ => ‘Like, Tweet, Counter’, ‘above’ => ”, ‘below’ => ‘hidden’
[/show_shortcode]

Change To This:

[show_shortcode]
‘fb_tw_sc’ => array( ‘src’ => ‘

‘ , ‘img’ => ‘fb-tw-sc.jpg’ , ‘name’ => ‘Like, Tweet, Counter’, ‘above’ => ”, ‘below’ => ‘hidden’
[/show_shortcode]

 

As you can see, all we did was replace:

[show_shortcode] [/show_shortcode]

with:

[show_shortcode][/show_shortcode]

Note the medium, and no follow attributes. There are different sizes of the Google plus one button, the medium is the pill style which is the same size as the facebook/twitter buttons which we selected earlier. If you choose to use a different style, other than the pill button style, you can change these attributes to small, or large. If you choose to use a different style of button, you will need to locate the corresponding code in the editor for the style you are going to change. Once you find the correct code for the pre-configured style, you can replace or add this code into that style, which will then appear in your blog when you select that style in the AddThis plug-in settings. Happy sharing!

BY digiTech

Would you like to share your thoughts?

Leave us a comment and we’ll get back to you!