Introduction
A bookmark link on a Web site makes it easy for visitors to add a site to their browser's bookmarks list*. Such a link often appears somewhere on a Web site's home page and automates the process of bookmarking a Web site. A bookmark link can appear on any page within a Web site, though on large sites adding a bookmark link to every page may not be practical. Unfortunately the underlying JavaScript code to create a bookmark link only works in Internet Explorer on PCs; other browsers and the Mac version of IE simply ignore it. Still, since the PC version of Internet Explorer is one of the dominant Web browsers in use, a properly implemented bookmark link can add value to your Web site. Less Web savvy visitors will appreciate the ease with which a Web site, or individual Web pages within a site, can be added to their bookmarks list. In this article I demonstrate how to correctly use the JavaScript code to create a bookmark link for your Web site. I also discuss the problems with using a bookmark script, as well as a few workarounds.
*Internet Explorer refers to bookmarked Web pages as Favorites. Other browsers refer to bookmarked Web pages as Bookmarks. For this article I use the term bookmarks to refer to both.
Getting Started
The link below is a working bookmark link for this Web page. If you click it a window will pop up that lets you add this page to your browser's bookmarks list, provided that you are using Internet Explorer and a PC. Try it.
Here's the JavaScript code used to create the above bookmark link:
Clicking the link activates a JavaScript function called addBookmark1(). A variable named bookmark_url is assigned to the URL of this Web page, and another variable, text_description, is assigned to the description of the page that will appear in the browser's bookmarks list. The window.external.AddFavorite() statement does the actual work of creating the bookmark. The bookmark_url and text_description variables are passed to the window.external.AddFavorite() statement.
A Better Way
As mentioned in the opening paragraph, the main drawback with using this technique is that it only works in Internet Explorer for PCs. If you tried clicking the above bookmark link and you were using any browser other than Internet Explorer on a PC, nothing would happen and you'd be left hanging, so to speak. I once tried clicking a bookmark link on a Web page while using the Firefox browser and an alert message popped up that said "Sorry! Your browser doesn't support this function." Well. The best way to avoid this kind of clumsy and irritating response is to test if the browser is Internet Explorer running on a PC platform, and if it isn't provide information that still let's the non-IE or non-PC user bookmark the page. Try clicking the link below with a non-IE browser:
The bookmark link above uses a recoded script that tests if the browser is Internet Explorer running on a PC. If the browser isn't IE and the platform isn't a PC, a message in the form of an alert box pops up that contains instructions to manually bookmark this page.
Here's the JavaScript code used to create the above new and improved bookmark link:
As mentioned above, the script tests if the browser is Internet Explorer running on a PC. If it is then the bookmark script will run and work fine. If the browser isn't IE and the platform isn't a PC, an alert box pops up with instructions to manually bookmark the page using the appropriate keyboard keys. This method is better than just leaving non-IE and non-PC users hanging and perhaps not knowing what to do. And tapping a couple keys on the keyboard isn't terribly difficult.
NOTE: The above script tests for the browser and platform and not the window.external object because Firefox throws up an error if window.external is used.
No JavaScript, No Problem
What if JavaScript is turned off in the browser? This is a problem since these scripts depend on JavaScript being enabled in the browser. If JavaScript isn't enabled these scripts won't work at all. There is a workaround for JavaScript disabled browsers however. The trick is to write the link in JavaScript AND use the <noscript> tag. Take a look at the sample code below:
This code uses a JavaScript document.write() statement to write the bookmark link and function directly into the body of the Web page. If JavaScript is enabled the bookmark link looks and functions like a typical HTML hyperlink. If JavaScript is disabled the bookmark link disappears, but the HTML code between the <noscript></noscript> tags appears, offering the JavaScript disabled visitor a way to bookmark the page. If you don't want to include the document.write() statement in your page, you can reference an external script that does the actual writing. This is the method I use for the bookmark link at the bottom of this page. Here's the code:
The HTML code that displays if JavaScript is disabled is the same, but a reference has been made in the JavaScript to an external script called write_favs_script.js that writes the bookmark link to the page. Here's the code in write_favs_script.js:
Conclusion
A bookmark link to your Web site makes it easy for visitors to bookmark your site, provided the underlying script takes into account the limitations of the JavaScript AddFavorite method.
Other Web Development Articles By Robert D. Hughes