Кнопка добавить в избранное. Добавить в избранное для всех браузеров

В любом из современных браузеров есть функция добавления сайтов в список избранного. Таким образом, пользователь может сохранить любимые сайты и держать их всегда под рукой, чтобы иметь к ним быстрый доступ. Но долгое время была популярна кнопка для сайта "Добавить в избранное". Эта функция несколько упрощает процесс добавления сайта в закладки и позволяет лишний раз напомнить пользователю о том, что неплохо было бы добавить сайт в избранное.

Здесь работает психология. Дело в том, что видя на сайте предложение о добавлении в избранное, пользователь задумывается нужно ли ему это. И если он решит, что сайт, действительно, полезен, то добавит его в список закладок. А если предложения не поступит, то пользователь и не задумается над этим вопросом. Именно поэтому нужно предлагать: кто стучится - тому открывают.

Конечно, большинство посетителей добавляют страницы в закладки не потому, что планируют возвращаться на сайт каждый день, а "на всякий случай, вдруг понадобится", и, как правило, не возвращаются. Но некоторые пользователи возвращаются регулярно и формируют костяк посетителей. Так или иначе, если люди будут возвращаться на сайт, это значит, что ваш сайт полезен, и это положительно скажется на поведенческих факторах вашего ресурса, что позволит поисковым системам относиться к нему с большим доверием.

Размещать кнопку "Добавить в избранное" на сайте нужно на видном месте, но не слишком навязчиво. Лучшее место для такой кнопки - шапка, либо боковая часть сайта.

Не нужно делать кнопку огромной или слишком маленькой. Помните, что кнопка должна вписываться в общий дизайн сайта, и не быть слишком навязчивой или слишком малозаметной.

Код кнопки "Добавить сайт в избранное"

Большинство современных браузеров, с приходом стандарта HTML5, поддерживают атрибут rel="sidebar" .

Добавление сайта в избранное - "Нубекс" function addSite() { if (document.all) window.external.addFavorite("http://сайт", "Конструктор сайтов "Нубекс""); }

Не забудьте добавить наш сайт в закладки! (Для браузера Google Chrome нажмите Ctrl+D)

Добавить сайт в избранное

Но помните, что в браузере Google Chrome невозможно добавить сайт в закладки с помощью кнопки на сайте. Для этого есть специальная комбинация клавиш: Ctrl+D , поэтому не забудьте сообщить пользователю об этом.

Отслеживать количество пользователей, добавивших ваш сайт в закладки, можно, например, с помощью сервиса Яндекс.Метрика ("Посещаемость" - "Конверсии").

Кроссбраузерное добавление страницы в закладки реализуется с использованием JavaScript. Для добавления страницы в Избранное браузеров Internet Explorer и браузеров, работающих на движке IE, вызывается стандартный метод AddFavorite . Однако здесь есть одна важная деталь. Если страница IE открыта как embedded-объект в другом приложении, например в плагинах или при использовании компонентов для работы с html, то объект window.external присутствует, но его метод AddFavorite не срабатывает. Это наиболее частая ошибка разработчиков, которые просто копируют код друг у друга без его понимания и тестирования. Также большой ошибкой будет использование на своем сайте только одного этого способа.

Браузеры на движке Gecko, такие как Firefox, Netscape, K-Meleon и другие, имеют объект window.sidebar и метод для добавления addPanel . Третий параметр метода недокументирован и является необязательным, поэтому в скрипте заменяется просто пустой строкой. Обратите внимание, что по умолчанию ссылка добавляется не совсем в закладки, а в боковую панель браузера. Для добавления страницы в нужную папку закладок выберите ее в выпадающем меню.

Для браузера Opera ссылка добавления в закладки должна иметь атрибут rel=»sidebar» . Но если этот атрибут ставить сразу по умолчанию, то некоторые браузеры типа Netscape будут отрабатывать функцию добавления в закладки дважды: первый раз через скрипт и второй раз через атрибут rel. Поэтому придется изменять атрибуты ссылки динамически, предварительно определив браузер проверкой типа объекта opera.

Если ни один из перечисленных способов не сработал, то не надо выдавать сообщение об ошибке или еще хуже, молча завершать выполнение скрипта. Будет гораздо правильнее показать пользователю доступный вариант решения задачи, например предложить вручную нажать комбинацию клавиш Ctrl+D .

Теперь, когда у нас есть все исходные данные, можно написать кроссбраузерный скрипт для добавления страницы в закладки. У меня получился вот такой:

// Добавить в Избранное 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("Нажмите Ctrl-D чтобы добавить страницу в закладки"); } } } return false; }

Добавить в Избранное

Рабочий пример реализации вы можете увидеть прямо на этой странице. Использование конструкций try-catch позволяет скрипту правильно отрабатывать в любых нестандартных ситуациях, например в окне IE Tab, открытом в браузере Firefox. Также скрипт корректно работает в различных экзотических браузерах, которые нельзя однозначно определить через UserAgent или DOM-свойства . Всякие хваленые коммерческие поделки типа DLE в этой ситуации молча обламываются.

Хорошо Плохо

Страницы сайтов по своему функционалу стремятся к возможностям полноценных приложений, что, в основном, ложится на плечи JavaScript. Одна из задач, которая возникает у…

Когда размер страницы превосходит некоторый предел, разработчики часто ставят внизу текстовую или графическую ссылку «вверх страницы». Эта ссылка позволяет…

Тема очень популярная. Сервисы с созданием он-лайн закладок пользуются популярностью, но давайте попробуем решить задачу. Не будем использовать сторонний сервис, а решим данную проблему на сайте. В итоге посетитель, нажав на ссылку, сможет добавить сайт в закладки (аналогично Ctrl+D и тп).

Как добавить сайт в закладки (избранное)? Используем JavaScript Создаём файл с названием bookmark.js . В него вставляем указанный ниже код.

Код JavaScript (файл bookmark.js )

Function AddToBookmark(a)
{
var title = window.document.title; // запоминаем заголовок активной страницы/вкладки
var url = window.document.location; // адрес тоже запоминаем

If (window.sidebar) { // такой объект есть только в Gecko
window.sidebar.addPanel(title, url, ""); // используем его метод добавления закладки
}
else if (typeof(opera)=="object") { // есть объект opera?
a.rel="sidebar"; // добавлем закладку, смотрите вызов функции ниже
a.title=title;
a.url=url;
return true;
}
else if(document.all) { // ну значит это Internet Explorer
window.external.AddFavorite(url, title); // используем соответсвующий метод
}
else {
alert("Для добавления страницы в Избранное нажмите Ctrl+D"); // для всех остальных браузеров, в т.ч. Chrome
}

Return false;
}
Ну и чтобы скрипт заработал, достаточно подключить файл bookmark.js и вставить ссылку с js , которая при клике вызывала бы работу скрипта.

Код HTML

Пример работы Добавления вкладок

Добавить ссылку в избранное

На самом деле я бы рекомендовал остановиться на этом варианте. Второй я предложу уже больше ради разнообразия, поскольку в нём есть свои проблемы.

Как добавить сайт в избранное? Второй вариант Раньше функция работала только в Internet Explorer, а после правок в HTML 5 работает в Opera и Mozilla, но не во всех версиях IE и Chrome.

Перед закрывающим тегом head вставляем

function addYoursite() {
if (document.all) window.external.addFavorite("http:/yoursite.ru", "Сайт yoursite.ru");
}

Только соответственно меняем yoursite.ru на адрес Вашего сайта.

Добавить в избранное

И соответственно тоже меняем yoursite.ru на адрес Вашего сайта.

Готово. Проверяем.

С каждым днем увеличивается количество вебмастеров, которые стремятся делать свои сайты одинаково удобными для пользователей всех браузеров, а не затачивают их только под Internet Explorer, как это было раньше. Наверное больше всего пользователи альтернативных браузеров не любят ссылку "Добавить в Избранное", которая встречается на каждом сайте, а работает только в Internet Explorer. Сейчас я расскажу как правильно реализовать на своем сайте данную функцию, чтобы она работала во всех распространенных браузерах.

