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!

Speak Your Mind