С
егодня я вам расскажу об одной полезной функции на сайте - это ссылка, ну или кнопка «Добавить в закладки (избранное)». Эта функция позволяет пользователям добавить понравившуюся страницу вашего сайта в закладки браузера, чтобы в нужный момент быстро и легко получить доступ к ней.
Многие из вас скажут: – «Зачем дублировать функцию браузера, ведь эта кнопка есть в адресной строке?».
Да есть, но она там, во-первых, не очень заметна, во-вторых, некоторые пользователи вообще не знают о ней.
Для улучшения 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 чтобы добавить страницу в закладки», в этих браузерах эта функция выключена из соображений безопасности.
Пользователи, бороздя просторы интернета, регулярно находят интересные материалы, картинки, видео или сайты с играми, которые они хотели бы сохранить, чтобы посетить их позже. Некоторые по старинке добавляют ссылки в блокнот, а кто-то открывает любимые веб ресурсы через историю посещений. Но это не самые удобные способы, ведь у всех современных браузеров есть действенная функция, с помощью которой можно быстро (всего в 1 клик) добавить сайт в закладки.
Как сделать закладку страницы в браузереВ браузерах есть несколько видов закладок:
При чем, этот стандарт поддерживают все популярные браузеры: Google Chrome, Opera, Mozilla Firefox, Яндекс браузер.
Разберемся, как сделать закладку страницы в браузере, каждым из вариантов.
Как добавить в обычные закладки страницу сайта в браузереЧтобы добавить страницу сайта в обычные закладки следует:
Все! Закладка добавлена!
Кроме того, можно быстро сохранять страницы в закладки с помощью горячих клавиш: Ctrl+D .
Как открыть сохраненную закладкуДело за малым – нужно узнать, как открыть добавленную в закладки страницу. А сделать это можно несколькими способами:
Как добавить сайт в визуальные закладки
К сожалению, добавить сайт в визуальные закладки в Гугл Хроме стандартным способом нельзя. В визуальных закладках Хрома показываются самые посещаемые сайты и редактировать их или добавлять новые у пользователя возможности нет. Можно только удалять. Но выход есть! Можно установить расширение .
С этим расширением последовательность действий для всех браузеров будут практически идентичная.
Онлайн сервисы для добавления сайтов в закладки
Альтернативой добавлению закладок стандартными средствами браузера являются онлайн сервисы, которые выполняют все те же функции.
Здравствуйте. Поговорим о том, как сделать ссылку или кнопку для добавления в избранное (закладки) для всех браузеров: Chrome, Firefox, Opera, Internet Explorer, Safari — кроссбраузерно, чтобы пользователь при клике на неё смог отложить на будущее и запомнить вашу страницу. Естественно, позаботьтесь о том, чтобы содержание было интересным, иначе никто не будет сохранять её к себе в закладки:)
Итак, поехали.
Код вносите в любое нужное вам место. Все параметры, кроме нижеуказанных, можно изменить или удалить.
- id="fav"
Сюда будет писаться инструкция для Chrome, Opera и всех браузеров на движке Webkit - rel="sidebar"
Атрибут обязательный, нужен для Firefox, так он будет определять, что страницу по ссылке нужно отправить в избранное - href=""
Также желательно оставить без изменений. Firefox будет брать ссылку для закладки по этому адресуБудь моя воля, заменил бы a на span , но этот вариант не подойдёт под Firefox
- onclick="addFav()"
Здесь будет определяться скрипт javascript. О нём далее
Код либо выносите во внешний файл, либо располагаете в любом понравившемся месте на странице, например, в разделе или перед закрывающим тегом
Код закомментирован, думаю, ничего сложного нет. Если возникнут вопросы — задавайте в комментариях.
Конечно, нет смысла показывать ссылку для добавления в избранное на мобильных девайсах, она там не будет работать. Поэтому нужно отфильтровать их.
Для этого можно, например, генерировать ссылку с помощью 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 год. Не исключено, что со временем новые версии браузеров внесут свои коррективы, и скрипт перестанет работать. Если вы заметите такие сбои, пишите в комментариях, рассмотрим и обновим код.
Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В 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 непривычно из-за его слабой поддержки браузерами, но потенциал у него огромный, а число значений постепенно расширяется. Так что включать в ссылки его надо.
В этой статье будет рассказано о разных способах добавления папок, файлов и программ в список «Избранное» файлового менеджера операционной системы Windows - Проводник.
В операционной системе Windows, в Проводнике находится список «Избранное». В этот список операционной системой по умолчанию добавляются ссылки на определенные папки (например, «Рабочий стол»), а также на папки некоторых программ, после их установки (например, папки облачных файловых хранилищ Google Drive, OneDrive, Яндекс.Диск и других).
В список «Избранное» легко можно добавить другие новые папки, или удалить находящиеся там папки из списка «Избранное».
Сначала рассмотрим добавление ссылок на папки в список «Избранное», а также их удаление из этого списка.
Удаление папки из ИзбранноеДля удаления папки из списка «Избранное» нужно просто подвести курсор мыши к нужной папки и нажать на правую кнопку мыши. В контекстном меню нужно выбрать пункт «Удалить» и после этого папка будет удалена из этого списка.
Для добавления новой папки в «Избранное» необходимо сначала открыть Проводник. Затем потребуется выбрать нужную папку и просто перетащить ее, удерживая при этом кнопку мыши, в окно Проводника в список «Избранное». При этом около перетаскиваемой папки будет видна надпись «Создать ссылку в Избранное».
Добавить папку можно и другим способом. Для этого нужно открыть Проводник, а затем в окне Проводника открыть папку, которую требуется добавить в список «Избранное». На этом изображении выбрана папка «CD-DVD».
После этого в «Избранное» появляется новая папка, на приведенном примере - папка «CD-DVD».
После удаления расположенных по умолчанию ссылок на папки вы можете их восстановить. Для этого нужно щелкнуть правой кнопкой мыши по «Избранное», а затем в контекстном меню выбрать пункт «Восстановить избранные ссылки».
Удаленные ссылки на папки, которые были установлены по умолчанию в «Избранное», будут восстановлены. Это действие не затронет ранее добавленные папки в «Избранное», ссылки на эти папки останутся в списке «Избранное».
Описанными выше способами нельзя добавить в «Избранное» ярлыки программ. При попытке переместить ярлык программы в «Избранное», появляется запись «Не удалось поместить в “Избранное”».
Это препятствие можно обойти обходным путем, открыв для этого папку «Ссылки», в которой находится содержимое списка «Избранное».
Если у программы, которую необходимо будет добавить в «Избранное», нет ярлыка, то нужно создать ярлык для этой программы и отправить его на Рабочий стол.
Ярлык для программы создается таким способом - меню «Пуск» => «Все программы» => Выбираете программу и щелкаете по ней правой кнопкой мыши => в контекстном меню выбираете «Создать ярлык» => «Создать ярлык в данной папке нельзя. Поместить его на рабочий стол?» => «Да». Теперь ярлык выбранной программы помещен в папку Рабочий стол.
После того, как в Проводнике была открыта папка с ярлыком программы или ярлык выбранной программы находится на Рабочем столе, нужно открыть меню «Пуск» и в самом правом верхнем углу открыть свою персональную папку (название вашей папки пользователя). Содержимое списка «Избранное» находится в папке «Ссылки».
Откройте Проводник, а затем перетащите ярлык программы в папку «Ссылки» из папки, в которой находится ярлык выбранной программы. Если ярлык выбранной программы находится на Рабочем столе, то просто перетащите мышью этот ярлык в папку «Ссылки».
На изображении я перетащил ярлык программы Skype в папку «Ссылки», и сразу после этого ярлык «Skype» появился в списке «Избранное». В списке «Избранное» ярлыки программ отображаются без стрелки.
Точно таким образом можно добавлять в список «Избранное» отдельные файлы. Сначала нужно выбрать файл, который будет помешен в список «Избранное».
Для примера я выбрал «документ Word» с именем «Вопросы». По выбранному файлу нужно будет нажать правой кнопкой мыши, а в контекстном меню выбрать пункт «Создать ярлык».
Перед перемещением ярлыка файла, с ярлыка файла можно убрать окончание - «Ярлык», чтобы имя ярлыка не отличалось от имени файла. Так просто внешне красивее будет выглядеть этот ярлык.
Для этого кликните правой кнопкой мыши по ярлыку, а в контекстном меню выберите пункт «Переименовать», а затем уберите лишние слова из названия ярлыка файла.
После этих действий требуется открыть папку «Ссылки, для этого необходимо пройти по такому пути — меню «Пуск» => «Открытие персональной папки» => «Ссылки».
Теперь перетащите ярлык файла из папки, в которой он сейчас находится, в открытую папку «Ссылки». Сразу после этого ярлык файла «Вопросы» появляется в списке «Избранное».
Для того, чтобы удалить добавленные программы и файлы из списка Избранное» нужно подвести курсор мыши к выбранному файлу и в контекстном меню выбрать пункт «Удалить».
Выводы статьиПри необходимости, пользователь может добавить файлы и папки в список «Избранное» Проводника Windows. Если программа или файл не нужны в избранном, их можно оттуда удалить.
