jQuery Add Bookmark to Favorites Script

Here is a quick example of how to use jQuery along with traditional browser sniffing techniques to create a dynamic “Bookmark Us” link.

Google CDN (latest 1.x version, theme)…

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css" />

The javascript…

$(function() {
    $('<div id="dialog"></div>').dialog({
        modal: true,
        autoOpen: false,
        buttons: {
            Ok: function() {
                $(this).dialog('close');
            }
        }
    });
    var faveMetaKey = (navigator.appVersion.indexOf('Mac') != -1) ? 'CMD' : 'CTRL';
    var faveLetter = 'D';
    var faveText = 'Bookmark Us';
    if ($.browser.opera) {
        $('#addBookmark').attr('rel', 'sidebar');
        if (parseInt($.browser.version, 10) < 9) {
            faveLetter = 'T';
            $('#addBookmark').text(faveText + ' (' + faveMetaKey + '+' + faveLetter + ')');
        }
    } else if (/konqueror/.test(navigator.userAgent.toLowerCase())) {
        faveLetter = 'B';
        $('#addBookmark').text(faveText + ' (' + faveMetaKey + '+' + faveLetter + ')');
    } else if (window.external || window.sidebar) {
        $('#addBookmark').text(faveText);
    }
    $('#addBookmark').click(function(event) {
        event.preventDefault();
        if (window.external) { // IE
            window.external.AddFavorite(window.location.href, document.title);
        } else if (window.sidebar) { // FireFox
            window.sidebar.addPanel(document.title, window.location.href, '');
        } else {
            if ($.browser.opera && parseInt($.browser.version, 10) >= 9) {
                // do nothing (added rel="sidebar" above)
            } else {
                $('#dialog').dialog('option', 'title', faveText);
                $('#dialog').html('Press ' + faveMetaKey + '+' + faveLetter + ' to ' + faveText + '.');
                $('#dialog').dialog('open');
            }
        }
    });
});

The HTML anchor (link)…

<a id="addBookmark" href="#">Bookmark Us (CTRL + D)</a>

You can see from the HTML above that we set our link using generic defaults in case the user’s browser doesn’t process the script correctly.

In our JavaScript, we first add a generic dialog to the DOM in case automated bookmarks are not supported. Next we set our defaults: faveMetaKey, faveLetter key, and faveText. Only the rel=”sidebar” attribute is required for this to work with Opera, but we also have to check the Opera version to re-assign the letter key for older versions. The check for Konqueror was required since it uses a letter key that no other browser is known to use. Then, if we know that automated bookmarking is allowed, we can just omit the key combination since the link should work (IE & FF).

Now for our almighty click() function. First, we kill the event with preventDefault(). Then we do our conditional checks for Internet Explorer and FireFox (both of which can be automated). If all else fails, we make sure it’s not Opera 9+, then tell the user which key combination to press within the jQuery-UI Dialog.

Let me know if you run into any browser/OS combinations with which this method fails. Try to limit concerns regarding browser versions to those released within the last 5 years, thanks 😉

I would also appreciate feedback regarding key combinations not included in my script. I’m pretty sure I covered them all, but one can never be sure.

2 thoughts on “jQuery Add Bookmark to Favorites Script

    1. Robert Mullaney Post author

      To use an image instead of a text representation, you would need to have an image for each possible combination. This can be easily achieved, but I personally would not bother doing so. However, just build the image tag using $(‘#addBookmark’).html(‘<img src=”…”>’) instead of $(‘#addBookmark’).text(‘…’)

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *