preload image preload image preload image preload image preload image preload image preload image preload image preload image
The Official iSynergy Webdesign Blog

short url: http://isynergy.net/s/5

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.


Share:

Share on LinkedIn     

Tags: , , , ,


14 Responses to “URL Shortening and Tracking in WordPress: Sociable Plug-in”

  1. Michaela Says:

    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?

  2. Jack Says:

    Michaela, sorry for the belated reply, but what version of the sociable plugin are you using?

  3. Jack Says:

    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.

  4. Sheenashirley Says:

    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

  5. Dennis Says:

    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

  6. Jack Says:

    @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.

  7. Steve Lunceford Says:

    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]

  8. Jack Says:

    @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).

  9. Dennis Says:

    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

  10. Steve Lunceford Says:

    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….

  11. David Says:

    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?

  12. Jack Says:

    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.

  13. Nicole Says:

    Hi Jack,

    Thanks for these instructions. This will be a perfect solution for my client, but at the moment Im getting the same blank page as Michaela mentioned in the first comment. Im using 3.5.2. Should I deactivate the original Sociable plugin and download the mod you linked to here? I made sure my bitly login name and api key were included. Does the password need to be in there anywhere? Thanks for your help!

  14. Jack Says:

    Hello Nicole,

    I would suggest trying to download the 3.5.2 that is provided here to replace the current sociable plugin you have right now (back it up first, of course). When you download the provided 3.5.2 that is provided here, be sure to change the bit.ly credentials in the bitly.php file. That’s the only thing you would need to change, no password needed anywhere.

    Let me know if you still encounter problems.

css.php