Html add to favorites. Add to Favorites for all browsers

Cross-browser bookmarking of a page is implemented with using JavaScript. To add a page to Browser Favorites Internet Explorer and browsers running on the IE engine, is called standard method AddFavorite. However, there is one important detail here. If the IE page is opened as an embedded object in another application, for example in plugins or when using components for working with html, then the window.external object is present, but its AddFavorite method does not work. This is the most common mistake made by developers who simply copy code from each other without understanding and testing it. It would also be a big mistake to use only this one method on your website.

Gecko-based browsers such as Firefox, Netscape, K-Meleon and others have a window.sidebar object and a method for adding addPanel . The third parameter of the method is undocumented and optional, so in the script it is simply replaced with an empty string. Please note that by default the link is not added to bookmarks, but to sidebar browser. To add a page to the desired bookmark folder, select it from the drop-down menu.

For Opera browser The bookmarking link must have the rel="sidebar" attribute. But if this attribute is set immediately by default, then some browsers like Netscape will handle the bookmarking function twice: the first time through a script and the second time through the rel attribute. Therefore, you will have to change the link attributes dynamically, having previously determined the browser by checking the opera object type.

If none of the above methods worked, then there is no need to display an error message or, even worse, silently terminate the script. It would be much more correct to show the user an available solution to the problem, for example, offer to manually press the key combination Ctrl+D.

Now that we have all the initial data, we can write a cross-browser script to bookmark the page. I got something like this:

// Add to Favorites function add_favorite(a) ( title=document.title; url=document.location; try ( // Internet Explorer window.external.AddFavorite(url, title); ) catch (e) ( try ( // Mozilla window.sidebar.addPanel(title, url, "" ) catch (e) ( // Opera if (typeof(opera)=="object") ( a.rel="sidebar"; a.title=title ; a.url=url; return true; ) else ( // Unknown alert("Press Ctrl-D to bookmark this page"); ) ) return false;

Add to Favorites

You can see a working example of the implementation right on this page. The use of try-catch constructs allows the script to work correctly in any non-standard situations, for example in an IE Tab window opened in the Firefox browser. The script also works correctly in various exotic browsers that cannot be uniquely determined through UserAgent or DOM properties. All vaunted commercial products like DLE are silently broken down in this situation.

After some digging, I finally found a beautiful solution that works in all browsers.

function add2Fav(x)( if (document.all && !window.opera) ( if (typeof window.external == "object") ( window.external.AddFavorite(document.location, document.title); return true; ) else return false; ) else( x.href=document.location; x.title=document.title; x.rel = "sidebar"; return true; ) )

Add to favorites

Add to favorites - script for all browsers Add to favorites

We change the Site Name and URL in 2 places! Works everywhere without errors)

Make homepage - script for IE Make homepage

We change the URL in 2 places! Works only in IE

JavaScript Link"Add to Favorites" for all browsers

The script was found in Google and modified taking into account current realities, namely the presence of the 8th version of IE and Chrome browser(which in its original form was defined by the script as Netscape and no actions were performed as a result). If the browser does not support bookmarking through a script, the user will be shown a message stating that they can add to bookmarks by pressing Ctrl-D.

Place these functions in the page title:

