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

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

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

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

Добавь в избранное». Только баннер подразумевает «ручной» вариант добавления страницы в меню «избранное», а не автоматический путем нажатия мышью на сам баннер. Вот простая инструкция как добавить страницу в «избранное». Приводим пример в нескольких браузерах.

Internet Explorer

В этом браузере чуточку сложнее создавать закладки, а точнее неудобнее. Вначале необходимо кликнуть на значок звездочки с плюсом. Он находится сразу под меню. Откроется вкладка – выбираете первый пункт.

Чтобы найти потом свою закладку, вам необходимо нажать на символ звездочки (сразу под меню). Появится список закладок. Ищите там свою.

Mozilla Firefox

В самом верху на панели меню необходимо выбрать вкладку «Закладки» и нажать на нее. При нажатии появится вкладка. Выбираем первый пункт «Добавить страницу в закладки». Нажимаем на этот пункт.

После этого справа вверху появится вот такое вот окошко.

В поле «Имя» вы можете назвать страницу как вам удобно. После того, как вы определились с названием закладки жмите «ок». Чтобы потом найти закладку вам необходимо кликнуть на вкладку «Закладки».

Откроется меню. В нем и ищите свою закладку.

Opera

Абсолютно схожий алгоритм добавления закладок и их поиск, что и в Mozilla Firefox.

Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В 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 непривычно из-за его слабой поддержки браузерами, но потенциал у него огромный, а число значений постепенно расширяется. Так что включать в ссылки его надо.

Всем привет, дорогие читатели Летописей DortX’а! Продолжаем разговор о Яндекс-браузере. Сегодня мы разберёмся с такими вопросами как добавление сайтов в избранное, организация и настройка закладок на любимые сайты.

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

После выполнения этого действия сайт сразу же попадает в избранное. Или в закладки, сути это не меняет. Кому как удобнее называть.
Здесь же Вы можете дать закладке удобное для Вас название и выбрать папку (каталог) для сохранения закладки:

Если Вы включали отображение панели закладок, то закладка, при сохранении в папку под названием «Панель закладок», соответственно, отобразится и на ней:

Яндекс браузер — где найти закладки?

Все сохранённые закладки находятся в соответствующем меню. Чтобы в него попасть, следует:
1. нажать на кнопку «Настройки браузера Yandex»:

2. Выбрать меню «Закладки»
3. Войти в диспетчер закладок.
4. Выбрать нужную папку (по умолчанию — панель закладок).

О закладках в Яндекс браузере

Использование закладок в браузере значительно облегчает серфинг по интернету. Вам не нужно запоминать или куда-либо записывать миллионы ссылок — всё можно хранить прямо в браузере. Не забывайте, что Вы можете давать любое название сохранённой закладке — это делается сразу же после нажатия на звёздочку. А также выбирать подходящий каталог.

Как создать каталог ссылок в Яндекс браузере?

1. Заходим в .
2. Раскрываем меню «Закладки» и нажимаем на «Диспетчер закладок»:


3. Слева выбираем «Другие закладки» и кликаем по этой надписи правой кнопкой мыши.
4. Выбираем «Добавить папку». Я предлагаю Вам назвать папку Полезные инструкции и добавить в неё статьи.

Тема очень популярная. Сервисы с созданием он-лайн закладок пользуются популярностью, но давайте попробуем решить задачу. Не будем использовать сторонний сервис, а решим данную проблему на сайте. В итоге посетитель, нажав на ссылку, сможет добавить сайт в закладки (аналогично 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 на адрес Вашего сайта.

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

Здравствуйте. Поговорим о том, как сделать ссылку или кнопку для добавления в избранное (закладки) для всех браузеров: 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 год. Не исключено, что со временем новые версии браузеров внесут свои коррективы, и скрипт перестанет работать. Если вы заметите такие сбои, пишите в комментариях, рассмотрим и обновим код.