Bookmarks (also known as Favorites) in browsers make it easy to get back to your favorite websites or webpages. This article will show you how to add a cross-browser bookmark button to your website.
We are going to use the <a> tag (HTML anchor tag) to create a bookmark button. We'll add some CSS rules to make the anchor look like a button. You may be wondering why we don't use the <button> tag. The reason is that some browsers (Firefox 23+ and Opera prior to version 15) require using an anchor tag with rel="sidebar" to create a bookmark.
Place this code wherever you want the button to appear on your page.
<a id="bookmark-this" href="#" title="Bookmark This Page">Bookmark This Page</a>
Inside your head tag, add a style block with the following CSS:
#bookmark-this {
padding: 5px 10px;
background-color: #f0ad4e;
border: 1px solid #eea236;
border-radius: 4px;
font-size: 12px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#bookmark-this:hover {
background-color: #ec971f;
border: 1px solid #d58512;
text-decoration: none;
}
#bookmark-this:active {
background-color: #ec971f;
border: 1px solid #d58512;
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}The CSS above adds some styles to the anchor so it would look like a button. You can apply your own CSS to style the anchor.
Supporting Mobile Browsers
To support mobile browsers, we use the Add to Homescreen script by Matteo Spinelli. The script opens a message inviting the mobile user to add the website to homescreen. You can get the script here. Include the addtohomescreen.css and addtohomescreen.js in your head tag. The files can be found inside the src and style folders.
<head> ... <link rel="stylesheet" href="css/addtohomescreen.css"> <script src="js/addtohomescreen.js"></script> <!-- Additionally, include jQuery (necessary for bookmark script) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head>
The Bookmark Script
Before the closing body tag, add a script block with the following code.
jQuery(function($) {
$('#bookmark-this').click(function(e) {
var bookmarkURL = window.location.href;
var bookmarkTitle = document.title;
if ('addToHomescreen' in window && addToHomescreen.isCompatible) {
// Mobile browsers
addToHomescreen({ autostart: false, startDelay: 0 }).show(true);
} else if (window.sidebar && window.sidebar.addPanel) {
// Firefox <=22
window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
} else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
// Firefox 23+ and Opera <=14
$(this).attr({
href: bookmarkURL,
title: bookmarkTitle,
rel: 'sidebar'
}).off(e);
return true;
} else if (window.external && ('AddFavorite' in window.external)) {
// IE Favorites
window.external.AddFavorite(bookmarkURL, bookmarkTitle);
} else {
// Other browsers (mainly WebKit & Blink - Safari, Chrome, Opera 15+)
alert('Press ' + (/Mac/i.test(navigator.userAgent) ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
}
return false;
});
});
At the time of writing this article, WebKit & Blink browsers on desktop (e.g. Safari, Chrome, Opera 15+) do 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.
Demo
Click the button below to bookmark this page.
Hi to all? is there a way how can I achieve it to work in chrome?
Up until now, it's still not possible to bookmark using JS in Chrome.
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?
Now I tried it again and it worked. I don't know why its showing press ctrl + D at IE sometimes
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 returnsundefined, so you were seeing an alert message instead of bookmark dialog. I've reverted the changes, it should be working fine now in IE.Hi,
in Firefox is it possible to have not flagged by default “Load this bookmark in the sidebar”?
Thanks
No, it is not controllable using JavaScript, you may need to uncheck it manually.
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 ifstatement for detecting Firefox on Android (place it beforewindow.sidebarchecks):} else if (/Android/i.test(navigator.userAgent) && /Firefox/i.test(navigator.userAgent)) { //Script for Firefox on Android }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.
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.
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"andhrefattribute, and it also requires user-initiated action (click on the anchor). That's the reason <a> is used instead of button tag.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.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.
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.
You could use the
orientationmedia query like so.@media all and (orientation: landscape) { /* Landscape styles */ }Is there a way to bookmark a different page than the page that the button is on?
Yes, set the page URL to bookmark in this line:
In Firefox, is there a way to have it NOT have "Load this bookmark in the sidebar" checked?
No, it is not controllable using JavaScript, you may need to uncheck it manually.
Thanks! :)
Hi, may I use the script within a commercial website?
Greetings, John
Yes, you can John :-)
I am using this mainly on mobile website. It works on the home page but does not work on other pages. Any advise.
thanks.
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.
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.
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).readyfunction which gets called when all the DOM elements can be accessed.jQuery(document).ready(function($) { //The code for the bookmark button });Doesn't seem to work with Safari 8. I get "Click Ctrl+D to add this page to bookmarks" popup instead.
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.
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:
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.