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="http://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.
Leave a Reply
I found it very useful. Thanks a lot! =)
You’re very welcome – glad someone found some use for it
Great! Much better than the IE-centric approach my company had been using before I came on…
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 ?
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!
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.
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?
ok, I get it… it was my ID-10-T error.
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?
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.
This script seems to crash ie8 when you click on the link. Has anyone else experienced this?
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.
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)
Hi Robert,
Thanks for the fixes, will apply them ASAP.
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
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();}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.
Hi,
has anybody a solutoin for Opera 10.51?
Hi,
Can we bookmark from javascript mms://url ?
Hello Friends,
i am looking for a javascript example to list all bookmarks saved in my browser.
Thanks
Vivek Shrivastava
Hi Robert,
Thanks for the fixes,
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.