Decrypting Bit.ly Links on Twitter and Not Only

Although URL shorteners are something we can’t live without, there are many times that we would like to know which link is under the cryptic hash string. There are many times that spammers use multiple shortened links to hide their purposes. Yesterday a tweet came into my attention where the user had a spam link hidden under a bit.ly URL.  Personally, I like to know what I will see when I click on a short link. So, I created a bookmarklet that decrypts Bit.ly links using the same API that created them.

Bit.ly provides an excellent API that we can use to shorten our links programmatically. It also provides a method to expand an already shortened link. This is the method we will use to decrypt all bit.ly links on Twitter (it works on any page but it is Twitter that we most use ;) ).

It is nothing special, just 35 lines of code that will transform these small but cryptic links :

to these informative and more attractive to click on links:

The Bookmarklet

Again, nothing special. Just a function that appends a script element on the page to this file.

The book.js file

We need to get all links on the page and if the href value contains “bit.ly”. Then, we assign an id value to all links we found. This id will be used later to assign the correct href value to each link:

var as = document.getElementsByTagName("a");
for(var i=0; i<as.length; i++) {
 var a = as[i];
 if(a.href.indexOf("bit.ly")>=0){
 //set the id based on the hash
 var newid = /bit\.ly\/(.*)/i.exec(a.href);
 if(newid[1]){
 a.id = newid[1];
 getLink(a.href);
 }
 }
}

Next we need to create the function that will call the bit.ly API. Please notice the use of the callback parameter “bb”. This will allow us to handle the API response. Also notice that in my code I use the demo API key which might do the job but it would be better if you used your own key.

This function creates a script element and appends it to the head section of the page. This makes the API call to be executed:

function getLink(theurl,theid){
 var url = "http://api.bit.ly/expand?version=2.0.1&shortUrl="+theurl+"&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07&callback=bb";
 var x = document.createElement('script')
 x.src = url
 document.getElementsByTagName('head')[0].appendChild(x);
}

The next thing to do is to create the “bb” function that will do the trick. We go through the “a” elements on the page and if the href attribute contains “bit.ly” then we swap the link text with the expanded URL we got from bit.ly and we also change the href value:

var bb = function(e){
 var as = document.getElementsByTagName("a");
 for(var i=0; i<as.length; i++) {
 var a = as[i];
 if(a.href.indexOf("bit.ly")>=0){
 if(a.id){
 a.href = e.results[a.id].longUrl;
 a.innerHTML = a.href;
 }
 }
 }
}

That’s it! Now each time you click on the bookmarklet, all bit.ly links will be decrypted. I hope you find this useful as I did.

Popularity: 3%

Related posts:

1. Creating an Unobtrusive Javascript Image Callery Using YUI The Yahoo User Interface (YUI) is a set of utilities...
2. SocialWhale AKA “How Twitter Should Be” I love Twitter. It is one of the most useful...
3. Google Visualizations From A To Z Google has released an API that you can use to...
4. YUI Mac Like Style Desktop When i first saw jQuery desktop i was amazed of...
5. A Jeez.eu implementation of an URL Shortener Two days ago a friend of mine suggested to me...