How to Install the Bit.ly Sidebar on an iPad

So, you’ve got an iPad - and you’re now enjoying browsing the internet from you lap and downloading useless apps that nevertheless make strangers on the bus jealous. The next question really is: how much can I do with this thing that I used to be able to do with my laptop? For me, that’s sharing links, and that means I want the Bit.ly sidebar widget in Safari.

OMG! It’s the Bit.ly sidebar! On an iPad! HaXx0rs!

OK. So, as you can see in the screenshot of my iPad above, I’m already using the Instapaper widget. Both services have a similar install process on a ‘normal’ computer - you go to the site, grab the button and drag it into your browser’s bookmark bar.

Now, Instapaper actually helps you solve that - if you visit the site with an iPad it give you all the steps to set up an Instapaper button. This involves some basic steps: create a bookmark, copy the Javascript code, edit and replace the bookmark’s address with the code and hit save. Voila!

The hardest part is that Bit.ly doesn’t do this, nor could I easily find the Javascript code for the Bit.ly sidebar anywhere. I did however get it, and so created this post so you can all just copy and paste! Follow either of the instructions below and you’ll be good to go.

First Method - Easiest, But Not For Everyone

This is by far the easiest version. All you have to do is make sure Javascripts are enabled on your iPad, add the Bit.ly button the normal way on your computer and sync your Safari bookmarks with your computer’s browser through iTunes. Badabing, badaboom.

Second Method - The Festivus For the Rest of Us

Step One
Go into yout iPad Settings. Click on Safari on the left, and make sure that Javascript is enabled. While you’re there, why not turn on Always Show Bookmarks Bar?

Step Two
Now visit this page on your iPad. Trust me, it will be easier. Hit Add Bookmark and add this blog to the Bookmarks Bar.

Step Three
Now, you’ll want to highlight all of the following code and hit Copy.

javascript:var%20e=document.createElement(’script’);e.setAttribute(’language’,'javascript’);e.setAttribute(’src’,'http://bit.ly/bookmarklet/load.js’);document.body.appendChild(e);void(0);

Step Four
Now, open your bookmarks, got to the Bookmarks Bar, hit Edit and select the bookmark you made of this page. Edit the name to “Bit.ly Sidebar” and delete URL on the next line. Then paste in the code.

Step Five
Save, close the editor and voila! You now have the Bit.ly sidebar on your iPad. Why not celebrate by sharing this post on Twitter through your newly installed sidebar!

For those who find me via such a post, you can find me hanging out as Warlach on Twitter and I hope this was helpful to at least some of you. Enjoy!

3 Comments so far

  1. Kerry on January 31st, 2011

    Your archives section is covering the code for adding bit.ly to iPad can’t copy it from my ipad

  2. Warlach on January 31st, 2011

    Hi Kerry,

    It doesn’t appear to on the normal comp or on my iPad, how very odd.

    Just in case it doesn’t work I’ve copied the code you need to grab in this comment so hopefully you can see it here?

    javascript:var e=document.createElement(’script’);e.setAttribute(’language’,’javascript’);e.setAttribute(’src’,’http://bit.ly/bookmarklet/load.js’);document.body.appendChild(e);void(0);

  3. Brian on July 10th, 2011

    javascript:var e=document.createElement(’script’);e.setAttribute(’language’,’javascript’);e.setAttribute(’src’,’http://bit.ly/bookmarklet/load.js’);document.body.appendChild(e);void(0);

    It’s not working for me. I followed th directions. It’s simply not working. Thoughts?

Leave a reply