Using Custom Social Bookmark Icons With AddThis Analytics

(Note: This code is meant to be put in your Wordpress Template. However, it should be easy to modify it for other uses.)

Awhile back, I tweeted about how I wasn’t a huge fan of the AddThis button and I felt the need for more actionable social sharing buttons. That led to a few conversations with an AddThis representative about how I could still use their JavaScript to help track my custom buttons usage.

So now, with this code, you can use any custom social bookmarklet you like, and still track the button usage.

So first and foremost you will need an AddThis account.

Then you need to add the AddThis javascript to your HTML. I like to put it in the footer so all of my content can load first.

<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>

Next, you will need to add the following javascript, substituting the “YOUR-ACCOUNT-ID” with your AddThis username. I usually put this right above the first link that will be using the AddThis code.

<script type="text/javascript">
addthis_title = '<?=get_the_title($id); ?>';
addthis_url = '<?=get_permalink(); ?>';
addthis_id = 'YOUR-ACCOUNT-ID';
addthis_clickout= true;
</script>

Finally you will need to add the ‘onclick’ javascript to the anchor tag like I do in the example below. The key here is to put the name of the service you wish the button to link to where I have inserted ’stumbleupon’ below. A full list of services can be found on the AddThis custom services page.

<a onclick="return addthis_invoke('stumbleupon', addthis_url, addthis_title, addthis_id);" href="http://www.stumbleupon.com/submit?url=<?=get_permalink(); ?>%26title%3D<?=get_the_title($id); ?>"><img border=0 src="http://cdn.stumble-upon.com/images/160×30_su_blue.gif"></a>

So that is how I am able to track my sharing button usage on my site through AddThis without using the AddThis button.