The Code

Here's a look at some nicely formatted JavaScript that gets the title, URL, and selected text from the current web page at the time the bookmarklet is clicked. It then builds the proper URL for adding a Yahoo! Bookmark and opens it in a new browser window. Keep in mind that this code is nicely formatted so you can see how it operates; the functioning bookmarklet code will be formatted without linebreaks or spaces.

	// Dissected JavaScript bookmarklet for one-click Yahoo! Bookmarks
	
	// Set d to the document object as a shortcut
	var d = document;

	// Set t to the currently selected text, if available
	var t = d.selection?d.selection.createRange( ).text:d.getSelection( );

	// Build the URL that will add a bookmark to Yahoo! Bookmarks
	var url = 'http://e.my.yahoo.com/config/edit_bookmark?';
	url += '.src=bookmarks&';
	url += '.done=http%253a%2F%2Fe.my.yahoo.com/config/set_bookmark&';
	url += '.folder=1&';
	url += '.action=ab&';
	url += '.display=1&';
	url += '.protocol=http%3A%2F%2F&';

	// include the URL of the current page
	url += '.url='+escape(d.location.href)+'&';

	// include the title of the current page
	url += '.name='+escape(d.title)+'&';

	// include any selected text of the current page as a comment
	url += '.comment='+escape(t)+'&';
	url += '.save=+Save+';

	// open a new window to add the bookmark and show the results
	window.open(url,
				'_blank',
				'width=640,height=440,status=yes,resizable=yes,scrollbars=yes');

Take a look at the bold querystring variables in the code. These are the primary elements of the Yahoo! URL we're concerned with. Here's a quick look at what each variable represents:

.done

The URL to display after the action is completed.

.folder

The ID of the folder in which you'd like the bookmark to be included. If you don't have multiple folders, use 1, which is the default.

.url

The URL of the site you're adding as a bookmark.

.name

The name of the site you're adding as a bookmark.

.comment

Some arbitrary text that is associated with the bookmark.

Note also that values for these querystring variables have been escaped for use in a URL—either by hand, as in the case of .done, or with the JavaScript escape( ) function. This ensures that any characters that are illegal in URLs have been converted to their hexadecimal equivalent.

Unfortunately, a bookmarklet is no place for readable code with comments and line breaks. Instead, the code needs to be smashed into its most compact form. Here's a look at the code reformatted for use in a bookmarklet:

javascript:d=document;t=d.selection?d.selection.createRange( ).text:d.
	getSelection( );void(window.open('http://e.my.yahoo.com/config/edit_
	bookmark?.src=bookmarks&&.done=http%253a%2F%2Fe.my.yahoo.com/config/set_
	bookmark&.folder=1&.action=abamp;.display=1&.protocol=http%3A%2F%2F&.
	url='+escape(d.location.href)+'&.name='+escape(d.title)+'&.comment=
	'+escape(t)+'&.save=+Save+','blank','width=640,height=440,status=yes,
	resizable=yes,scrollbars=yes'))

As you can see, it looks similar to the preceding code, but with some important changes. The javascript: at the beginning tells the browser to execute what follows as a bookmarklet rather than a standard bookmark with a URL. Also, the void( ) operator often comes in handy in bookmarklets, because it stops the expression it surrounds from returning a value. In this case, we don't really care what value is returned when the window opens; we just want the window to open, and void( ) does the trick.