Unobtrusive Add to Favourites

One thing that a lot of people just starting out with creating web pages like to add to their pages is a link that allows their visitors to add that page to their browser's favourites or bookmarks list. It doesn't matter to them that the easiest way for their visitors to do this if they really want to do so is to press the appropriate shortcut key combination for their particular browser (ctrl+D for Internet Explorer, Firefox, Netscape, Mozilla, and Opera 9+, ctrl+T for earlier Opera versions, ctrl-B for Konqueror and so on). These newcomers to creating web pages consider that their page content is so important that they don't want to have their visitors have to remember which key to press to bookmark the page, they prefer to add a link in the page itself that their visitors can use to bookmark the page using a single mouse click instead of pressing two keys together on the keyboard.

The problem is that most of these new web page creators get their code wrong because they either use browser sensing to try to tell which browser it is and therefore which way that the browser supports to do this or they use the wrong test in their supposed feature sensing test and still end up with some web browsers producing errors due to trying to run the wrong code. Even though adding your own "Add to Favourites" link to the page isn't really necessary, the code required to do it properly does give us a good example to look at as to how we should use feature sensing properly since this particular script contains just about all of the different situations that you will need to use in catering for the ways in which different browsers may provide different levels of support for your JavaScript code.

Not all browsers support any method of using JavaScript to add a link to the current page into the favourites/bookmarks list and so we will set up our HTML so that the link that we want people to click on to perform the necessary processing so that it doesn't show up in the page at all unless the browser does support a way for the link to actually work. For the purpose of this example we will have a short paragraph of text immediately above the link so that there is something to display in the page for all browsers.

Copy and save the above content as fav.htm or simply copy the script and div tags into corresponding locations in any web page.

The empty div is where the "link" will be put if the browser supports adding to favourites/bookmarks. You may want to make this a span instead of a div if you want the link to appear inline in your page content.

There are three different groups of browsers that support some form of bookmarking via JavaScript. Internet Explorer, Firefox (and equivalent browsers such as Mozilla and Netscape), and Opera each have their own way of performing this task. As far as I can determine the Safari/Konqueror group of browsers do not provide any way of doing this and so the link will not appear in those browsers.

Copy and save the above content as fav.js.

• Firefox (and similar) browsers use window.sidebar.addPanel() to add the specified page into the bookmarks list that is available from the browser sidebar. Other browsers don't recognize the window.sidebar reference and will therefore skip over this code.
• Internet Explorer uses window.external.AddFavorite() to add the specified page to the Favourites menu. We therefore test for the browser supporting window.external in order to select those browsers that support this method. Most add to favourites scripts don't function correctly because the script uses some other test in place of this one. Performing a browser detection will fail because most browsers will report that they are IE and would therefore try to run this code. Testing for document.all is another common but wrong alternative since a browser need not support document.all in order to support window.external and there are many browsers (such as Opera) that support document.all but which don't support window.external. Note also that some versions of Firefox also support window.external but not window.external.AddFavorite which is why we have placed this test second.
• There in no way to use feature sensing to detect browsers that support the Opera method of adding the specified page to the sidebar and so this in one instance where we have no alternative but to use a test that isn't directly related to the feature we are trying to use. Opera provides the window.opera field specifically to allow testing if the browser is or isn't Opera and so this is the most accurate test that we have available to us in this instance. The particular method used does not work in older versions of Opera and those browsers will display a non-functional link but since most Opera users tend to keep their browser reasonably up to date there is probably no one using those old versions anyway.

This script starts out by testing if the browser is modern enough to support the standard way of interfacing JavaScript with the web page and also checks that there is an HTML element in the page that has an id of 'fav' that the script can update.

Having determined that we can add the link into the page, we now test if the browser supports any of the three methods of adding the current page to the favourites or bookmarks menu. In each case the test that we make is as specific as we can make it in connection with the actual code that we will need to run in order to do the actual add processing.

Since there are fields available within JavaScript that give us access to the address and title of the current page we make use of these fields to load the default values for the favourites/bookmarks entry rather than hard coding the values into the calls. This means that we will be able to attach the same script to multiple web pages without needing to change any of the code while still having the script reference the appropriate values for the current web page.