chriseverson

One practice that isn’t seen put into action enough in web development today is making the user experience as effortless as possible. A lot of today’s websites will have the typical links to add their site to your del.icio.us bookmarks, or StumbleUpon, furl, whatever social bookmarking site is the current trend, however, what about the typical web user? The everyday person who doesn’t have an account on del.icio.us, and uses the browser bookmarks for all their bookmarking needs? Easy methods of adding browser kept bookmarks are far from available on the websites of today, the end user is getting repeatedly overlooked to give way to one’s peers.

Adding a link to add the website as a browser bookmark is something that is very simple, and needs to be more often practiced. Below I will go into detail explaining the exact methods to use to make as cross-browser compatible of a solution as possible (Safari and Opera in part II). Standard JavaScript practices have been more or less getting ignored now that AJAX and it’s flashy, and very practical ways have been becoming the main use for any JavaScripted based coding, it almost seems like developers are slowly starting to completely overlook the basic uses of good ‘ole JS.

All of the bookmarking events can be handled through a single function using if… else… statements. We’ll start by defining the function.

function bookmarkLink() { }

Once the function is defined we’ll want to start by adding a couple of variables to eliminate the need for the user to enter any additional information once the link is followed. This is achieved by using the DOM object to call the page title and URL.

function bookmarkLink() {
   var title  = document.title;
   var url    = location.href;
}

document.title is the DOM method referring to the title of the page as specified between the <title> tags in your header portion of the HTML. location.href retrieves the exact URL of the current page that the link is on.

function bookmarkLink() {
   var title  = document.title;
   var url    = location.href;

   if (window.external) {   // if IE
      window.external.AddFavorite(url,title);
   } else if (window.sidebar) {    // if Firefox
      window.sidebar.addPanel(title,url,"")
   }
}

The above portion of the script detects the browser and applies the respective method to the link. Both Mozilla and Microsoft have documented the exact workings of the window.external.AddFavorite and window.sidebar.addPanel objects on their developer sites. Those two objects are what feeds the information from the document to browser and prompting the bookmark menu to pop up for verification of the addition.

With that whole bit complete you have the complete function which you’ll want to enclose within a couple of script tags in the header portion of the html. For further information on use of the <script> tag be sure to read the W3C page regarding it’s use. An example of the completed version is below:

<script type="text/javascript">
   function bookmarkLink() {
      var title  = document.title;
      var url    = location.href;

      if (window.external) {   // if IE
         window.external.AddFavorite(url,title);
      } else if (window.sidebar) {    // if Firefox
         window.sidebar.addPanel(title,url,"")
      }
   }
</script>

To include the link in your page, all you have to do is point the <a> tag to the JavaScript function.

<a href="javascript:bookmarkLink()");">Bookmark Us!</a>

And there you have it! You’re on your way to having an ever-so-powerful and user friendly ‘Bookmark Us!’ link. There are quite a few more issues to be addressed regarding this function such as Safari and Opera compatibility as well as how non-compatible browser handle the script when the link is clicked on.