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

Скачать Viber 27.07.2019
Скачать Viber

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


Так выглядит конечный результат

Копирование статьи запрещено.

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

Главная причина создания раздела с закладками заключается в упрощении и ускорении сёрфинга. Имея избранное в Yandex browser, можем перейти на любой сайт из сформированного списка всего в один клик. Без панели закладок приходилось бы всегда вводить URL-адрес ресурса.

Почему это удобно:

  • Можем сохранять ссылку на любую страницу ресурса, а не только на главную страницу;
  • Доступ ко всем ссылкам в один клик;
  • Простая настройка расположения элементов;
  • Возможность быстрого переноса закладок между браузерами;
  • Есть функция создания групп закладок. Их можем распределить по любым критериям (работа, развлечения, по определённым тематикам и т. д.)

Единственный недостаток закладок – придётся потратить время на их настройку и подготовку, но уже отобранные ссылки помогут постоянно оставаться на связи.

Где находится избранное в Яндекс браузере?

Стандартно раздел закладок располагается на отдельной странице, но по желанию можем сделать выносную панель, размещаемую под адресной строкой в браузере. Второй вариант удобен для активных пользователей браузера.

Перейти на нужную вкладку можем пятью способами:


Чтобы было проще найти избранное в Яндекс браузере и не переходить каждый раз в этот раздел, лучше сделать видимой панель закладок. Рассмотрим 3 основных способа активировать панель с выбранными вкладками:


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

Разработчики Яндекс обозревателя специально сделали много способов добавления элементов в закладки, чтобы мы смогли предельно просто пользоваться функцией.