Так как пользователю может понадобиться добавить в Избранное не только сайт (главную страницу), но и страницу на которой он находится, то мы подробно рассмотрим оба варианта, а вы сами решите какой из них использовать.

Добавить в Избранное главную страницу сайта

Давайте сначала рассмотрим чем отличается ссылка "Добавить в Избранное" для Internet Explorer от ее аналога в других браузерах, а потом обьединим их в одну. В IE используется функция window.external.AddFavorite(), которая принимает два значения: адрес страницы для добавления в закладки и ее название:

Добавить сайт в Избранное

Думаю обьяснять здесь ничего не нужно. А вот следующий пример мы рассмотрим подробнее. Код для добавления в Избранное для Opera, Firefox и Netscape выглядит следующим образом:

Добавить сайт в Избранное

Как видите это обычная ссылка с наличием дополнительного параметра rel="sidebar" который как раз и указывает браузеру на необходимость добавить сайт в закладки при клике на ссылке. Кроме этого в параметре title="" нужно указать с каким именем добавлять сайт в закладки. А вот адрес страницы, которая добавляется, прописывается в href="". Обычно указывается главная страница сайта и его название.

Окошко, которое появляется при нажатии на ссылку

Теперь нам нужно сделать так, чтобы ссылка "Добавить в избранное" работала одинаково хорошо во всех браузерах. Так как код для IE работает только в нем, а параметр rel="sidebar" поддерживают только Opera, Firefox и Netscape, то ничто не мешает нам просто обьединить оба варианта в одну ссылку:

Добавить сайт в Избранное

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

Добавить в Избранное текущую страницу

Итак, давайте снова начнем с Internet Explorer:

Как видите в коде ничего не изменилось, кроме входящих параметров функции window.external.AddFavorite(). В JavaScript-параметре document.title содержится название страницы, которое берется браузером из указанного нами заголовка документа, расположенного между тэгами Название страницы. Адрес текущей страницы браузер получает из адресной строки и присваивает его параметру location.href. Таким образом нет необходимости изменять вручную на каждой странице нужные нам параметры.

Новая закладка в Interet Explorer

С браузерами Opera, Firefox и Netscape все немного сложнее. Нам придется написать небольшую JavaScript-функцию, которая будет работать примерно также как и уже известная нам функция в Internet Explorer. Мы поместим ее внутри ссылки, так что она будет занимать всего лишь одну строку, но для более легкого восприятия я ее немного отформатировал:

Добавить текущую страницу в Избранное

В самом начале мы присвоили переменным url и title значения JavaScript-параметров window.document.location (адрес страницы) и window.document.title (название страницы). Далее мы создаем функцию bookmark(). С ее помощью мы из нескольких переменных, значением которых является адрес и название страницы, генерируем ссылку. Не забываем также о параметре rel="sidebar", который так же будет сгенерирован с помощью bookmark().

Теперь нам осталось обьединить код для Internet Explorer и других браузеров, чтобы получить одну кросбраузерную ссылку:

Добавить текущую страницу в Избранное

У нас уже имеется функция, совместимая с основными браузерами. Теперь нам нужно как то совместить ее с пользователями.

Ломаем стереотипы

Так как многие пользователи альтернативных браузеров уже привыкли к тому что ссылка "Добавить в Избранное" работает только в Internet Explorer и не обращают на нее внимания, то нам нужно как то ненавязчиво показать посетителю что мы позаботились о работоспособности данной ссылки в его браузере. Думаю наиболее удачным вариантом будет определять каким браузером пользуется посетитель нашего сайта и выводить соответствующий логотип возле ссылки. А можно просто вывести сразу все логотипы:

Так выглядит конечный результат

Копирование статьи запрещено.

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

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

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

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

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

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

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

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

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

< !DOCTYPE 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-код:

Добавьте страницу в избранное!

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

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

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