Главная > Веб мастерская > Кнопка добавить в закладки для сайта

Кнопка добавить в закладки для сайта

кнопка добавить в закладкиСегодня я вам расскажу об одной полезной функции на сайте — это ссылка, ну или кнопка «Добавить в закладки (избранное)». Эта функция позволяет пользователям добавить понравившуюся страницу вашего сайта в закладки браузера, чтобы в нужный момент быстро и легко получить доступ к ней.

Многие из вас скажут: – «Зачем дублировать функцию браузера, ведь эта кнопка есть в адресной строке?».

Да есть, но она там, во-первых, не очень заметна, во-вторых, некоторые пользователи вообще не знают о ней.

Для улучшения UI (юзер интерфейса), лучше продублировать эту функцию и расположить ссылку/кнопку «Добавить в закладки (избранное)» на видном месте. Например, если у вас интернет-магазин, то ее лучше вставить на карточку товара, если у вас блог, то – под или над статьей. Расположение все равно нужно тестировать. А так же ее можно разместить в шапке сайта на всех страницах.

В интернете представлено много разных способов реализовать эту функцию, но большинство из них работают не во всех браузерах, то не работает в старых, то в новых, то в IE, то еще где-то.

Поэтому пришлось, самому выбрать среди них самый лучший и немного дописать его. И сегодня я поделюсь этим способом с вами и предоставлю пошаговую инструкцию по установке ссылки/кнопки «Добавить в закладки (избранное)» на ваш сайт.

Для того чтобы сделать кнопку «добавить в закладки» для сайта нам нужно выполнить 3 простых шага:

Создание JS-файла

Если у вас на сайте есть javascript – файл подключающийся на всех страницах сайта, то используйте его и переходите к следующему шагу. Если у вас нет такого файла, нужно его создать. Для этого создадим папку с названием «js» в корневой папке сайта, а в ней уже файл и назовем его «functions.js».

Дальше нужно его подключить на странице, для этого добавим следующий код между тегами:

< !DOCTYPE html>
<html lang=”ru”>
<head>
	<meta charset="utf-8" />
    	<title>Заголовок магазина</title>

	<script type="text/javascript" src="/js/functions.js"></script>
</head>>
<body>
	Контент страницы
</body>
</html>

 

Копирование и сохранение кода

Ниже приведен JavaScript-код, который нужно вставить в выбранный/созданный вами файл и сохранить его:

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;
                a.href=url;
                return true;
            }
            else {
                // Unknown
                alert('Нажмите Ctrl-D чтобы добавить страницу в закладки');
            }
        }
    }
    return false;
}

 

Добавление ссылки/кнопки на сайт

Теперь нам осталось выбрать место на сайте и вставить туда следующую HTML-код:

<a href="#" onclick="return addFavorite(this);">Добавьте страницу в избранное!</a>

добавить в закладкиВот и все! Как это всё работает — Вы можете видеть (и попробовать) чуть ниже, а так же в сайдбаре этого сайта.

P.S. Хотелось бы добавить: Данный способ работает в следующих браузерах:

  • IE
  • Opera
  • Mozilla FireFox
  • Google Chrome / Safari – будет выводиться надпись «Нажмите Ctrl-D чтобы добавить страницу в закладки», в этих браузерах эта функция выключена из соображений безопасности.

NEW!!! Полезное, нужное, важное:

Где заработать в интернете деньги? Надёжно, честно, без обмана!
Платежные системы, кошельки и обменники для работы

Лучшие хостинги, сервера и прочее для сайтов

Смотрите также

Как сделать RSS подписку на сайте.

В этой статье я расскажу вам что такое RSS, для чего это нужно и как сделать.

2 комментария

  1. А есть плагин на wordpress для подобной кнопки?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *