In this blog post, you will learn to code your own bitly user interface in just two minutes. (caveat: this depends on how fast you can copy/paste!).
The post contains ten steps to build your own bitly interface, a ready-made example, a simple explanation of how it all works!
Bitly recently changed their web-based URL shortening interface to help turn the service into more of a ‘social bookmarking’ tool.
I’m a really big fan of bitly, to the extent that it tells me I’ve shortened 1,728 links through the website itself. But I’m not enjoying the actual ‘shortening’ part of the new interface.
To get around that quickly I put together a very quick, simple Google Spreadsheet bitly interface. Here’s a screengrab:
That’s just a screengrab but, in the tool itself, any URL I enter into the first box is then instantly shortened in the second.
I thought it would be useful to put together this simple tutorial of how to do that. Firstly as it’s fairly useful, secondly as it’s a nice simple introduction to Google Spreadsheets & APIs. So here we are: DIY instructions, plus a simple ‘copy this spreadsheet’ example for anyone ultra-lazy.
10 steps to your own Bitly interface:
Here are the 10 steps to follow to make your own Google Spreadsheet interface for shortening URLs via bitly:
- Open a new Google Spreadsheet. (details here if you’ve never done that)
- In cell D8, type ‘Enter Your URL Here:‘
- In cell E8, type ‘http://www.twitter.com/danbarker‘ (this is an example URL, you’ll see it shortened by magic once you get to step 10)
- In cell D10, type ‘Your Shortened Bitly URL:‘
- In cell E10, copy & paste this: =IF(ISTEXT(D25), IMPORTDATA(D25), “”)
- In cell D18, type ‘Bitly Account‘
- In cell E18, copy & paste this: bitlyexample
- In cell D19, type ‘API Key‘
- In cell E19, copy & paste this: R_8b726077f3d5c6029700c29e529395d3
- In cell D25, copy & paste this: =IF(ISTEXT(E8),CONCATENATE(“http://api.bit.ly/shorten?version=2.0.1&login=”, E18, “&apiKey=”, E19, “&format=text&longUrl=”, E8), 0)
That’s it. Change the text in ‘E8’ (the bit from step three where I sneakily self-promoted my own twitter URL) to any other website address, and it will instantly be shortened in cell E10.
What you should see
If your copy & pasting skills are up to scratch, you should then see something a little like this in your google spreadsheet:
I’ve added some colours there to denote the 3 sections. The top purple area is the actual interface. The middle (blue) area is simply the bitly account I’ve set up for this example, and the API key that goes along with that. The third (pink) area is the actual bitly API call itself
Here’s are some notes on that (in gaudy colours) in case the above isn’t clear:
If you’re wondering what “the API call” bit is about, you can give it a go here:
If you paste that into a browser, you’ll see it gives you a bitly URL in return. That’s all we’re really doing here – building up that URL, running it, and displaying the bitly URL it gives us in return.
Full example spreadsheet
If you have a Google account, clicking this link should prompt you to make a copy of a full example spreadsheet of the above.
Style it however you want; use your own Bitly account username & API key instead of the demo examples above. (you can get an API key here if you’re logged in to bitly: https://bitly.com/a/your_api_key/).
How this works: step by step
To explain how this all works, here are the 10 steps we covered above, complete with an explanation about what’s happening at each stage:
That’s it! Feel free to add any thoughts or comments below, or to harangue me on twitter (@danbarker) if you didn’t find this useful or I didn’t explain anything well enough.
And do share the post with others if you think they’d find it useful too.