Добавить в избранное. Кроссбраузерное добавление страницы в закладки Скрипт который добавляет просмотренные страницы в избранное

Во многих интернет-магазинах имеется такая полезная вещь, как функция добавить в избранное , с помощью которой, товар можно без проблем найти в разделе избранное своего личного кабинета. Вот сегодня мы и создадим первую часть данного материала с помощью 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="sidebar" .

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

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

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

Но помните, что в браузере Google Chrome невозможно добавить сайт в закладки с помощью кнопки на сайте. Для этого есть специальная комбинация клавиш: 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");

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

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

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

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

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

Interner Exploer

На своём сайте я пошёл немного дальше и создал
маленький блок с пояснением посетителю.

Вот примеры:

Вот код в html который использовал:

КОД: ВЫДЕЛИТЬ ВСЕ

function addBookmark() if (document.all) window.external.addFavorite("http://infopodsolnux.ru/", "Сайт http://infopodsolnux.ru"); Внимание! Если Вам понравился наш сайт, то вы можете добавить его в закладку вашего браузера. width="139">

В этом коде как и в предыдущем меняем ссылки на ваш сайт и описания.

В стороке:

, можете менять толщину и цвет рамки, отступы внутри таблицы, ширину таблицы, её выравнивание и фоновый цвет самого блока.

border: 1px solid #ff1919″ /* Рамка в 1 пиксель, цвет=#ff1919 стоит красный */
cellpadding=»5″ /* Отступ от края таблица, чтобы текст не прилипал к рамке */
width=»160″ /* Ширина таблицы в пикселях */
align=»center» /* Выравнивание таблицы по средине */
bgcolor=»#ffffff /* Цвет фона в таблице цвет=#ffffff стоит белый */

В коде также нужно поменять и ссылку на вашу кнопку:
Абсолютная ссылка на изображение кнопки и её размеры.

Просмотреть примеры работы кнопки добавления в избранное или в закладки можно на этом сайте на страницах с описаниями видеокурсов и на сайте Байк Шоу: http://showsbike.narod.ru/

Да чуть не забыл, в своих блоках я использовал кнопки с названиями: Создать Закладку
Сделать такую кнопочку можно на сервисе кнопок: http://cooltext.com/Buttons

(Сайт правда на английском языке но разобраться не трудно, а если вы мой подписчик на видеоуроки по созданию сайта на Яндекс Народе, то вы получали ссылку на урок по созданию кнопок в этом сервисе.)

Как вставить данный html код на сайте сделанном в конструкторе на Яндекс Народе, для этого используем модуль вставка произвольного кода на сайт < >.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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