JavaScript – Bookmark web page

Feeds:: Posts; Comments

JavaScript – Bookmark web page

March 22, 2008 by Prashant Pandey

Introduction
Hi, this article will give you how to add a script which will add the site to your browser’s favorite’s (IE) or to bookmark’s (Firefox) on click on any element in HTML like hyperlink, button etc. So let’s take a look.

What is bookmark in browsers?
Bookmark, is a feature provided by all the latest browsers. Using this feature you can add any site to the bookmark list, so that later if you need to visit that site then you can easily retrieve it from your bookmark list and visit the site. This feature is useful because mostly people visits many sites while searching for something and it’s not possible to remember the name of all the sites, at that time this feature works as your “URL remember machine”. You can add all the names in your list and visit them whenever you want.
In Microsoft Internet Explorer we call this feature as Favorites (Add to Favorites) like below,

And except IE in all other browsers like in firefox it is called as Bookmarks (Bookmark this page) like below.

Shortcut of adding any site which you are visiting to your favorites is Ctrl+D in all browsers.

Code to implement bookmarking in our website
As we know that we can add sites to our bookmark list using Ctrl+D or using the menu’s given in browser itself. But to attract users or just providing a facility we can also implement the same facility in our webpage’s on the click of a link or button using a little code of JavaScript. We’ll provide the link to the user something like below,

When user click on this bookmark link then the same dialog will open which open when we press Ctrl+D keys, like following,

So, to provide this the code of JavaScript and the HTML code is as follows,

JavaScript Function:

function addbookmark()
{
if ( navigator.appName != ‘Microsoft Internet Explorer’ )
    {
window.sidebar.addPanel(”TechAhead Blog”,” http://techahead.wordpress.com/”,”");
    }
    else
    {
window.external.AddFavorite(”http://techahead.wordpress.com/”,” TechAhead Blog “);
    }
}

HTML hyperlink code:

<a href=”javascript:void(addbookmark());”>
Bookmark
</a>

If you want to use the button instead of link then you can use that in the same way onclick event of the button.

So the whole code will look something like below:

<html>

<head>

<title>Bookmark Script</title>

function addbookmark()

{

if ( navigator.appName != ‘Microsoft Internet Explorer’ )

{

window.sidebar.addPanel(”TechAhead Blog”,” http://techahead.wordpress.com/”,”");

}

else

{

window.external.AddFavorite(”http://techahead.wordpress.com/”,” TechAhead Blog “);

}

</script>

</head>

<body>

<a href=”javascript:void(addbookmark());”>
Bookmark
</a>

</body>

</html>

I have this script but I am also facing a problem with this script, actually on net if you’ll search for the scripts then they are very large and complex to use and understand, the above script is easy, simple and short, but the problem is its not working in Safari browser, its working fine in IE and Firefox but not in Safari, So guys please let me know if anyone can give me simple easy script which work in all browsers.
Hope this will help you guys,

Give your comments.
Thanks

Reference : Prashant Pandey (TechAhead)

*******

Posted in JavaScript | 6 Comments

6 Responses

on March 22, 2008 at 9:36 pm | Reply Ravi Raghav

Prashant, Really your tutorials are helping newbies alot, Please go ahead and write a complete series on it
on March 30, 2008 at 8:43 am | Reply eWreckers

Bookmarking 101 tutorials. Good stuff. We all need help with this.
on June 17, 2008 at 1:04 pm | Reply emodri

Thanks for this script.
on September 24, 2008 at 1:29 pm | Reply Rahul Hanchate

it is helpfull but i want more info regarding
once user bookmarks my web page and comes back again to visit the same page he should not allowed to bookmark the same page again i want to use javascript
on November 5, 2008 at 8:23 am | Reply vamsy

I am not convencied with u r scripting
on June 3, 2009 at 1:03 pm | Reply neha

will you let me know how can we call a stored procedure in function of javascript