Tweaking the Sociable WordPress Plugin

News is that Joost‘s awesome wordpress plugin, Sociable, has been taken over by

I recently installed the plugin on one of my blogs with some of my own tweaks.

Replacing the images is easy enough, I decided to go with the Aquaticus icons. You can find a few lists of social bookmarking icons, here and here. Make sure to edit the CSS so the images show up the right size. I recommend including the sociable CSS in your primary CSS file.

Once I had stylish icons on the blog, I wanted to be able to tell if visitors were using the links. Of course you can track the referring site traffic from social sites easily enough with Google Analytics, but I thought I could do better than that.

I wanted to track clicking on the links as an event, so I could evaluate which services my visitors were most interested in sharing content on.  To do this, I added some javascript and edited the sociable.php file a small amount. I used Erik Vasilick’s best practices to tracking outbound links and the Google Analytics Event Tracking Guide.

The javascript function I added looked like:

<script type="text/javascript">
function trackSociable(url,description) {
try {
pageTracker._trackEvent('social', description, document.location.pathname);
setTimeout('document.location = "' + url + '"', 100);
} catch(err){}

I also edited sociable.php, in the php where the href tag was created for the social bookmarking links.

$link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\" onClick=\"trackSociable('".$url."','$description');return false;\">";

The event is recorded in Google Analytics with these attributes
Action = social
Category = site (Facebook, Myspace, StumbleUpon)
label = article’s relative path

Here’s an example of one of some of the data in Google Analytics:

social analytics

You can also correlate social site clicks with article paths or article paths with social site clicks.   Alternatively you could record the article’s page title by substituting document.title in the javascript function instead of using document.pathname.

Be Sociable, Share!


  1. Adam b. says:

    Damn Tom! Nicely Done!

  2. Thanks Tom. I’d like to track how often the buttons are used too.

    Two questions:
    1 why do you recommend putting the sociable css inside my css?
    2. where do you insert the javascript function you wrote?

    Also, thanks to you, I was able to figure out how to make the default icon display normally, and the hovered images fade (opaque) – the opposite of the default behavior of sociable.

    • tom says:

      Hey Brian,

      As a response to 1), i think it’s just a good practice to keep your CSS together; less file requests when a new visitor hits your site and an easier time later debugging your positioning and style.

      2) For now I’ve just been putting the function above where I insert the JS for Google Analytics. You can probably put this function anywhere, in the head, or in an external JS file if you have one on your site.


  1. […] um artigo falando justamente da integração do Sociable com o Google Analytics neste blog. O autor criou esta função em javascript para mapear os cliques nos botões do Sociable. Você […]

Speak Your Mind