Learn to code: make your own Bitly interface in two minutes

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!

Background

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:

1. Open a new Google Spreadsheet. (details here if you've never done that)
2. In cell D8, type 'Enter Your URL Here:'
3. 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)
4. In cell D10, type 'Your Shortened Bitly URL:'
5. In cell E10, copy & paste this: =IF(ISTEXT(D25), IMPORTDATA(D25), "")
6. In cell D18, type 'Bitly Account'
7. In cell E18, copy & paste this: bitlyexample
8. In cell D19, type 'API Key'
9. In cell E19, copy & paste this: R_8b726077f3d5c6029700c29e529395d3
10. 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:

http://api.bit.ly/shorten?version=2.0.1&login=bitlyexample&apiKey=R_8b726077f3d5c6029700c29e529395d3&format=text&longUrl=http://www.twitter.com/danbarker

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!

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.