Четыре способа внести сайт в избранное:

  • Со значка «звездочка» в адресной строке. Простейший способ добавления – нажимаем на иконку звезды с правой стороны строки поиска. Указываем название и группу, в которую вносим сайт, затем кликаем по кнопке «Готово». (Начиная с версии браузера 18.10.2.163 элемент «звездочка» отсутствует). Взамен ему появился элемент «флажок».
  • Со значка «флажок» в умной строке. Жмем на иконку флажка справа, далее указываем месторасположение закладки с помощью кнопок «Панель закладок» или «Другие закладки» и кликаем на кнопку «Готово». Также можем создать свою собственную папку через кнопку «Другая папка».
  • Через меню обозревателя. Нажимаем на кнопку меню (3 параллельные черты), открываем выпадающий список «Закладки» и кликаем на «Создать закладку».
  • Горячими кнопками. Простой способ создать избранное в Яндексе браузере — нажать комбинацию клавиш Ctrl + D .
  • Через «Диспетчер закладок». Переходим по ссылке browser://bookmarks/#1 , делаем клик по кнопке «Действия» и выбираем «Добавить страницу».
  • Как перенести закладки?

    Избранное хранится в Яндекс браузере постоянно, и оно не удаляется вместе с очисткой истории или кэша. Если выполнен вход в собственный аккаунт, закладки синхронизируются между устройствами. При переустановке браузера отобранные сайты пропадают, но как только выполним вход в профиль, они автоматически появятся в обозревателе.

    Yandex browser поддерживает функцию экспорта и импорта закладок. С помощью функции экспорта можем сохранить избранное в специальный файл, который легко импортируется в другой браузер. Так удаётся просто переносить закладки между браузерами, устройствами и появляется возможность делать резервные копии выбранных закладок.

    Импорт и экспорт выполняются одинаково:


    Как упорядочить избранное в Яндекс браузере?

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

    Можем управлять закладками одним из удобных вариантов:


    Избранное в Яндекс браузере – это удобный и практичный инструмент для сёрфинга, здесь можем создать, найти и упорядочить все сайты в несколько кликов. Изначально потребуется всего 10-15 минут времени, чтобы сделать и настроить закладки, затем доступ к сайтам станет в разы быстрее и легче.

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

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

    В операционной системе Windows, в Проводнике находится список «Избранное». В этот список операционной системой по умолчанию добавляются ссылки на определенные папки (например, «Рабочий стол»), а также на папки некоторых программ, после их установки (например, папки облачных файловых хранилищ Google Drive, SkyDrive (OneDrive), Яндекс.Диск и других).

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

    Сначала рассмотрим добавление ссылок на папки в список «Избранное», а также их удаление из этого списка.

    Удаление папки из Избранное

    Для удаления папки из списка «Избранное» нужно просто подвести курсор мыши к нужной папки и нажать на правую кнопку мыши. В контекстном меню нужно выбрать пункт «Удалить» и после этого папка будет удалена из этого списка.

    Добавление папки в Избранное

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

    Добавить папку можно и другим способом. Для этого нужно открыть Проводник, а затем в окне Проводника открыть папку, которую требуется добавить в список «Избранное». На этом изображении выбрана папка «CD-DVD».

    После этого в «Избранное» появляется новая папка, на приведенном примере - папка «CD-DVD».

    Восстановление удаленных папок в Избранное

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

    Удаленные ссылки на папки, которые были установлены по умолчанию в «Избранное», будут восстановлены. Это действие не затронет ранее добавленные папки в «Избранное», ссылки на эти папки останутся в списке «Избранное».

    Добавление программ в Избранное

    Описанными выше способами нельзя добавить в «Избранное» ярлыки программ. При попытке переместить ярлык программы в «Избранное», появляется запись «Не удалось поместить в “Избранное”».

    Это препятствие можно обойти обходным путем, открыв для этого папку «Ссылки», в которой находится содержимое списка «Избранное».

    Если у программы, которую необходимо будет добавить в «Избранное», нет ярлыка, то нужно создать ярлык для этой программы и отправить его на Рабочий стол.

    Ярлык для программы создается таким способом - меню «Пуск» => «Все программы» => Выбираете программу и щелкаете по ней правой кнопкой мыши => в контекстном меню выбираете «Создать ярлык» => «Создать ярлык в данной папке нельзя. Поместить его на рабочий стол?» => «Да». Теперь ярлык выбранной программы помещен в папку Рабочий стол.

    После того, как в Проводнике была открыта папка с ярлыком программы или ярлык выбранной программы находится на Рабочем столе, нужно открыть меню «Пуск» и в самом правом верхнем углу открыть свою персональную папку (название вашей папки пользователя). Содержимое списка «Избранное» находится в папке «Ссылки».

    Откройте Проводник, а затем перетащите ярлык программы в папку «Ссылки» из папки, в которой находится ярлык выбранной программы. Если ярлык выбранной программы находится на Рабочем столе, то просто перетащите мышью этот ярлык в папку «Ссылки».

    На изображении я перетащил ярлык программы Skype в папку «Ссылки», и сразу после этого ярлык «Skype» появился в списке «Избранное». В списке «Избранное» ярлыки программ отображаются без стрелки.

    Добавление файлов в Избранное

    Точно таким образом можно добавлять в список «Избранное» отдельные файлы. Сначала нужно выбрать файл, который будет помешен в список «Избранное».

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

    Перед перемещением ярлыка файла, с ярлыка файла можно убрать окончание - «Ярлык», чтобы имя ярлыка не отличалось от имени файла. Так просто внешне красивее будет выглядеть этот ярлык. Для этого кликните правой кнопкой мыши по ярлыку, а в контекстном меню выберите пункт «Переименовать», а затем уберите лишние слова из названия ярлыка файла.

    После этих действий требуется открыть папку «Ссылки, для этого необходимо пройти по такому пути — меню «Пуск» => «Открытие персональной папки» => «Ссылки». Теперь перетаскиваете ярлык файла из папки, в которой он сейчас находится, в открытую папку «Ссылки». Сразу после этого ярлык файла «Вопросы» появляется в списке «Избранное».

    Для того, чтобы удалить добавленные программы и файлы из списка Избранное» нужно подвести курсор мыши к выбранному файлу и в контекстном меню выбрать пункт «Удалить».

    Выводы статьи

    При необходимости, пользователь может добавить файлы и папки в список «Избранное» Проводника Windows.

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



    Рекомендуем почитать

    Наверх