How do I add an "Add to Favorites" button or link on my website?

Question

I'm building a website using Drupal. On the header of each page I want to have a single image (custom designed by me) which would act as a custom "Add to Favorites" button. Clicking on the image should add the website's URL to the user browser's favorites (bookmarks). This should work for all browsers, IE7+, FF, Opera, Chrome. I wasn't able to find much information for this online. I suppose that javascript should do the job but I don't have much experience in Javascript :) so I need your help!

possible duplicate of [Bookmark on click using jQuery](http://stackoverflow.com/questions/5828965/bookmark-on-click-using-jquery) — alanj, Jun 24 '15 at 18:20
TL;DR you could try a [Web Extension](https://github.com/mdn/webextensions-examples/tree/master/bookmark-it) or you could simply create an absolute link with `rel="bookmark" on the page so the user can decide what to do with it. — vhs, Feb 02 '19 at 04:59

score 91 · Accepted Answer · edited Aug 25 '16 at 07:49

91

jQuery Version

$(function() {
  $('#bookmarkme').click(function() {
    if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
      window.sidebar.addPanel(document.title, window.location.href, '');
    } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
      window.external.AddFavorite(location.href, document.title);
    } else if (window.opera && window.print) { // Opera Hotlist
      this.title = document.title;
      return true;
    } else { // webkit - safari/chrome
      alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

edited Aug 25 '16 at 07:49

user2226755

12,494
5
50
73

answered Apr 05 '12 at 17:36

iambriansreed

21,935
6
63
79

@Whymarrh, added a webkit (Chrome/Safari) action. – iambriansreed Apr 05 '12 at 18:05
1

@webmaniacgr see the update. Yes. And please actually +1 then accept. – iambriansreed Apr 05 '12 at 18:06
I edited the answer because `window.sidebar.addPanel` take the title as the first parameter and the url as the second one. – enguerran Apr 11 '13 at 10:24
@enguerran You are absolutely right. https://developer.mozilla.org/en-US/docs/DOM/window.sidebar - Updated. – iambriansreed Apr 11 '13 at 12:48
this doesn't work on ie now.. @PHPst's answer does though.. maybe this needs to be updated. thanks! – reikyoushin Jul 18 '13 at 20:10
2

I've tried but it doesn't work on opera. Only IE popup the bookmark box, Firefox, Chrome and safari(Windows) all alert. – richard Sep 18 '13 at 15:40
Very useful snippet. Especially the Ctrl/Cmd comparison. – CountD Feb 05 '14 at 13:57
5

Firefox's propriety `window.sidebar.addPanel(..)` has been deprecated, and [the function was removed in Firefox 23](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/23#DOM) (see third bullet) – Will Hawker Sep 23 '13 at 11:27
Yes, It has stopped working in Firefox. Has anyone found another solution? – Dima Dec 08 '13 at 19:46
1

**Update: November 2017** It's such a shame that the appropriate organisations still haven't standardised this yet. This is still the best/only solution. – Phil Nov 21 '17 at 14:24
This answer seems to be obsolete, any update would be welcome. – sinsedrix Dec 01 '17 at 10:55
In Firefox 61, it is enough just to have `rel="sidebar" title="Name of bookmark"` to make it work. The JS code lines 3-4 should be updated to this to avoid alert: `if (window.sidebar) { /* Firefox */ if (window.sidebar.addPanel) window.sidebar.addPanel(document.title, window.location.href, ''); else return true;` – Jonas Berlin Sep 14 '18 at 04:40
I found that `href="#"` was causing IE to try to follow a nonexistent link if adding the bookmark was cancelled by the user. Fixed this by removing `href` and adding `style="cursor:pointer"` so users will still realize it is clickable. – Mentalist Mar 07 '19 at 06:26

Handsome Nerd · Answer 2 · 2013-08-20T04:11:46.483

23

This code is the corrected version of iambriansreed's answer:

<script type="text/javascript">
    $(function() {
        $("#bookmarkme").click(function() {
            // Mozilla Firefox Bookmark
            if ('sidebar' in window && 'addPanel' in window.sidebar) { 
                window.sidebar.addPanel(location.href,document.title,"");
            } else if( /*@cc_on!@*/false) { // IE Favorite
                window.external.AddFavorite(location.href,document.title); 
            } else { // webkit - safari/chrome
                alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
            }
        });
    });
</script>

edited Aug 20 '13 at 04:11

answered Mar 01 '13 at 14:26

Handsome Nerd

17,114
22
95
173

thanks! this works on ie unlike the accepted answer.. (on forced ie9 mode on ie10) – reikyoushin Jul 18 '13 at 20:10
2

**UPDATE: this will fail if you have an element with an id=sidebar**, check this one out: http://stackoverflow.com/questions/17747578/uncaught-typeerror-object-htmldivelement-has-no-method-addpanel/17747873?noredirect=1#comment25877287_17747873 – reikyoushin Jul 19 '13 at 14:21
Firefox with an element with id=sidebar. Check the question above.. its fixed though – reikyoushin Aug 21 '13 at 00:13
3

Just tried the script but it only popup the bookmark box on IE, Firefox, Chrome, Opera and Safari(Windows) all alert. – richard Sep 18 '13 at 15:44

score 3 · Answer 3 · answered Oct 03 '13 at 15:07

I have faced some problems with rel="sidebar". when I add it in link tag bookmarking will work on FF but stop working in other browser. so I fix that by adding rel="sidebar" dynamic by code:

jQuery('.bookmarkMeLink').click(function() {
    if (window.sidebar && window.sidebar.addPanel) { 
        // Mozilla Firefox Bookmark
        window.sidebar.addPanel(document.title,window.location.href,'');
    }
    else if(window.sidebar && jQuery.browser.mozilla){
        //for other version of FF add rel="sidebar" to link like this:
        //<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>
        jQuery(this).attr('rel', 'sidebar');
    }
    else if(window.external && ('AddFavorite' in window.external)) { 
        // IE Favorite
        window.external.AddFavorite(location.href,document.title); 
    } else if(window.opera && window.print) { 
        // Opera Hotlist
        this.title=document.title;
        return true;
    } else { 
        // webkit - safari/chrome
        alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');

    }
});

score 1 · Answer 4 · edited Jul 08 '13 at 03:26

1

  if (window.sidebar) { // Mozilla Firefox Bookmark
     window.sidebar.addPanel(document.title,location.href,"");

It adds the bookmark but in the sidebar.

edited Jul 08 '13 at 03:26

matthewbauer

4,314
1
17
22

answered Apr 16 '12 at 23:54

Dima

1,326
2
13
19

2

location.href,document.title, - should be in an opposite order – Dima Apr 16 '12 at 23:56

score 0 · Answer 5 · edited May 23 '17 at 12:25

Credit to @Gert Grenander , @Alaa.Kh , and Ross Shanon

Trying to make some order:

it all works - all but the firefox bookmarking function. for some reason the 'window.sidebar.addPanel' is not a function for the debugger, though it is working fine.

The problem is that it takes its values from the calling <a ..> tag: title as the bookmark name and href as the bookmark address. so this is my code:

javascript:

$("#bookmarkme").click(function () {
  var url = 'http://' + location.host; // i'm in a sub-page and bookmarking the home page
  var name = "Snir's Homepage";

  if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){ //chrome
    alert("In order to bookmark go to the homepage and press " 
        + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 
            'Command/Cmd' : 'CTRL') + "+D.")
  } 
  else if (window.sidebar) { // Mozilla Firefox Bookmark
    //important for firefox to add bookmarks - remember to check out the checkbox on the popup
    $(this).attr('rel', 'sidebar');
    //set the appropriate attributes
    $(this).attr('href', url);
    $(this).attr('title', name);

    //add bookmark:
    //  window.sidebar.addPanel(name, url, '');
    //  window.sidebar.addPanel(url, name, '');
    window.sidebar.addPanel('', '', '');
  } 
  else if (window.external) { // IE Favorite
        window.external.addFavorite(url, name);
  } 
  return;
});

html:

  <a id="bookmarkme" href="#" title="bookmark this page">Bookmark This Page</a>

In internet explorer there is a different between 'addFavorite': <a href="javascript:window.external.addFavorite('http://tiny.cc/snir','snir-site')">..</a> and 'AddFavorite': <span onclick="window.external.AddFavorite(location.href, document.title);">..</span>.

example here: http://www.yourhtmlsource.com/javascript/addtofavorites.html

Important, in chrome we can't add bookmarks using js (aspnet-i): http://www.codeproject.com/Questions/452899/How-to-add-bookmark-in-Google-Chrome-Opera-and-Saf

How do I add an "Add to Favorites" button or link on my website?

5 Answers5

Linked

Related