Home > javascript, jquery > Javascript / Jquery Bookmark script

Javascript / Jquery Bookmark script


Ever needed to add a button or link to your site which allows the user to save your site to their bookmarks/favorites ?

Here’s just the script for you. Using jquery, it works in Firefox 2+(tested), IE 6 (not tested), IE7(tested) and Opera 7+ (not tested). Unfortunately not all browsers support the action, so a generic “alert” has been added to inform the user.

You can download the full script here and follow along if you’d like a further explanation of the code involved. A demo can be viewed here.

bookmark.js

The script itself is really very basic. Firstly what needs to happen is on page load, the script checks to see if the user is browsing the site with Opera. If so, we set the rel attribute of all our bookmark anchor tags (class=”jqbookmark”) to “sidebar” – this is a standard Opera technique for creating this type of link.

Next we add an event listener which will execute whenever an anchor tag of class “jqbookmark” is clicked. Simply put, it checks to see which browser is being used and executes the necessary code.

The nice thing here though is that you can set the script to bookmark any url with any title by specifying the href and title attributes respectively.

$(document).ready(function(){
	// add a "rel" attrib if Opera 7+
	if(window.opera) {
		if ($("a.jqbookmark").attr("rel") != ""){ // don't overwrite the rel attrib if already set
			$("a.jqbookmark").attr("rel","sidebar");
		}
	}

	$("a.jqbookmark").click(function(event){
		event.preventDefault(); // prevent the anchor tag from sending the user off to the link
		var url = this.href;
		var title = this.title;

		if (window.sidebar) { // Mozilla Firefox Bookmark
			window.sidebar.addPanel(title, url,"");
		} else if( window.external ) { // IE Favorite
			window.external.AddFavorite( url, title);
		} else if(window.opera) { // Opera 7+
			return false; // do nothing - the rel="sidebar" should do the trick
		} else { // for Safari, Konq etc - browsers who do not support bookmarking scripts (that i could find anyway)
			 alert('Unfortunately, this browser does not support the requested action,'
			 + ' please bookmark this page manually.');
		}

	});
});

Demo.html

The html is straightforward. We include our two scripts (jquery and jqbookmark) and we add our links to the page. As mentioned above – the links need to have a class attribute with the value of “jqbookmark”, all other links will be ignored by the script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- include our jquery scripts -->
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/jqbookmark.js" type="text/javascript"></script>
</head>
<body>
<div>
<ul>
	<li><a href="http://www.google.com" title="Google.com" class="jqbookmark">Google bookmark</a></li>
	<li><a href="http://www.yahoo.com" title="Yahoo search engine" class="jqbookmark">Yahoo bookmark</a></li>
	<li><a href="https://calisza.wordpress.com" title="A wonderful Blog" class="jqbookmark">Blog bookmark</a></li>
	<li><a href="http://www.microsoft.com" title="Microsoft">Will not be bookmarked</a></ul>
</div>
</body>
</html>

I’d love to know if this functionality could be expanded to include Safari, but so far my good friend google has come up with nothing. At the very least, I hope that someone can find this script useful.

Advertisements
  1. Althalos
    November 14, 2008 at 8:59 pm

    I found it very useful. Thanks a lot! =)

    • calisza
      December 11, 2008 at 12:03 pm

      You’re very welcome – glad someone found some use for it ๐Ÿ™‚

  2. GB
    January 22, 2009 at 6:37 pm

    Great! Much better than the IE-centric approach my company had been using before I came on…

  3. January 22, 2009 at 6:43 pm

    Hi GB,

    Thanks for the comment, unless Microsoft really pull something out of the hat soon my money’s on IE becoming a bad memory. We can dream can’t we ? ๐Ÿ™‚

  4. Matt
    January 23, 2009 at 7:10 am

    First off…thanks for putting in the work on this script, I have been looking for something like this forever. I didn’t think it would be so hard to find this.

    However, I am having some difficulties. Everything runs smoothly in ff in terms of saving the bookmark (windows and osx). However, when I attempt to open the bookmark, it opens in the left sidebar bookmark manager section. Even if that is closed and I open the bookmark through the main menu, it opens the left sidebar and shows the page in there. Bizarre. Do you have any ideas as to a solution or reason this is happening?

    Also, it is not working in IE7 for me. I don’t really know what else to say to attempt to help you in troubleshooting the ie issue, just nothing happens when I click the link.

    Any help/tips/suggestions/resources would be much appreciated.

    Thanks!

  5. January 23, 2009 at 7:39 am

    Hi Matt,

    Firstly, thanks for the feedback, it’s always great to hear that someone’s actually using something I’ve created ๐Ÿ™‚

    Ok, the sidebar issue – unfortunately, and this is only as far as I know, the Bookmark/Favorite functionality in FF can only be accessed through the window.sidebar element – i.e. we actually have to add the bookmark to FF’s sidebar…making it a pseudo bookmark really. I’ve looked around quite a bit on the subject and cannot find any documentation saying otherwise, so if you find something to the contrary I’d love to know about it.

    Next, IE7 – it seems to be working as expected on my personal PC, but I’ll definitely try it out on some other setups and see if I can find out what’s causing the issue. I take it there’s no JS errors being reported ? Not that IE does a great job of telling us what the cause of the error is mind you.

    If of course I do find the issue I’ll post the solution here and notify you directly.

  6. January 29, 2009 at 6:25 pm

    Great script. However, when I added this to the site I’m working on, it asks me twice if I want to bookmark the page. Any one else had this issue?

  7. January 29, 2009 at 6:27 pm

    ok, I get it… it was my ID-10-T error.

  8. January 29, 2009 at 6:35 pm

    Here’s a suggestion for the script. Change the message for unsupported browsers to read like the following:

    “Unfortunately, this browser does not support the requested action, try pressing CTRL+D to bookmark this page manually.”

    Nothing happend in Chrome, Sarfari is the only browser (I have installed) that triggers this response, and all of the browsers, except for MSIE 6, support pressing CTRL+D to book mark the page manually.

    Did I mention how awesome this little script really is?

    • January 30, 2009 at 8:10 am

      Thanks for the suggestion Marion, will update the script asap.

      Being a Mac fanboy I haven’t even installed Chrome yet, but I’ll see if I can find a useable solution.

      Thanks again for the feedback.

  9. James
    May 22, 2009 at 2:34 am

    This script seems to crash ie8 when you click on the link. Has anyone else experienced this?

    • May 24, 2009 at 7:11 pm

      H James,

      Thanks for the headsup. I haven’t had a chance yet to test the script in IE8. Will see what I can scrounge up to fix the problem.

  10. Robert
    June 4, 2009 at 4:16 pm

    Thanks for the handy script – two bug fixes for Opera:


    04: if ($("a.jqbookmark").attr("rel") == "")

    19: return true;

    (tested okay with Opera 9.6)

    • June 5, 2009 at 7:51 am

      Hi Robert,

      Thanks for the fixes, will apply them ASAP.

  11. September 3, 2009 at 6:38 pm

    Hmmm… Seems broken in IE 7. Just changed a couple lines and nwo works fine:

    Change -> if (window.sidebar) { // Mozilla Firefox Bookmark
    To -> if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { // Mozilla Firefox Bookmark

    Otherwise IE seems to think it meets this condition. Then…

    Change -> } else if( window.external ) { // IE Favorite
    To -> } else if ((navigator.appName == ‘Microsoft Internet Explorer’) && (parseInt(navigator.appVersion) >= 4)) { // IE Favorite

  12. April 7, 2010 at 1:30 am

    WebKit-based browsers do not support any DOM extensions for accessing the bookmarks. For this reason, I added a line of code which detects the absence of the three major extensions and hides the bookmarks:

    if (((!window.sidebar)&&(!window.external)&&(!window.opera))) {$("a.jqbookmark").hide();}
    • April 12, 2010 at 11:01 am

      Thanks Andrew,

      The code originally posted does check for browser support and sends an alert if support is not available – though it does make sense to hide the button altogether in some cases.

  13. Elmar
    April 13, 2010 at 2:12 pm

    Hi,

    has anybody a solutoin for Opera 10.51?

  14. Leeladharan
    April 9, 2011 at 12:47 pm

    Hi,

    Can we bookmark from javascript mms://url ?

  15. June 17, 2011 at 7:56 pm

    Hello Friends,

    i am looking for a javascript example to list all bookmarks saved in my browser.

    Thanks
    Vivek Shrivastava

  16. December 24, 2011 at 8:53 pm

    Hi Robert,
    Thanks for the fixes,

  17. December 29, 2011 at 5:02 pm

    Nice script. Just one more fix. In line 12 change this.title to document.title, otherwise title will always be an empty string or in IE title=url.

  1. June 6, 2009 at 2:39 am
  2. July 29, 2009 at 4:02 am
  3. February 10, 2010 at 8:44 am
  4. May 11, 2011 at 6:43 pm
  5. January 29, 2012 at 12:59 am
  6. February 14, 2012 at 2:53 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: