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

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

Отчасти это связанно с тем, что ведущие сео блоги (куда обращены все взоры начинающих и не очень начинающих вебмастеров) ориентированы на свою возрастную аудиторию, которая в основной своей массе пользуется RSS ридерами или вовсе Твиттером. Сейчас действительно очень редко где можно встретить кнопочку – “добавить страницу в закладки”. А вот и зря! Некоторые тематики подразумевают более возрастную группу, которая с большим трудом переваривает “нововведения” вроде twitter’ов, и даже RSS ридеров, которые уже давно вошли в обиход.

Таким людям гораздо понятнее закладочка – Избранное , где все сайты лежат отсортированными в любимом браузере.

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

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

Итак, задача – разместить на сайте кроссбраузерную кнопку “Добавить в Закладки” или “Добавить в Избранное” – как вам больше нравится. Главное, повторюсь – это кроссбраузерность, т.е. работоспособность этой кнопки в ведущих браузерах – Google Chrome, Mozilla Firefox, Opera, Internet Explorer.

Скажете легкая задачка?! Отнюдь – все проблемы кроются в универсальности кода, в его кроссбраузерности . Один код подходит только для Internet Explorer’a и не работает для других браузеров.

Вот пример, который наиболее распространен в интернете.

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

Или вот вариант простенького, но бесполезного java скрипта:

Add this Page to your Favorites

Данные коды работают только с браузером Internet Еxplorer! Чтобы скрипт по добавлению закладки был действительно кроссбраузерным, в нем должна быть встроена проверка браузера клиента и в зависимости от браузера использоваться соответствующий код добавления в закладки .

Данный скрипт работает с бразуерами Firefox, Opera, но вот Гугловский Хром его не понимает и в выводит предложение нажать Ctrl + D добавив таким образом страницу в закладки.

Но это лучшее, что мне удалось накопать на просторах интернета (установка антенн не в счёт!).

Кроссбраузерный скрипт:

< script type="text/javascript">
function getBrowserInfo() {
var t,v = undefined;

if (window.chrome) t = "Chrome";
else if (window.opera) t = "Opera";
else if (document.all) {
t = "IE";
var nv = navigator.appVersion;
var s = nv.indexOf("MSIE")+5;
v = nv.substring(s,s+1);
}
else if (navigator.appName) t = "Netscape";

return {type:t,version:v};
}

function bookmark(a){
var url = window.document.location;
var title = window.document.title;
var b = getBrowserInfo();

if (b.type == "IE" && 8 > = b.version && b.version > = 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) вашей темы.

Если у вас будет решение – как добавить функцию добавления в закладки для браузера Хром в скрипт, тогда отзовитесь, пожалуйста, в комментариях!

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

Что ж, пришло время написать несколько коротеньких постов на в общем-то полезные темы!

Одна барышня, попросившая организовать на её сайте кнопку «добавить страницу в избранное браузера», заодно поинтересовалась, как у меня устроен фиксированный сайдбар и меню.?. и коли эти функции кого-то интересуют, — значит, возможно, потребуются и посты.

Сегодня прикрутим и настроим на сайте кнопку «страницу в избранное».

Я, признаться, у себя на блоге такое чудо не использую: не знаю, как-то не раскушал прок… Но если у вас появилось желание реализовать такую кнопочку «у себя…», давайте приступим. Дело очень простое — займёт минут десять труда и, к тому же, как бы то ни было — очень полезное принципиальное 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