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

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

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

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

Во многих интернет-магазинах имеется такая полезная вещь, как функция добавить в избранное , с помощью которой, товар можно без проблем найти в разделе избранное своего личного кабинета. Вот сегодня мы и создадим первую часть данного материала с помощью HTML , CSS и JQUERY , а в следующем материале уже сделаем добавление в избранное на PHP и MYSQL.

По поводу дизайна добавления, я решил сделать свое оформление, которое в принципе, без труда можно будет найти подобное и на других сайтах. Это как говорится, дело принципа, каждому выбирать свое) Пример, оформления Вы можете посмотреть в демо версии или на рисунке ниже.

Первый шаг. HTML.

И так, переходим к первому и самому простому шагу, это написание HTML кода и сначала подключаем все нужные скрипты и стили.

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

Для этого создаем блок с классом favorites , в который помещаем две кнопки add - добавить в избранное и remove - удалить с избранного. Как видим, все очень просто, остается только добавить любую картинку с товаром и на этом можно переходить к следующему шагу JQUERY .

Второй шаг. JQUERY.

Так как, работа с добавлением и удалением с избранного связанна с кликом, поэтому нам нужно начать с события по клику. Внутри документа создаем переменную id , в которую записываем первоначальное состояние с помощью метода hasClass .

После чего создаем условие, в котором обращаясь к переменной id и проверяем, если мы добавили товар, то добавляем класс simple с помощью метода addClass .

И наоборот, если убрали товар с избранного, то удаляем класс simple с помощью метода removeClass .

$(document).on("click", ".favorites", function () { var id = $(this).hasClass("simple"); if (!id) { $(this).addClass("simple"); } else { $(this).removeClass("simple"); } });

Третий шаг. CSS.

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

Product { position: relative; display: inline-block; }

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

В качестве элементов управления, я выбрал inline картинку, поэтому работать будем с ее позиционированием.

Favorites { position: absolute; top: 0; right: 0; width: 55px; height: 55px; z-index: 1; } .favorites .image { position: absolute; width: 55px; height: 55px; background: url("../img/favorites.png") no-repeat; cursor: pointer; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .favorites.simple { background: url("../img/favorites.png") no-repeat 100% 100%; }

Напоследок, нам нужно поработать с классом simple, который будет осуществлять добавление и удаление элементов управления, а также с трансформации и фоновым позиционированием.

Favorites .add { background-position: 0 0; -webkit-transform: rotate3d(1,1,0,0deg); -moz-transform: rotate3d(1,1,0,0deg); -ms-transform: rotate3d(1,1,0,0deg); -o-transform: rotate3d(1,1,0,0deg); transform: rotate3d(1,1,0,0deg); } .favorites.simple .add { -webkit-transform: rotate3d(1,1,0,180deg); -moz-transform: rotate3d(1,1,0,180deg); -ms-transform: rotate3d(1,1,0,180deg); -o-transform: rotate3d(1,1,0,180deg); transform: rotate3d(1,1,0,180deg); } .favorites:hover .add, .favorites.simple .add { background-position: -56px 0; } .favorites .remove{ background-position: -111px 0; -webkit-transform: rotate3d(1,1,0,180deg); -moz-transform: rotate3d(1,1,0,180deg); -ms-transform: rotate3d(1,1,0,180deg); -o-transform: rotate3d(1,1,0,180deg); transform: rotate3d(1,1,0,180deg); } .favorites.simple .remove { -webkit-transform: rotate3d(1,1,0,0deg); -moz-transform: rotate3d(1,1,0,0deg); -ms-transform: rotate3d(1,1,0,0deg); -o-transform: rotate3d(1,1,0,0deg); transform: rotate3d(1,1,0,0deg); } .favorites .remove:hover { background-position: -167px 0; }

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

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

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

Как сделать закладку страницы в браузере

В браузерах есть несколько видов закладок:

Стандартные закладки;

Визуальные закладки;

При чем, этот стандарт поддерживают все популярные браузеры: Google Chrome, Opera, Mozilla Firefox, Яндекс браузер.

Разберемся, как сделать закладку страницы в браузере, каждым из вариантов.

Как добавить в обычные закладки страницу сайта в браузере

Чтобы добавить страницу сайта в обычные закладки следует:

Открыть страницу, которую следует сохранить;

В правом верхнем углу браузера нажать на значок звездочки (в Опере — сердечко).
Все! Закладка добавлена!

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

Как открыть сохраненную закладку

Дело за малым – нужно узнать, как открыть добавленную в закладки страницу. А сделать это можно несколькими способами:

Как добавить сайт в визуальные закладки

К сожалению, добавить сайт в визуальные закладки в Гугл Хроме стандартным способом нельзя. В визуальных закладках Хрома показываются самые посещаемые сайты и редактировать их или добавлять новые у пользователя возможности нет. Можно только удалять. Но выход есть! Можно установить расширение .

С этим расширением последовательность действий для всех браузеров будут практически идентичная.

Онлайн сервисы для добавления сайтов в закладки

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

Напишите пожалуйста Html код чтобы при открытии сайта на экран автоматически выводилось предложение добавить сайт в избранное или закладки браузера. если сайт добавлен в закладки браузера или избранное то предложение не должно появляться.
Заранее благодарен. Константин

Написать то можно такую конструкцию, только получится сложная конструкция.

1) Необходимо вставить всплывающее окно. (Поисковики недолюбливают такие страницы, да и посетители не долюбливают.

2) Каким то образом авторизовать посетителя, ставил он закладку или нет? Для этого надо ставить куки для этого браузера.
(Со временем пользователь прочистит компьютер и удалит все куки, я к примеру делаю это 1 раз в 2 недели.)

3) Написать или использовать код который будет работать и вызывать окно для сохранения закладки.
(То, что работает в браузере Мозила или Firefox, не работает в Opera, или IE, или наоборот!)

4) Дополнительный большой код который должен будет установленный на странице ради того, чтобы посетитель добавил вас в закладки. (Увеличивается время загрузки страницы. Google страшно не любит страницы которые долго грузятся, исключает из поиска такие сайты, Яндекс не любит всё, что всплывает: Popap Popover.)

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

Нашёл в сети код и доработал его, чтобы работал во всех популярных браузерах.

Вод простенький html код:

КОД:

Добавить в закладки браузера.

function addBookmark()
if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Сайт infopodsolnux.ru");

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

Используя данный код вы получаете только текстовую ссылку на вашем сайте: Добавить в избранное

Здесь в этом коде вам нужно прописать ссылки на свой сайт и изменить описание вашего сайта в теге .

Вставляете данный код в то место, где хотите вывести ваше предложение. (Лучше в верхней части сайта.)

При нажатии посетителю выдаётся окно для сохранения закладки в браузере.