Javascript Bookmark Function

Posted byBrightlemon Admin on 20 Jan, 2010

By Catheryne Hunte

It is very common to come across a javascript bookmark function that only allows your website visitors to bookmark your site in only one browser e.g. Internet Explorer or Firefox. Getting your bookmark function to work across various browsers is fairly simple. All you have to do is follow these three easy steps:

  1. Create a javascript file using the .js extension (example.js). This should be created within your website. Once you have created you file, include the following code:
    function bookmark(title,url){ 
    
    if (window.sidebar) // firefox 
    window.sidebar.addPanel(title, url, "http:www.yourwebsiteurl.com"); 
    
    else if(window.opera && window.print){ // opera 
    var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); 
    elem.setAttribute('rel','sidebar'); 
    elem.click(); 
    } 
    else if(document.all)// ie 
    window.external.AddFavorite(url, title); 
    }

    The above code ensures that your users can create a bookmark using Firefox, Internet Explorer and Opera web browsers. Don’t forget to input your websites name in the window.sidebar.addPanel(title, url, “http:www.yourwebsiteurl.com”);. You can also create a folder to put your newly created .js file in and any other .js files, if you do not have one already.

  2. Next, you will need to link to the javascript file that you have just created to your pages. You can do this by including the following line of code in the top part of your .html, .tpl or .php file above the /head tag. Note: Be sure to include the code between ‘script’ and ‘/script’ tags.
    script type="text/javascript" xsrc="foldername/filename.js" mce_src="foldername/filename.js" >/script

    Make sure that you put the right ‘folder name’ and ‘file name’ into the line of code. The ‘folder name’ is for the folder you have created to put your .js file in.

  3. Finally, you will need to call the bookmark function. This can be done by including the following code within the same file where you linked to the .js file: Note: Be sure to put this code within the body of your page between the body and /body tags. Include the code in ‘p’ and ‘/p’ plus ‘a href ‘and ‘/a’ tags.
    a xhref="javascript:void(0);" mce_href="javascript:void(0);" onclick="javascript:bookmark('yoursitename', 'http://www.yoursiteurl.com');">Bookmark this page!/a

    The above code creates a link with the text ‘Bookmark this page!’.

Remember to put in the name/title and URL of your website. When your website visitors click on your bookmark link they should see a new window allowing them to bookmark your page. It’s that simple!!

BrightLemon