6

I've seen this question already multiple times: How to add a bookmark this page button. But it seems no solution is working currently.

The code im trying to use at the moment:

$('.js-bookmarkme').click(function(e) {
    e.preventDefault();

    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.');
    }
});

Source: How do I add an “Add to Favorites” button or link on my website?

As stated in the comments:

Firefox's propriety window.sidebar.addPanel(..) has been deprecated, and the function was removed in Firefox 23 (see third bullet)
– Will Hawker

Supposedly the FF solution to date isn't working anymore, but the Opera solution isn't working either. (Though I wasn't able to test the IE solution yet).

That brings in the obvious question: How can you achive a Bookmarklet button? With browser support as far as possible.

Community
  • 1
  • 1
AlexG
  • 5,649
  • 6
  • 26
  • 43
  • window.sidebar.addPanel feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. – Mohammad Kermani May 04 '16 at 11:57
  • As mentioned, it is already deprecated since FF 23. – AlexG May 04 '16 at 12:01

1 Answers1

8

Since there has been no solution this is the best I was able to come up with, after some research.

// Bookmark me
$('.js-bookmarkme').click(function(e) {
    e.preventDefault();
    var bookmarkURL = window.location.href;
    var bookmarkTitle = document.title;

    if ('addToHomescreen' in window && window.addToHomescreen.isCompatible) {
        // Mobile browsers
        addToHomescreen({ autostart: false, startDelay: 0 }).show(true);
    } else if (window.sidebar && window.sidebar.addPanel) {
        // Firefox version < 23
        window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
    } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
        // Firefox version >= 23 and Opera Hotlist
        $(this).attr({
            href: bookmarkURL,
            title: bookmarkTitle,
            rel: 'sidebar'
        }).off(e);
        return true;
    } else if (window.external && ('AddFavorite' in window.external)) {
        // IE Favorite
        window.external.AddFavorite(bookmarkURL, bookmarkTitle);
    } else {
        // Other browsers (mainly WebKit - Chrome/Safari)
        alert('Please press ' + (/Mac/i.test(navigator.userAgent) ? 'CMD' : 'Strg') + ' + D to add this page to your favorites.');
    }

    return false;
});
AlexG
  • 5,649
  • 6
  • 26
  • 43
  • 1
    This is not working on mobile browsers. Could you please suggest what should I do for enabling this feature on mobile browsers? I have tested with mozilla on android device. – Amit Sadafule Dec 02 '16 at 09:23
  • You probably can check for mobile browsers as well, I've ended up simply hiding the button in Mobile Browsers. – AlexG Dec 02 '16 at 09:31
  • 2
    This answer seems to be obsolete, any update would be welcome. – sinsedrix Dec 01 '17 at 12:59