function getBrowserInfo() ( var t,v = undefined; if (window.chrome) t = "Chrome"; else if (window.opera) t = "Opera"; else if (document.all) ( t = "IE" ; var nv = navigator.appVersion; var s = nv.indexOf("MSIE")+5; v = nv.substring(s,s+1); else if (navigator.appName) t = "Netscape"; (type:t,version:v); ) function bookmark(a)( var url = window.document.location; var title = window.document.title; var b = getBrowserInfo(); if (b.type == " IE" && 8 >= b.version && b.version >= 4) window.external.AddFavorite(url,title); else if (b.type == "Opera") ( a.href = url; a.rel = "sidebar"; a.title = url+","+title) else if (b.type == "Netscape") window.sidebar.addPanel(title,url,""); Press CTRL-D to bookmark the page."); return false; )

At one time, the “Add site to favorites” link was popular on websites; when you clicked on it, the website address was added to your browser bookmarks. However, why was it? From time to time, such a link can still be found on websites. The trouble is that the script used for this purpose does not work in many browsers, so its value is close to zero. HTML5 has expanded the capabilities of the rel tag attribute and now with its help you can easily add any sites and individual pages to your favorites.

Just add rel="sidebar" to the link and when you click on it, a special panel will open in the browser for creating a new bookmark. While the sidebar value is supported by two browsers - Firefox and Opera, the rest ignore the rel attribute and follow the specified link as usual.

To expand the number of browsers and add IE to them, you can also connect a small script to the link. As a result, it turns out that Firefox, Opera, Internet Explorer will call a special panel, other browsers will follow the link (example 1).

Example 1: Adding to Favorites

HTML5 IE Cr Op Sa Fx

Add to favorites function addBookmark() ( if (document.all) window.external..ru"); )

Add to favorites

What does using rel="sidebar" look like in the end? The result depends on the browser. Firefox, for example, opens such a window (Fig. 1).

Rice. 1. Add to favorites in Firefox

In Opere the appearance is slightly different, but the meaning is similar (Fig. 2).

Rice. 2. Adding to favorites in the Opera browser

Internet Explorer has the most laconic interface (Fig. 3).

Rice. 3. Add to favorites Internet browser Explorer

While the use of the rel attribute is unusual due to its poor browser support, it has enormous potential, and the number of values is gradually expanding. So it must be included in the links.

From today I will tell you about one useful function on the site - this is a link, or a button “Add to bookmarks (favorites)”. This feature allows users to bookmark a page they like on your site in their browser so they can quickly and easily access it when needed.

Many of you will say: “Why duplicate the browser function, because this button is in the address bar?”

Yes, there is, but it is there, firstly, not very noticeable, and secondly, some users do not know about it at all.

To improve the UI (user interface), it is better to duplicate this function and place the link/button “Add to bookmarks (favorites)” in a prominent place. For example, if you have an online store, then it is better to insert it on the product card; if you have a blog, then under or above the article. The location still needs to be tested. It can also be placed in the site header on all pages.

There are many available on the Internet different ways implement this function, but most of them do not work in all browsers, sometimes it doesn’t work in old ones, sometimes in new ones, sometimes in IE, sometimes somewhere else.

Therefore, I had to choose the best one among them and add a little to it. And today I will share this method with you and provide step by step instructions for installing a link/button “Add to bookmarks (favorites)” on your website.

In order to make a “add to bookmarks” button for a site, we need to follow 3 simple steps:

Creating a JS File

If you have javascript on your site - a file that connects on all pages of the site, then use it and proceed to the next step. If you don't have such a file, you need to create it. To do this, we will create a folder called “js” in the root folder of the site, and there will already be a file in it and call it “functions.js”.

< !DOCTYPE html>Store Header > Page Content

Copying and saving code

Below is the JavaScript code that you need to paste into the file you selected/created and save it:

Function addFavorite(a) ( var title = document.title; var url = document.location; try ( // Internet Explorer window.external.AddFavorite(url, title); ) catch (e) ( try ( // Mozilla window. sidebar.addPanel(title, url, ""); catch (e) ( // Opera if (typeof(opera)=="object" || window.sidebar) ( a.rel="sidebar"; a.title =title; a.url=url; return true; else ( // Unknown alert("Press Ctrl-D to bookmark the page"); ) ) return false;

Adding a link/button to the site

Now all we have to do is select a place on the site and paste the following HTML code there:

Add this page to your favorites!

That's it! You can see (and try) how it all works just below, as well as in the sidebar of this site.

P.S. I would like to add: This method works in the following browsers:

Opera
Mozilla FireFox
Google Chrome/ Safari – the message “Press Ctrl-D to bookmark this page” will be displayed; in these browsers this feature is disabled for security reasons.

Users surfing the Internet regularly find interesting materials, pictures, videos or game sites that they would like to save so they can visit them later. Some people add links to a notepad the old-fashioned way, while others open their favorite web resources through their browsing history. But these are not the most convenient ways, because everyone modern browsers There is an effective function with which you can quickly (with just 1 click) add a site to your bookmarks.

How to bookmark a page in the browser

Browsers have several types of bookmarks:

Standard bookmarks;

Visual bookmarks;

Moreover, this standard is supported by all popular browsers: Google Chrome, Opera, Mozilla Firefox, Yandex browser.

Let's figure out how to bookmark a page in a browser using each of the options.

How to add a website page to regular bookmarks in a browser

To add a site page to regular bookmarks:

Open the page you want to save;

In the upper right corner of the browser, click on the star icon (in Opera - a heart).
All! Bookmark added!

In addition, you can quickly save pages to bookmarks using hotkeys: Ctrl+D.

How to open a saved bookmark

There's just one small thing to do - you need to find out how to open the bookmarked page. And you can do this in several ways:

How to add a site to visual bookmarks

Unfortunately, add the site to visual bookmarks in Google Chrome in a standard way it is forbidden. IN visual bookmarks Chrome shows the most visited sites and the user does not have the ability to edit them or add new ones. You can only delete. But there is a way out! You can install the extension.

With this extension, the sequence of actions for all browsers will be almost identical.