shadow

AddThis WordPress Plugin & Google’s +1 Button

110610: AddThis released an update to their plugin today (instantly rendering this post obsolete), but it doesn’t seem to work 100%. I updated 1 blog, but am rolling it back.

I use the AddThis WordPress plugin quite extensively on almost all the WordPress blogs I work on. It gives readers a 1-click button to instantly share content on Facebook, Twitter and 300+ other services.

AddThis added Google’s +1 Button, a social-media type Like button ala Facebook to their WordPress plugin.  I wanted my AddThis toolbox to look like this:

The AddThis WordPress Plugin Result with the Google +1 Button added

The formatting required just a tiny bit of fiddling, for which I had to search, so here’s how I did it all in one post.

It is entirely possible that I missed an easier way to do this – but this hack to format the plugin was found on the AddThis Support Forum.

The downside is that if you upgrade the plugin, these formatting hacks will be undone and you may have to do it again.  So it’s a good idea to update to the latest version of the AddThis WordPress plugin before you start.

Ok, so to get your AddThis toolbox format to look like the above picture, do this:

In the WordPress Admin area go Settings -> AddThis -> Basic

Click on Additional style options to expand that section, and select the Custom / Build your own radio button.

Check the box next to Services to always show: and type this in the box:

facebook_like, google_plusone, tweet

This will give you the Facebook Like button and counter, the Google +1 Button and the Tweet button respectively and in that order (which you can change if you want). The Facebook counter only shows if the post has been liked at least once – but the other 2 will show a number wether or not the page was +1’ed or tweeted.

Next, if you want the AddThis Share Toolbox and counter with all the other services to show (a good idea – not everybody only uses Facebook, Twitter and Google) tick the box next to More.

Save the changes. If you viewed the AddThis widget on your blog now, you will see a red X where the Google +1 Button should be, and a little orange + where the AddThis Sharebox should be – not quite what we’re after.

To fix this, we have to dive into and edit the the AddThis plugin code. Deep breath, don’t panic.

Still in the WordPress Admin area go Plugins -> Editor and from Select Plugins to Edit choose AddThis Social Bookmarking Widget and click Select. The code is brought up in the main window.

I find it easier to copy and paste this code into an app like TextWrangler – because the lines of code are numbered and easier to read, but you just have to find the code on line 313 and which looks like this:

$button .= '<a class="addthis_button_'.strtolower($service).'"></a>';

Then replace the entire line with this code:

if (strtolower($service) == 'google_plusone') {
$button .= '<a class="addthis_button_'.strtolower($service).'" g:plusone:size="medium"></a>';
} else {
$button .= '<a class="addthis_button_'.strtolower($service).'"></a>';
}

It just tells the plugin that when google_plusone is specified, render the Google +1 button (medium size – there is also large, small and upright), otherwise do what normally would have been done had you not added the custom settings explained above.

Now, by default, if you checked the More button I spoke about, you get the funny little + icon instead of the Sharebox with counter like you’d expect. I don’t know if this is the best/correct way of doing it, but while you’re in the code, you may as well change that too.

A little further down in the code, now on code line 331 (after you made the edit above), you will find this line of code:

$button .= '<a class="addthis_button_compact"></a>';

Make a tiny little change so that it looks like this instead, which changes that icon from the small + called compact to the box that says share with a counter, called pill style:

$button .= '<a class="addthis_counter addthis_pill_style"></a>';

Great. If you edited in another program, select all and copy the code, then back in WordPress Admin area select all and paste the code, and/or click the Update File button and you’re golden!

Refresh and you should have the AddThis widget look like mine does below this post.

Also save the plugin file offline, because remember, if you update the AddThis WordPress plugin in future, the new files will overwrite these changes and undo your Google +1 Button and AddThis widget formatting.

The Google +1 Button apparently doesn’t work in older Internet Explorers (I wouldn’t know, I don’t touch the shit) – in which case a blank space is rendered. I’m not sure if this is an AddThis or Google issue, but will either way hopefully be solved in the not-too-distant future.

I hope this post saved you some searching time and gets your blog socialised in no time. You can share some link love by freely testing the Like, +1 and Tweet buttons below 😉

1 Comment

  • 1Earth

    10 June 2011 at 05:13

    Can't help but notice that surfing from an Android phone's standard browser, the Google +1 Button doesn't show either. Surprising.

Post a Comment

%d bloggers like this: