How to integrate Google +1 button with AddThis

Earlier in Mach, Google rolled out their own share button - Google +1 button, however the button appearance only limited to search results that's returning from Google.com but not localize search results. Yesterday Google rolled out the new +1 button, in addition a guide of how to implement the button to your web site was also released in Google code site.

I had always been using AddThis as my social media sharing gadget and am happy that they are partner up with Google to support the implementation of the +1 button. At the beginning it looks like the implementation of the +1 button to my blog should be an easy one, however there are a few catches you will need to watch out. If you are seeking to integrate +1 button using addthis service, this is for you.

**Important note** According to addthis service, this new button is not currently support for IE browser, will eventually fully supported in IE8+ and for non support browser, it will show an empty space.

Code that was originally provided by AddThis looks simple and easy, adding the code below should add the new button to your addthis button collection.

<a class="addthis_button_google_plusone"></a>

However once I placed the above code to my blog, I found out the button is not displaying.

A quick Google search let me know that quite a few people are experiencing the same problem and the root cause of the problem is related to the meta generator tag that is not functioning. There is a quick fix you can apply, adding the plusone.js before the top of your page and have it site before the </head> and you will be in good hands

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

From time to time, user may want to customize their button and within the addthis documentation I was not able to find any documentation regarding on customizing the button either.

Google +1 button do allow customization like button size, with or without counter, set language, etc. but how to modified these settings using addthis service?

Next stop, the +1 button API site. Within the API site there are description of the settings that can be applied to +1 button. Common settings like button size, set counter, counter settings (vertical and horizontal positioning) are all described within the site. A quick trail and error allow me to learn that these settings are able to apply to the addthis button settings.

For example if you want to modified the button size to medium and have no counter, simply apply the code below to the addthis button block

<a class='addthis_button_google_plusone' g:plusone:size='medium' g:plusone:count='false'/>

g:plusone is referring to the +1 button in addthis, by appending : with the properties from the API you will get the settings you want.

Above I simply set the button size to medium by using g:plusone:size='medium' & using g:plusone:count='false' to set no counter to my +1 button. give it a try and see how it goes!

Happy Sharing!