Сегодня я вам расскажу об одной полезной функции на сайте — это ссылка, ну или кнопка «Добавить в закладки (избранное)». Эта функция позволяет пользователям добавить понравившуюся страницу вашего сайта в закладки браузера, чтобы в нужный момент быстро и легко получить доступ к ней.
Многие из вас скажут: – «Зачем дублировать функцию браузера, ведь эта кнопка есть в адресной строке?».
Да есть, но она там, во-первых, не очень заметна, во-вторых, некоторые пользователи вообще не знают о ней.
Для улучшения 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 чтобы добавить страницу в закладки», в этих браузерах эта функция выключена из соображений безопасности.
А есть плагин на wordpress для подобной кнопки?
Я не знаю.. слишком простая функция для отдельного плагина..