a

UI design

You are browsing the UI design category.

How to use bookmarklets

Posted on October 11th, 2009 - UI design | 1 Comment

BookmarkletI’ve just added a whole bunch of tweaks to my URL shortening site, Shrten. Some of the changes are visual though some are under the hood making the site easier to use and overall much, much better. But this post isn’t about that; it is instead about bookmarklets and how you can use them on your own site.

On Shrten you can now drag a link into your browsers toolbar and then when clicked it will instantly create you a shorter url for the page you are currently viewing.

This is the first time I’ve ever used a bookmarklet on any of my sites and I have to say that for apps and services such as URL shorteners it works fantastically! So, how can you do it?

It’s quite simple to be honest and consists of just a single link with a tiny bit of JavaScript. Take a look at this:

1
<a href="javascript:void(location.href='http://shrten.com/url/'+location.href)">Shrten</a>

The little snippet above is the exact bit of code I’m using on my site. Basically, when clicked it will redirect the user to http://shrten.com/x where x is the url of the current page the user is viewing. This can be put to all sorts of uses and I definitely recommend that you should take a look at it. It’s easy to implement and even easier to use!