Add a Yahoo! Bookmark with One Click





Add a Yahoo! Bookmark with One Click

Speed up the process of adding sites to your Yahoo! Bookmarks with a browser bookmark and a bit of JavaScript.

Yahoo! Bookmarks are an easy way to share a list of web sites across several computers. If you have a set of sites you like to visit from home, the office, a friend's house, or any other place you might find yourself in front of a computer, they'll always be just a few clicks away at your Yahoo! account, instead of trapped inside your browser at home.

Unfortunately, setting up this list of sites for the first time can be time-consuming. After logging into My Yahoo!, you must find your bookmarks (usually in the upper-right corner); click Add; copy and paste the site URL, name, and any comments into the form; and click the Save button. This might not sound too labor intensive, but it amounts to quite a few steps if you're adding more than a few sites.

If you've installed the Yahoo! Toolbar, you might have already experienced the joy of one-click Yahoo! Bookmarks. On any web page, you can click the Add Bookmark button to add a site. From then on, the site will be available at your Yahoo! Bookmarks. If you don't want to install the Yahoo! Toolbar (to save browser real estate) but still want the convenience of adding bookmarks, you can build your own JavaScript bookmarklet and add it to your browser's bookmarks toolbar to get the same one-click effect.

The Magic of Bookmarklets

A bookmarklet is a bit of JavaScript code stored in a web browser bookmark. Bookmarklets give you a way to run code that can interact with the current page in the browser. For example, bookmarklets can change the size and colors of fonts on a page, open new browser windows, or extract information about the current page. With bookmarklets, you're in control of the script, because it runs when you click the bookmark.

In order to implement this hack, the only thing you'll need is a browser that has bookmarks and understands JavaScript. Don't worry, that covers just about every web browser!

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 URLeither 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.

Running the Hack

The installation process for the bookmarklet will be unique to the browser you'd like to use it with. If you know how to create and edit a bookmark, you know how to install a bookmarklet. Simply create a new bookmark and add the code in place of a URL. Some browsers will warn you that javascript: is not a valid protocol, but you can ignore that message. You'll also want to give your bookmarklet a snappy, short name, such as Add Y!Bookmark, as shown in the links bar in Figure.

Once the bookmark is in place, browse to any page, highlight some text on the page, and click away! Once you click, a new window will let you know the bookmark has been added to your list, as shown in Figure.

From here, you can edit the newly added bookmark by clicking on the pencil icon. Simply close the window when you're finished.

Yahoo! removes any apostrophes from Bookmark Comments, so you'll have to put up with misspellings here and there, especially if you're adding text that was highlighted on a web page.


The Add Y!Bookmark bookmarklet in the browser toolbar


The new bookmark added to Yahoo! Bookmarks


The best part of keeping your bookmarks at Yahoo! is that the next time people are gathered around someone else's laptop trying to remember the location of some cool site you visited last week, you can save the day by saying, "I have that site bookmarked at Yahoo!"



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows