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

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

Как сделать закладку страницы в браузере

В браузерах есть несколько видов закладок:

  • Стандартные закладки;
  • Визуальные закладки;
  • При чем, этот стандарт поддерживают все популярные браузеры: Google Chrome, Opera, Mozilla Firefox, Яндекс браузер.

    Разберемся, как сделать закладку страницы в браузере, каждым из вариантов.

    Как добавить в обычные закладки страницу сайта в браузере

    Чтобы добавить страницу сайта в обычные закладки следует:

  • Открыть страницу, которую следует сохранить;
  • В правом верхнем углу браузера нажать на значок звездочки (в Опере — сердечко).
    Все! Закладка добавлена!
  • Кроме того, можно быстро сохранять страницы в закладки с помощью горячих клавиш: Ctrl+D .

    Как открыть сохраненную закладку

    Дело за малым – нужно узнать, как открыть добавленную в закладки страницу. А сделать это можно несколькими способами:


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

    К сожалению, добавить сайт в визуальные закладки в Гугл Хроме стандартным способом нельзя. В визуальных закладках Хрома показываются самые посещаемые сайты и редактировать их или добавлять новые у пользователя возможности нет. Можно только удалять. Но выход есть! Можно установить расширение .

    С этим расширением последовательность действий для всех браузеров будут практически идентичная.


    Онлайн сервисы для добавления сайтов в закладки

    Альтернативой добавлению закладок стандартными средствами браузера являются онлайн сервисы, которые выполняют все те же функции.

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

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

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

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

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

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

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