Добавить в избранное для всех браузеров. Добавить в избранное Скрипт добавить в избранное для всех браузеров
С
егодня я вам расскажу об одной полезной функции на сайте - это ссылка, ну или кнопка «Добавить в закладки (избранное)». Эта функция позволяет пользователям добавить понравившуюся страницу вашего сайта в закладки браузера, чтобы в нужный момент быстро и легко получить доступ к ней.
Многие из вас скажут: – «Зачем дублировать функцию браузера, ведь эта кнопка есть в адресной строке?».
Да есть, но она там, во-первых, не очень заметна, во-вторых, некоторые пользователи вообще не знают о ней.
Для улучшения 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 чтобы добавить страницу в закладки», в этих браузерах эта функция выключена из соображений безопасности.
Во многих интернет-магазинах имеется такая полезная вещь, как функция добавить в избранное , с помощью которой, товар можно без проблем найти в разделе избранное своего личного кабинета. Вот сегодня мы и создадим первую часть данного материала с помощью 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 , так как в основном касается трансформации, но что остального, думаю решение вполне себя оправдало.
Покопавшись, в итоге наашел красивое решение, работает во всех браузерах.
function add2Fav(x){ if (document.all && !window.opera) { if (typeof window.external == "object") { window.external.AddFavorite(document.location, document.title); return true; } else return false; } else{ x.href=document.location; x.title=document.title; x.rel = "sidebar"; return true; } }
Добавить в избранное
Добавить в избранное - скрипт для всех браузеров Добавить в избранноеМеняем Название Сайта и URL в 2х местах! Работает везде без ошибок)
Сделать стартовой - скрипт для IE Сделать стартовойМеняем URL в 2х местах! Работает только в IE
JavaScript Ссылка "Добавить в избранное" для всех браузеровСкрипт найден в google и доработан с учетом нынешних реалий, а именно - наличия уже 8й версии IE и браузера Chrome (который в оригинальном виде скриптом определялся как Netscape и ни каких действий в результате не производилось). Если браузер не поддерживает добавление в закладки через скрипт - пользователю будет показано сообщение о том что добавить в закладки можно нажатием Ctrl-D.
Поместите эти функции в заголовок страницы:
function getBrowserInfo() { var t,v = undefined; if (window.chrome) t = "Chrome"; else if (window.opera) t = "Opera"; else if (document.all) { t = "IE"; var nv = navigator.appVersion; var s = nv.indexOf("MSIE")+5; v = nv.substring(s,s+1); } else if (navigator.appName) t = "Netscape"; return {type:t,version:v}; } function bookmark(a){ var url = window.document.location; var title = window.document.title; var b = getBrowserInfo(); if (b.type == "IE" && 8 >= b.version && b.version >= 4) window.external.AddFavorite(url,title); else if (b.type == "Opera") { a.href = url; a.rel = "sidebar"; a.title = url+","+title; return true; } else if (b.type == "Netscape") window.sidebar.addPanel(title,url,""); else alert("Нажмите CTRL-D, чтобы добавить страницу в закладки."); return false; }
Пользователи, бороздя просторы интернета, регулярно находят интересные материалы, картинки, видео или сайты с играми, которые они хотели бы сохранить, чтобы посетить их позже. Некоторые по старинке добавляют ссылки в блокнот, а кто-то открывает любимые веб ресурсы через историю посещений. Но это не самые удобные способы, ведь у всех современных браузеров есть действенная функция, с помощью которой можно быстро (всего в 1 клик) добавить сайт в закладки.
Как сделать закладку страницы в браузереВ браузерах есть несколько видов закладок:
При чем, этот стандарт поддерживают все популярные браузеры: Google Chrome, Opera, Mozilla Firefox, Яндекс браузер.
Разберемся, как сделать закладку страницы в браузере, каждым из вариантов.
Как добавить в обычные закладки страницу сайта в браузереЧтобы добавить страницу сайта в обычные закладки следует:
Все! Закладка добавлена!
Кроме того, можно быстро сохранять страницы в закладки с помощью горячих клавиш: Ctrl+D .
Как открыть сохраненную закладкуДело за малым – нужно узнать, как открыть добавленную в закладки страницу. А сделать это можно несколькими способами:
Как добавить сайт в визуальные закладки
К сожалению, добавить сайт в визуальные закладки в Гугл Хроме стандартным способом нельзя. В визуальных закладках Хрома показываются самые посещаемые сайты и редактировать их или добавлять новые у пользователя возможности нет. Можно только удалять. Но выход есть! Можно установить расширение .
С этим расширением последовательность действий для всех браузеров будут практически идентичная.
Онлайн сервисы для добавления сайтов в закладки
Альтернативой добавлению закладок стандартными средствами браузера являются онлайн сервисы, которые выполняют все те же функции.
Тема очень популярная. Сервисы с созданием он-лайн закладок пользуются популярностью, но давайте попробуем решить задачу. Не будем использовать сторонний сервис, а решим данную проблему на сайте. В итоге посетитель, нажав на ссылку, сможет добавить сайт в закладки (аналогично 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
Пример работы Добавления вкладок
Добавить ссылку в избранное
На самом деле я бы рекомендовал остановиться на этом варианте. Второй я предложу уже больше ради разнообразия, поскольку в нём есть свои проблемы.
Перед закрывающим тегом head вставляем
function addYoursite() {
if (document.all) window.external.addFavorite("http:/yoursite.ru", "Сайт yoursite.ru");
}
Только соответственно меняем yoursite.ru на адрес Вашего сайта.
И соответственно тоже меняем yoursite.ru на адрес Вашего сайта.
Готово. Проверяем.