atom thoughts

Bookmarklets allow you to add some advanced functionality into a web browser bookmark using just standard Javascript. Many sites, such as del.icio.us are using them to allow users to post information about pages they are viewing back to the site. The Gift Hat Bookmarklet does the same sort of thing by allowing users to post back gifts to their Gift Hat while they are browsing the web.

Today, I am going to walk you through the technique of creating a bookmarklet so you can provide this great functionality to your users.

There are really two parts to a well-designed bookmarklet:

1. The bookmark
2. The bookmarklet.

The bookmark

The bookmark is the part that the user will actually add as either their favorite or bookmark within their browser. The only purpose of this piece is to dynamically load the bookmarklet into the currently viewed webpage. So let’s dive right into the code:

var x = document.getElementsByTagName('head').item(0);
var o = document.createElement('script');
if (typeof o != 'object') o = document.standardCreateElement('script');
o.setAttribute('src', 'http://gifthat.com/javascripts/bookmarklet.js');
o.setAttribute('type','text/javascript');
x.appendChild(o);

This code will basically just insert a new javascript tag into the header of the current page and set the src of that javascript to the bookmarklet.js we specified. You will of course want to replace the http://gifthat.com/javascripts/bookmarklet.js with a link to your bookmarklet.

To make this bookmarkable, we need to make a few more changes to the code above:

• remove all line feeds
• add javascript: to the front of it
• add void(0); to the end of it to prevent it from displaying the result of the x.appendChild(o) statement;

The end result is this (NOTE: I added newlines to make it more readable but this should all be on one line):

javascript:var x = document.getElementsByTagName('head').item(0);
var o = document.createElement('script');
if (typeof o != 'object')
  o = document.standardCreateElement('script');
o.setAttribute('src', 'http://localhost:3000/javascripts/bookmarklet.js');
o.setAttribute('type','text/javascript');
x.appendChild(o);
void(0);

Just add that line in as a bookmark in your browser and you should be all set with your bookmark.

The bookmarklet

The bookmarklet is the portion that will be dynamically inserted and executed within the page the user is currently browsing. By keeping this code in a remote javascript file, you have the added benefit of easily upgrading all of your users to whatever bookmarklet changes you make in the future. You could in theory skip this step and just stick everything in the bookmark, but that would not be nearly as flexible.

To create your bookmarklet, you just need to create a javascript file somewhere on a publicly viewable webserver. I put mine in http://gifthat.com/javascripts/bookmarklet.js (Note: this will be up once I release the next version of the Gift Hat).

Then you can just put your Javascript code into your bookmarklet and it will be executed as if it were always a part of the page the user is browsing. One of the more common types of bookmarklets are as follows:

location.href='http://gifthat.com/gift/post?url=' +
encodeURIComponent(location.href) + '&name=' + encodeURIComponent(document.title)

This will redirect the browser to a page and pass along the current webpage’s URL and title.

There are almost limitless possibilities of what you can do in a bookmarklet.

Happy Bookmarkleting!

References: Much of the bookmarklet code was adapted from this post