How to Add a Cross-Browser Bookmark Button to Your Website

You may also like...

35 Comments

  1. Jhay Rhassel Nogra says:

    Hi to all? is there a way how can I achieve it to work in chrome?

    • Hendy Tarnando says:

      Up until now, it's still not possible to bookmark using JS in Chrome.

      • Jhay Rhassel Nogra says:

        Hi Mr. Hendy Tarnando thank you for answering. I don't know why i tried this one in IE last time and it work but right now its not. Do you have any idea sir?

      • Jhay Rhassel Nogra says:

        Now I tried it again and it worked. I don't know why its showing press ctrl + D at IE sometimes

        • Hendy Tarnando says:

          Hi Jhay, thank you for informing the issue. It was because I changed the checking for 'AddFavorite' method to window.external.AddFavorite. But it turned out the checking always returns undefined, so you were seeing an alert message instead of bookmark dialog. I've reverted the changes, it should be working fine now in IE.

  2. Mark says:

    Hi,
    in Firefox is it possible to have not flagged by default “Load this bookmark in the sidebar”?

    Thanks

  3. David Whitworth says:

    I tested it on most browsers and I got it to work just fine... the only exception is the mobile Firefox App on Android.

    My guess is that it doesn't work there because of the "Firefox" user agent but that would mean that window.sidebar also returns true on mobile devices which puzzles me. Is there a known way to get this to work on Firefox mobile?

    • Hi David, we use the Add to Homescreen script to support mobile browsers, but seems like it does not support Firefox for Android yet. You could add an additional else if statement for detecting Firefox on Android (place it before window.sidebar checks):

      } else if (/Android/i.test(navigator.userAgent) && /Firefox/i.test(navigator.userAgent)) {
        //Script for Firefox on Android
      }
  4. Dawn says:

    I am unable to get it to work on Firefox. Stepping thru the code, I see it drops into the "else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print))" block. But unlike yours, it does not bookmark the page. The other browsers seems to work. What am I missing?

    And I am unable to find the actual script used on your page to compare it to the example on display.

    • The bookmark script requires jQuery, make sure jQuery has loaded before the bookmark script. The demo is using exactly the same code (HTML, CSS, JS) as displayed in this article, but it's probably been minified.

      • Dawn says:

        jQuery was already loaded. The issue was that I was using (for accessibility) instead of <a> because we hate non-functional hrefs, and i was trying to initiate it as a custom event on the instead of click event directly on the element.

        • Dawn says:

          apparently Comments converts code. i had used a button tag instead of an anchor tag in my original attempt

          • Ah, that's why. To add bookmarks in Firefox 23+ and Opera Hotlist, it requires using <a> tag with rel="sidebar" and href attribute, and it also requires user-initiated action (click on the anchor). That's the reason <a> is used instead of button tag.

  5. Ivana Houdkova says:

    Tested now and the "return false" line causes big problems in IE. Removed it and works like a charm.

    • Hi Ivana, what are the problems? It seems okay in IE 11 here. Fyi, the return false; is required to prevent the anchor's default action in some browsers.

  6. Sadik Sheikh says:

    hi i am sadik sheikh this bookmark is work on firefox but not support google chrome

    • Unfortunately Chrome does not support adding bookmark through Javascript, an alert box will be prompted and tell the user using Cmd+D / Ctrl+D to add the bookmark instead.

  7. denver says:

    Also, is there a way to get it to recognize if the mobile devise is sideways? The button to save is in the top right corner but it still acts as if the phone was upright and points downward.

  8. denver says:

    Is there a way to bookmark a different page than the page that the button is on?

  9. Erica says:

    In Firefox, is there a way to have it NOT have "Load this bookmark in the sidebar" checked?

  10. John says:

    Thanks! :)

    Hi, may I use the script within a commercial website?

    Greetings, John

  11. Bedford says:

    I am using this mainly on mobile website. It works on the home page but does not work on other pages. Any advise.

    thanks.

    • Bedford says:

      Just wanted to clarify that this is setup to work only when using the above website on a mobile device when redirected. It will not show up if tested on a desktop. My issue is that it only works on the home page of the mobile website and not on any other pages when selected from the menu even though the button is present there.

      • Bedford says:

        Never mind. I found the issue, the problem was that I was working the whole menu under the index.html and when I separated the various pages to their own html files it worked.

  12. Joe Stats says:

    Lovely button. Unfortunately, I can't get it to work in WordPress. I can get other buttons to work that do not function with chrome, but this one eludes me. Any ideas? I get an uncaught: TypeError: # is not a function as well.

    • Hi Joe, you might need to put the JavaScript code inside jQuery(document).ready function which gets called when all the DOM elements can be accessed.

      jQuery(document).ready(function($) {
        //The code for the bookmark button
      });
  13. demisx says:

    Doesn't seem to work with Safari 8. I get "Click Ctrl+D to add this page to bookmarks" popup instead.

    • demisx says:

      Never mind. I realize now that Safari and any WebKit based browser needs special handling. Should've taken more time to look at the code.

  14. Nicolas says:

    how to position javascript? e.e I try to upload the ".js" file, but not detected. I am noob in this x). <script src="url.js" or <Script type="java/script" ect... i try... but no worked :S... I need it for a blog. thx!

    • The attribute type="text/javascript" is required in HTML4 and XHTML, but optional in HTML5.

      Make sure the script tag is properly closed like this:

      <script type="text/javascript" src="myscript.js"></script>

      The standard advice is to put <script> tags at the bottom, just before the closing body tag so they don't block rendering of the page.

Comments are closed.