Skip to content

URL Shortening and Tracking in WordPress: Sociable Plug-in

  • by

The Sociable WordPress plug-in is a great extension and we use it here at the official iSynergy Webdesign blog, but it’s still missing a few key features.

Tracking

One key feature is the ability to track the data of how many shares are made through sociable. Using Google Analytics, it’s possible to set up event tracking as a means to keep tabs on the data.

To do this, go into the sociable plug-in folder and open the social.php file in a text editor. Go to line 703 or look for the following code (for 3.4.4):

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

or the following (For 3.5.1 and 3.5.2):

$link .= " href=\"".$url."\" title=\"$description\">";

Add the following into the anchor tag:

 onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\"

The code should look like this after (for 3.4.4):

$link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\" onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\">";

Or like this (for 3.5.1 or 3.5.2):

$link .= " href=\"".$url."\" title=\"$description\" onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\">";

And that’s it. As long as you have Google Analytics set up on the page already, it should start tracking events for sociable links.

Note: you can find event tracking in Google Analytics under: Content > Event Tracking

URL Shortening

Another key feature is the ability to use a URL shortener other than awe.sm. The problem with awe.sm is that it’s in beta and it isn’t publicly open to everyone. You have to apply and hope to be accepted in order to use it. URL shorteners are essential to some of the sociable links, such as Twitter, which limit the amount of characters you can use in the share message. So how can we get a URL shortener to work other than using awe.sm?

Well, I’ve found and adapted a way to use a URL shortener by way of bit.ly. I’m basing this off a topic from here. Much the same as that post, it requires modifications to the sociable plug-in. Which essentially means that the con of this modification is that it won’t work if you update the sociable plug-in with another official release in the future. However, it may not be too difficult to get it working again after an update. Just a few copy and pasting here and there. Anyway, the following is how to get it done:

Go into the sociable plug-in folder and look for the sociable.php file. Open it and search for the following line of code:

$sociable_known_sites = Array(

Under that array is a list of all the social sites that sociable supports. From here, you can pick and choose any of the social sites and replace the url string with the following:

'url' => $sociablepluginpath.'bitly.php?url=PERMALINK&title=TITLE&blogname=BLOGNAME&socialsite=[SOCIAL SITE]',

Be sure to replace [SOCIAL SITE] with the name of the social site that is associated with the string.

Now, create a new file called bitly.php in the sociable plug-in folder and paste in the following:

$url = $_GET['url'];
$excerpt = $_GET['excerpt'];
$blogname = $_GET['blogname'];
$title = $_GET['title'];
$sociablesite = $_GET['socialsite'];

// Ondemand function to generate dynamic bit.ly urls
function getBitlyUrl($url) {
    // fill up this 2 lines below with your login and api key
    $bitlylogin = '[BITLY LOGIN]';
    $bitlyapikey= '[BITLY API KEY]';

    // you dont need to change below this line
    $bitlyurl = file_get_contents('http://api.bit.ly/shorten?version=2.0.1&longUrl='.$url.'&login='.$bitlylogin.'&apiKey='.$bitlyapikey);  

    $bitlycontent = json_decode($bitlyurl,true);

    $bitlyerror = $bitlycontent["errorCode"];

    if ($bitlyerror == 0){
        $bitlyurl = $bitlycontent["results"][$url]["shortUrl"];
    }
    else $bitlyurl = $url;

    return $bitlyurl;
}

Be sure to replace [BITLY LOGIN] and [BITLY API KEY] with the appropriate credentials (you can acquire them from bit.ly once you create an account).

Next, below the above code, add in the following:

if ($sociablesite == 'Twitthis') {
	header('Location: http://twitter.com/home?status='.$title.'%20-%20'.getBitlyUrl($url));
	exit;
} elseif ($sociablesite == 'Twitter') {
	header('Location: http://twitter.com/home?status='.$title.'%20-%20'.getBitlyUrl($url));
	exit;
}

Note the following code:

$sociablesite == 'Twitter'

The ‘Twitter’ and ‘Twitthis’ needs to be the same exact word/phrase as the word/phrase that was used to replace [SOCIAL SITE] within the sociable.php file.

If you want to do it for other supported sites, all you have to do is duplicate the elseif statement and replace the $sociablesite variable and the location with the matching url from the sociable.php array.

[UPDATED 02/18/2010]

You can download the completed files here:
3.5.2 – sociable-bitly-mod-3.5.2
3.5.1 – sociable-bitly-mod-3.5.1
3.4.4 – sociable-bitly-mod-3.4.4

The above set of files also includes the modifications from HTML Validation for Sociable WordPress Plug-In.

[END UPDATE]

It contains both the modified sociable.php file (including google tracking) and the completed bitly.php file. It’s also only set up for a few select sites (BarraPunto, email, Facebook, FriendFeed, Identi.ca, Ping.fm, Techmeme, and Twitthis/Twitter). Some of the social sites (Digg, StumbleUpon) don’t work with bit.ly or disallow the use of shortened URLs, so it may not be advisable to set up bit.ly for them. However, the bitly.php file contains all the sites, so, you can set it up to use bit.ly if you want. All you have to do is find the site you want in sociable.php and replace the url string with the modified url string from above.

Important Note: The provided bitly.php has a placeholder for the [BITLY LOGIN] and [BITLY API KEY]. You will need to enter your own credentials for this to work.