Кроссбраузерное добавление страницы в закладки реализуется с использованием 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. Одна из задач, которая возникает у…

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

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

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

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

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

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

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

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

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

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

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

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

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

Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel тега и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.

Достаточно к ссылке добавить rel="sidebar" и при нажатии на нее откроется специальная панель в браузере для создания новой закладки. Пока значение sidebar поддерживают два браузера - Firefox и Opera, остальные игнорируют атрибут rel и переходят по указанной ссылке как обычно.

Чтобы расширить количество браузеров и добавить к ним IE, к ссылке также можно подключить небольшой скрипт. В итоге получится, что Firefox, Opera, Internet Explorer вызовут специальную панель, остальные браузеры перейдут по ссылке (пример 1).

Пример 1. Добавление в избранное

HTML5 IE Cr Op Sa Fx

Добавить в избранное function addBookmark() { if (document.all) window.external..ru"); }

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

Как в итоге выглядит применение rel="sidebar" ? Результат зависит от браузера. Firefox к примеру открывает такое окно (рис. 1).

Рис. 1. Добавление в избранное в Firefox

В Opere вид несколько другой, но смысл аналогичный (рис. 2).

Рис. 2. Добавление в избранное в браузере Opera

У Internet Explorer самый лаконичный интерфейс (рис. 3).

Рис. 3. Добавление в избранное в браузере Internet Explorer

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

Здравствуйте. Поговорим о том, как сделать ссылку или кнопку для добавления в избранное (закладки) для всех браузеров: Chrome, Firefox, Opera, Internet Explorer, Safari — кроссбраузерно, чтобы пользователь при клике на неё смог отложить на будущее и запомнить вашу страницу. Естественно, позаботьтесь о том, чтобы содержание было интересным, иначе никто не будет сохранять её к себе в закладки:)
Итак, поехали.

Что нужно добавить в HTML Добавить в закладки

Код вносите в любое нужное вам место. Все параметры, кроме нижеуказанных, можно изменить или удалить.

  • id="fav"
    Сюда будет писаться инструкция для Chrome, Opera и всех браузеров на движке Webkit
  • rel="sidebar"
    Атрибут обязательный, нужен для Firefox, так он будет определять, что страницу по ссылке нужно отправить в избранное
  • href=""
    Также желательно оставить без изменений. Firefox будет брать ссылку для закладки по этому адресу

    Будь моя воля, заменил бы a на span , но этот вариант не подойдёт под Firefox

  • onclick="addFav()"
    Здесь будет определяться скрипт javascript. О нём далее
Что нужно добавить в JavaScript // Функция для добавления в закладки избранного | https://сайт?p=710 function addFav() { var title = document.title, url = document.location, UA = navigator.userAgent.toLowerCase(), isFF = UA.indexOf("firefox") != -1, isMac = UA.indexOf("mac") != -1, isWebkit = UA.indexOf("webkit") != -1, isIE = UA.indexOf(".net") != -1; if ((isIE || isFF) && window.external) { // IE, Firefox window.external.AddFavorite(url, title); return false; } if (isMac || isWebkit) { // Webkit (Chrome, Opera), Mac document.getElementById("AddFavViaSheens").innerHTML = "Нажмите "" + (isMac ? "Command/Cmd" : "Ctrl") + " + D" для добавления страницы в закладки"; return false; } }

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

Как избежать отображения ссылки для избранного в планшетах и мобильных браузерах

Конечно, нет смысла показывать ссылку для добавления в избранное на мобильных девайсах, она там не будет работать. Поэтому нужно отфильтровать их.
Для этого можно, например, генерировать ссылку с помощью javascript, а в нём уже фильтровать всё как надо

// Функция для определения "мобильности" браузера function MobileDetect() { var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i .test(UA)) ? true: false ; } // Если браузер НЕ мобильный, отображаем ссылку if (!MobileDetect()){ document.getElementById("MyID").innerHTML = "Тут HTML код ссылки (см.выше)"; }

Немного разберём его

  • var UA = navigator.userAgent.toLowerCase(); — записывает в переменную заголовки браузера, переведя их в нижний регистр. По её содержимому мы будем определять «мобильность» браузера.
  • return (/Регулярное выражение/.test(UA) ? true: false) — фильтр. В регулярном выражении записываются фрагментры, которые могут находиться в заголовках мобильных браузеров. Вы можете добавить свои значения, разделяя их | .

    Фильтр чувствителен к регистру. Поэтому, если будете вносить свои значения в фильтр, обязательно записывайте их в нижнем регистре (маленькими буквами).

  • document.getElementById("MyID").innerHTML = "Тут HTML код ссылки"; — ищет в коде тег с id="MyID" и записывает вместо него нашу ссылку. Чтобы сработало, нужно предварительно в место, где отобразить ссылку, записать
Пример готового скрипта и страницы

Подытожу, как в итоге может выглядеть код html

// Функция для определения "мобильности" браузера function MobileDetect() { var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i .test(UA)) ? true: false; } // Если браузер НЕ мобильный, отображаем ссылку if (!MobileDetect()) { document.getElementById("AddFavViaSheens").innerHTML = "Добавить в закладки"; } // Функция для добавления в закладки избранного | https://сайт?p=710 document.getElementById("AddFavViaSheens").onclick = function () { var title = document.title, url = document.location, UA = navigator.userAgent.toLowerCase(), isFF = UA.indexOf("firefox") != -1, isMac = UA.indexOf("mac") != -1, isWebkit = UA.indexOf("webkit") != -1, isIE = UA.indexOf(".net") != -1; if ((isIE || isFF) && window.external) { // IE, Firefox window.external.AddFavorite(url, title); return false; } if (isMac || isWebkit) { // Webkit (Chrome, Opera), Mac document.getElementById("AddFavViaSheens").innerHTML = "Нажмите "" + (isMac ? "Command/Cmd" : "Ctrl") + " + D" для добавления страницы в закладки"; return false; } }

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