A couple weeks ago I created my own TinyURL-like service called LookLeap. Instead of using a form where users enter URLs, LookLeap uses a bookmarklet. When the user wants a LookLeap tiny url for the page he’s viewing, he clicks my bookmarklet and voilà!

Bookmarklets are JavaScript programs packed into a browser bookmark. Select the bookmarklet, and its program runs. They’re often used to perform some magic on the web page you’re currently viewing. Explorer limits bookmarks to a tiny 508 characters in length, but Firefox gives you room to write an entire application.

My LookLeap bookmarklet is pretty simple. It passes the URL and title of the current web page to lookleap.com. The hard part was coming up with easy instructions for installing this bookmarklet. My rule is that it must be easy enough for my father-in-law to use.

Not a Link

Most bookmarklets are presented to users as hyperlinked text. I found this practice confusing: links are for clicking. So I used a hyperlinked graphic, instead. A little star: star. At 16 pixels square, it fits nicely inline. Cute, eh? Now the user won’t reflexively click on the bookmarklet.

Using a linked image has another benefit. When the user creates a bookmark based on this graphic using Firefox, IE or Safari, the image’s ALT tag text is used as the bookmark’s default title. This makes life much easier on users, who are already burdened with having to try something new. They won’t need to type in a bookmark title if they don’t want to.

So, this is how my bookmarklet link code looks. I replaced my bookmarklet with # for brevity:

<a href="#"><img border=0
src="http://lookleap.com/site/art/star.gif" alt="LookLeap -
convert long web links into short, friendly links"
align="top"></a>

Right-Click, Drag-Drop, How-When?

The next problem is getting your bookmark into your user’s browser. It depends on her browser, her platform, and your instructions. You probably have a few browsers you can use for testing. Here’s what I learned on mine. I divide support into right-click and drag-drop. I explain these below.

  • IE 6 on Win2k and WinXP: right-click only
  • IE 5.2 on Mac 10.2: right-click and drag-drop
  • FF 1.0 on Win2k and Mac 10.2: right-click and drag-drop
  • Safari on Mac 10.2: drag-drop only

By right-click I mean that users can right-click (on Mac: control-click) the link and then select an option from context menu (e.g. Bookmark This Link…) to add the bookmarklet. By drag-drop I mean that users can drag the link up to the browser’s bookmark bar to add the bookmarklet. The trouble with bookmark bars is that they might not be open. On Safari, the user can open/close her bookmark bar using Command-B.

I should note that control-clicking does work on Safari when the bookmarklet is a text link instead of a graphic.

So what is the best way to explain all of this? I gave it a shot on my LookLeap front page; take a look. Del.icio.us is smart about their bookmarklet instructions. They use a client-side JavaScript to identify the user’s browser and then display targeted information. You must login before you can see this in action. However, you can view their JavaScript logic here.

(Thanks to Glenn Fleishman for helping me debug in my old LookLeap instructions.)