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

В прошлом своём уроке я рассказывала о том, что такое раздел Избранное в ЖЖ. И несмотря на один довольно чувствительный минус, многие всё равно заинтересовались тем, что это такое и как работает (и неудивительно — штука на самом деле хорошая). Так что сегодня я расскажу самое главное — как же добавить интересную запись в избранное, чтобы потом не плутать по ЖЖ в её поисках, а сразу найти.

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

Искать её нужно над текстом записи на небольшой панельки. Она может выглядеть вот так:

Всё зависит от того, какое оформление используется в журнале автора этой записи (или в вашем, если вы смотрите другие журналы в своём оформлении).

Если кнопку вы найти не можете (такое тоже бывает - в ЖЖ очень много стилей оформления, и в некоторых панели с кнопками нет. плюс любой пользователь может самостоятельно настроить дизайн своего журнала), ищите ссылку «В избранное» или «Добавить в избранное» под текстом записи:

В некоторых стилях она доступна уже в ленте друзей. В новой ленте друзей она будет у всех:

Если вы видите такую страницу — ура, вы нашли нужную ссылку или кнопку.

Вариант простой (и в перспективе неудобный)

Собственно, всё, на этом можно и успокоиться: у вас есть папка «Неупорядоченное», где сохранена ссылка на ту самую запись. Если и дальше так же добавлять записи, то они все будут оказывается в неупорядоченном.

Вариант сложнее и удобнее

А можно пойти по более сложному пути и попробовать разобраться, что же есть на промежуточной странице добавления в избранное:

Описание : по умолчанию в нём отображается дата публикации записи и её заголовок. Вы можете написать там что угодно. Например, вместо «2012-12-04: school_lj: Как создать аккаунт в ЖЖ?» просто «Как создать аккаунт в ЖЖ?». Поверьте, это будет гораздо читабельнее
Максимальная длина описания — 40 русских букв (если пишете по-английски, то 80)

Ключевые слова : вы можете добавить одно или несколько ключевых слов для записи, и она будет помещена в категорию с таким названием.
Можно ввести до 5 ключевых слов (то есть одну запись можно поместить в 5 разных категорий), разделяя их запятыми. Каждое ключевое слово должно быть не больше 20 русских букв (40, если пишете по-английски)

Доступ к записи : то есть кто сможет увидеть ваш список избранных записей. По умолчанию они видны всем (а доступ к ним есть из вашего профиля), но вы можете выбрать уровень «Друзья» или «Только мне (личное)». Соответственно, список избранного будет виден только вашим друзьям или только вам.
Обратите внимание, что если вы добавите в избранное подзамочную запись и поставите уровень «Каждому (публичное)», то ссылка на неё будет отображаться в списке, но саму запись те, у кого нет к ней доступа, не увидят.

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

Повторюсь, доступ к Избранному есть из профиля журнала или сообщества. Вот на примере Школы ЖЖ:

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

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

Немного разберём его

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.

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

Хорошо Плохо

Страницы сайтов по своему функционалу стремятся к возможностям полноценных приложений, что, в основном, ложится на плечи JavaScript. Одна из задач, которая возникает у…

Когда размер страницы превосходит некоторый предел, разработчики часто ставят внизу текстовую или графическую ссылку «вверх страницы». Эта ссылка позволяет…

С егодня я вам расскажу об одной полезной функции на сайте - это ссылка, ну или кнопка «Добавить в закладки (избранное)». Эта функция позволяет пользователям добавить понравившуюся страницу вашего сайта в закладки браузера, чтобы в нужный момент быстро и легко получить доступ к ней.

Многие из вас скажут: – «Зачем дублировать функцию браузера, ведь эта кнопка есть в адресной строке?».

Да есть, но она там, во-первых, не очень заметна, во-вторых, некоторые пользователи вообще не знают о ней.

Для улучшения 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 чтобы добавить страницу в закладки», в этих браузерах эта функция выключена из соображений безопасности.