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

You may also like...

30 Responses

  1. Mark says:

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

    Thanks

  2. 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
      }
      
  3. 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 interaction (click on the anchor). That’s the reason <a> is used instead of button tag.

  4. Ivana Houdkova says:

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

  5. Sadik Sheikh says:

    hi i am sadik sheikh this bookmark is work on fire fox but not support google chrom

  6. 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.

  7. denver says:

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

  8. Erica says:

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

  9. John says:

    Thanks! :)

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

    Greetings, John

  10. 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.

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

  13. 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.

Leave a Reply

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