Кроссбраузерное добавление страницы в закладки. Добавить в избранное для всех браузеров Скрипт добавить в избранное для всех браузеров
Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В 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 непривычно из-за его слабой поддержки браузерами, но потенциал у него огромный, а число значений постепенно расширяется. Так что включать в ссылки его надо.
Во многих интернет-магазинах имеется такая полезная вещь, как функция добавить в избранное , с помощью которой, товар можно без проблем найти в разделе избранное своего личного кабинета. Вот сегодня мы и создадим первую часть данного материала с помощью 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 , так как в основном касается трансформации, но что остального, думаю решение вполне себя оправдало.
С каждым днем увеличивается количество вебмастеров, которые стремятся делать свои сайты одинаково удобными для пользователей всех браузеров, а не затачивают их только под 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 и не обращают на нее внимания, то нам нужно как то ненавязчиво показать посетителю что мы позаботились о работоспособности данной ссылки в его браузере. Думаю наиболее удачным вариантом будет определять каким браузером пользуется посетитель нашего сайта и выводить соответствующий логотип возле ссылки. А можно просто вывести сразу все логотипы:
Так выглядит конечный результат
Копирование статьи запрещено.
Напишите пожалуйста 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");
Добавить в избранное
Используя данный код вы получаете только текстовую ссылку на вашем сайте: Добавить в избранное
Здесь в этом коде вам нужно прописать ссылки на свой сайт и изменить описание вашего сайта в теге
.
Вставляете данный код в то место, где хотите вывести ваше предложение. (Лучше в верхней части сайта.)
При нажатии посетителю выдаётся окно для сохранения закладки в браузере.
Interner Exploer
На своём сайте я пошёл немного дальше и создал
маленький блок с пояснением посетителю.
Вот примеры:
Вот код в html который использовал:
КОД: ВЫДЕЛИТЬ ВСЕ
function addBookmark() if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Сайт http://infopodsolnux.ru");
Если Вам понравился
|
В этом коде как и в предыдущем меняем ссылки на ваш сайт и описания.
В стороке: