Bookmark Tutorial

Adding Bookmarking Functionality

In Internet Explorer browsers, you can add a feature to add a bookmark (shortcut to your site) to the user's "Favorites" menu by clicking a link. A box will pop up asking where you want this bookmark to be. The IE-specific Javascript syntax for this is:

window.external.AddFavorite( PageURL , BookmarkText );

PageURL The URL of the site you want the user to bookmark.
BookmarkText The text that appears in the Favorites menu for that bookmark. This parameter is actually optional, but if it is left out, the URL is used as the bookmark text. I think "ScriptAsylum" looks better in a Favorites menu than "http://scriptasylum.com", don't you?

In other browsers however, this method does not work; but usually pressing Ctrl+D adds a bookmark to your bookmarks list. So, it would be nice to add a little code to tell the user to add the bookmark in another way if they aren't using IE. Since you have to add more code, it looks "cleaner" to create a function to handle bookmarking instead. We'll call this function setBookmark(). The function can now be designed to accept the URL and bookmark text parameters to make the function modular. Here is the full function which you can copy and paste directly into your page:

function setBookmark(url,str){
if(str=='')str=url;
if (document.all)window.external.AddFavorite(url,str);
else alert('Press CTRL and D to add a bookmark to:\n"'+url+'".');
}

The two parameters for the setBookmark( url , str ) function are:

url- The URL to store. Example: "http://scriptasylum.com".
str- The text string that will be displayed in IE's Favorites menu. If this is an empty string ( '' ), then the bookmark will be stored using the URL string. This only applies to IE; other browsers requiring the Ctrl+D keystrokes always use the URL as the bookmark text.

This function tests if the user is using IE. If so, it will use the add-to-Favorites method. If not, it prompts you to add the bookmark by pressing Ctrl+D while displaying the URL.

Here are some examples on how to use this function:

Use absolute URLs if you know the exact page you want the user to bookmark:
setBookmark( 'http://scriptasylum.com' , 'ScriptAsylum' );
This will bookmark whatever page the user happens to be on:
setBookmark( self.location.href , 'Current Page' );
If the bookmark link resides in a frame or within an iframe (or ilayer) element, this will bookmark the page that contains the page the bookmark link resides on; otherwise the user will go directly to the specific frame/iframe/ilayer source page instead of the layout you want.
setBookmark( parent.location.href , 'Current Page' );
You can have the script use the document's title as the bookmark title and the current URL as the bookmark URL:
setBookmark( self.location.href , document.title );
If the Bookmark text is an empty string, the script will use the URL as the name to store the bookmark:
setBookmark( 'http://scriptasylum.com' , '' );

These functions can be called like any other javascript function;

Directly by javascript. The add-to-Favorites box can be invoked as the user enters/exits the page (not recommended due to "irritation factor"), or by some arbitrary event such as a timer, etc.
In a javascript: pseudo-URL, like this:
<a href="javascript:setBookmark( self.location.href , document.title )">Link Text</a>
In a form button like this:
<input type="button" value="Button Text" onclick="setBookmark( self.location.href , document.title )">

For more information on this and similar topics, head over to the Microsoft MSDN Library website.