URL Shortening and Tracking in WordPress: Sociable Plug-in
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.
Related posts:Tags: blogging, google analytics, social media, wordpress, wordpress plugin

September 28th, 2009 at 6:27 pm
I used your files posted above, but once I click on any icon it opens a blank page and never gets to the destination (e.g. facebook, twitter.etc.)Any thoughts why?
October 5th, 2009 at 1:20 pm
Michaela, sorry for the belated reply, but what version of the sociable plugin are you using?
October 5th, 2009 at 3:41 pm
Michaela, I think I know what may be causing your problem. The provided bitly.php file has a placeholder in place for the bit.ly API credentials. You need to create an account at bit.ly and acquire a login and API key to replace the placeholders within the code.
March 10th, 2010 at 9:21 pm
I think it’s great post here. This blog provides some more interesting info here and it is also used to web design users. i am really happy being here.
High quality web designer
March 11th, 2010 at 5:33 am
Hi!
I have a little problem with your sociable-bitly-mod-3.5.2, because it doesn’t work in the right way with twitter, when there’s a # in the title of the post.
For example try to twitter this link with the post title Babbel-Net Podcast #30:
http://www.babbel-net.com/podcasts/babbel-net-podcast-30
Is there a chance to fix this without not using a # in the post title?
Greetings and cheers!
Dennis from the Babbel-Net Team
March 11th, 2010 at 9:29 am
@Steve Lunceford – Sorry, the script was modified a bit and the post wasn’t updated to reflect that. I’ve updated it to indicate the difference for 3.5.2 and 3.5.1. The line you should be looking for is:
$link .= ” href=\”".$url.”\” title=\”$description\”>”;
@Dennis – I wasn’t aware of the problem, but I’ll have to poke around a bit and get back to you.
March 11th, 2010 at 8:49 am
Hi there; I’m using Sociable 3.5.2 and nowhere in the PHP file can I find the code to change for the Google Analytics tip. Has it been removed?
[quote]$link .= ” href=\”javascript:window.location=’”.urlencode($url).”‘;\” title=\”$description\”>”;[/quote]
March 11th, 2010 at 10:27 am
@Dennis – upon further inspection, there is a problem. I think I’ve fixed it though. I’ve added code to strip out any unusual characters from the title and excerpt (which includes the # character), so it won’t cause the code to break. Caveat is that it won’t show up in the post once it converts over, so the tweet won’t have the # character in it, but you can always just modify the tweet to add it back in before posting. Please re-download the 3.5.2 mod zip pack. Also, be sure to replace the [BITLY LOGIN] and [BITLY API KEY] with your own (I think in the previous set, I had left in iSynergy’s login and API key, oops).
March 11th, 2010 at 11:12 am
Hi jwong!
Thank you very very much for your help. It works perfectly!
Once again thank you, greetings and all the best to you.
Dennis from the Babbel-Net Team
March 11th, 2010 at 11:51 am
Thanks Jwong – almost got confused there because it there were two nearly identical lines of code in the php file
The first line had periods before/after the “$URL” and the second line didn’t have those dots….
May 27th, 2010 at 5:06 pm
got this error when I uploaded the bit.ly mod:
Fatal error: Cannot redeclare sociable_init_locale() (previously declared in /blog/wp-content/plugins/sociable/sociable.php:48) in /blog/wp-content/plugins/sociable-bitly-mod-3.5.2/sociable.php on line 47
Any idea what i should do?
May 28th, 2010 at 8:22 am
Hello David,
Did you make sure to disable the original sociable plugin in your plugin list? It looks like it’s conflicting with the original sociable plugin that you installed.