Новости звезд
Добавить в избранное. Кроссбраузерное добавление страницы в закладки Добавь ее в избранное
Здравствуйте. Поговорим о том, как сделать ссылку или кнопку для добавления в избранное (закладки) для всех браузеров: 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 год. Не исключено, что со временем новые версии браузеров внесут свои коррективы, и скрипт перестанет работать. Если вы заметите такие сбои, пишите в комментариях, рассмотрим и обновим код.
Тема очень популярная. Сервисы с созданием он-лайн закладок пользуются популярностью, но давайте попробуем решить задачу. Не будем использовать сторонний сервис, а решим данную проблему на сайте. В итоге посетитель, нажав на ссылку, сможет добавить сайт в закладки (аналогично Ctrl+D и тп).
Как добавить сайт в закладки (избранное)? Используем JavaScript Создаём файл с названием bookmark.js . В него вставляем указанный ниже код.Код JavaScript (файл bookmark.js )
Function AddToBookmark(a)
{
var title = window.document.title; // запоминаем заголовок активной страницы/вкладки
var url = window.document.location; // адрес тоже запоминаем
If (window.sidebar) { // такой объект есть только в Gecko
window.sidebar.addPanel(title, url, ""); // используем его метод добавления закладки
}
else if (typeof(opera)=="object") { // есть объект opera?
a.rel="sidebar"; // добавлем закладку, смотрите вызов функции ниже
a.title=title;
a.url=url;
return true;
}
else if(document.all) { // ну значит это Internet Explorer
window.external.AddFavorite(url, title); // используем соответсвующий метод
}
else {
alert("Для добавления страницы в Избранное нажмите Ctrl+D"); // для всех остальных браузеров, в т.ч. Chrome
}
Return false;
}
Ну и чтобы скрипт заработал, достаточно подключить файл bookmark.js
и вставить ссылку с js
, которая при клике вызывала бы работу скрипта.
Код HTML
Пример работы Добавления вкладок
Добавить ссылку в избранное
На самом деле я бы рекомендовал остановиться на этом варианте. Второй я предложу уже больше ради разнообразия, поскольку в нём есть свои проблемы.
Перед закрывающим тегом head вставляем
function addYoursite() {
if (document.all) window.external.addFavorite("http:/yoursite.ru", "Сайт yoursite.ru");
}
Только соответственно меняем yoursite.ru на адрес Вашего сайта.
И соответственно тоже меняем yoursite.ru на адрес Вашего сайта.
Готово. Проверяем.
Кроссбраузерное добавление страницы в закладки реализуется с использованием 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 в этой ситуации молча обламываются.
Что ж, пришло время написать несколько коротеньких постов на в общем-то полезные темы!
Одна барышня, попросившая организовать на её сайте кнопку «добавить страницу в избранное браузера», заодно поинтересовалась, как у меня устроен фиксированный сайдбар и меню.?. и коли эти функции кого-то интересуют, — значит, возможно, потребуются и посты.
Сегодня прикрутим и настроим на сайте кнопку «страницу в избранное».
Я, признаться, у себя на блоге такое чудо не использую: не знаю, как-то не раскушал прок… Но если у вас появилось желание реализовать такую кнопочку «у себя…», давайте приступим. Дело очень простое — займёт минут десять труда и, к тому же, как бы то ни было — очень полезное принципиальное js-познание…
В следующих статьях реализуем «прилепленное» меню и сайдбар (ссылки на эти статьи в комментариях )…
Разделы статьи:
создаём кнопку «добавить в избранное»…Что нам для этого потребуется?..
Во-первых: определиться с географией расположения сего элемента) От этого будет зависеть «устройство» селекторов css.
В-вторых, конечно же, не забыть сделать бэкап сайта.
И коли определённость и осторожность … достигнуты) — смело заходим в файловую директорию (ядро) своего шаблона; отыскиваем папку с именем js — если её нет — создаём новенькую, эта папка ещё потребуется много раз для иных полезных файлов: например, когда расширяем функционал визуального текстового редактора, скажем, добавляем свои …
Итак: в созданной, или уже существующей папке под именем js , теперь необходимо создать js-файл… в который поместим необходимую на сегодня функцию.
нам требуется к так называемому событию onClick какого-то элемента сайта прикрутить определённую JavaScript-функцию: сегодня — это строки данные чуть ниже.
Добавить в закладки
Продолжим… дадим новому файлу понятное имя, такое, чтобы в дальнейшем было легко определить его назначение…
Назовём, скажем, function-isbranoe.js (имя можете выбрать своё собственное).
Теперь в созданный файл пропишем такие чудо-строки: т.е саму 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; }
Практически всё готово! остаётся только расположить «физически» саму кнопку во фронтенде сайта: где-то в сайдбаре, ну или ещё как-то…
Как вы поняли, для привязки элемента кнопки на сайт, всего-навсего нужно дописать строку показанную в самом верху: это обычная в общем-то ссылка, обыгранная полезным эфектом Js-функции.
стили css для кнопки «добавить страничку в избранное»…Например, так: у меня этот класс miha-isbraly .
Получится как-то так…
Страницу в избранное!
А вот примерные стили:
Miha-isbraly a { background: #fff; color: rgb(0, 132, 143); border-radius: 4px 4px; box-shadow: 1px 0 1px 0 #b7b7b7; border: 1px solid #ccc; text-decoration: none; }
Завершение:
Все наши наработки необходимо связать в единый цикл…
Открываем файл footer.php и перед закрывающем тегом прописываем строку-привязку нашего созданного js файла: т.е подключим его, указав путь для системы WP…
А именно: поместите такой код (который, кстати сказать, можно дополнять и иными js строками, но — я бегу — обо всём по порядку…)
/** добавим в футер wp_footer скрипты js **/
function functionss_add_js_my_scr (){
echo
= 4) window.external.AddFavorite(url,title);
else if (b.type == "Opera") {
a.href = url;
a.rel = "sidebar";
a.title = url+","+title;
return true;
}
else if (b.type == "Netscape") window.sidebar.addPanel(title,url,"");
else alert("Нажмите CTRL-D, чтобы добавить страницу в закладки.");
return false;
}
<
/script>
Добавить в избранное
<
/a
>
Для использования этого скрипта на своем сайте, надо добавить верхнюю часть, которая между тэгами < script type="text/javascript" > и в заколовок (header) вашей темы.
Если у вас будет решение – как добавить функцию добавления в закладки для браузера Хром в скрипт, тогда отзовитесь, пожалуйста, в комментариях!
