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


Здравствуйте. Поговорим о том, как сделать ссылку или кнопку для добавления в избранное (закладки) для всех браузеров: Chrome, Firefox, Opera, Internet Explorer, Safari — кроссбраузерно, чтобы пользователь при клике на неё смог отложить на будущее и запомнить вашу страницу. Естественно, позаботьтесь о том, чтобы содержание было интересным, иначе никто не будет сохранять её к себе в закладки :)
Итак, поехали.

Что нужно добавить в HTML

<a 
id="fav" 
rel="sidebar" 
href="" 
onclick="addFav();return false" 
class="link">Добавить в закладки</a>

Код вносите в любое нужное вам место. Все параметры, кроме нижеуказанных, можно изменить или удалить.

  • id="fav"
    Сюда будет писаться инструкция для Chrome, Opera и всех браузеров на движке Webkit
  • rel="sidebar"
    Атрибут обязательный, нужен для Firefox, так он будет определять, что страницу по ссылке нужно отправить в избранное
  • href=""
    Также желательно оставить без изменений. Firefox будет брать ссылку для закладки по этому адресу

    Будь моя воля, заменил бы a на span, но этот вариант не подойдёт под Firefox

  • onclick="addFav()"
    Здесь будет определяться скрипт javascript. О нём далее

Что нужно добавить в JavaScript

// Функция для добавления в закладки избранного | https://sheensay.ru?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;
  }
}

Код либо выносите во внешний файл, либо располагаете в любом понравившемся месте на странице, например, в разделе <head></head> или перед закрывающим тегом </body>
Код закомментирован, думаю, ничего сложного нет. Если возникнут вопросы — задавайте в комментариях.

Как избежать отображения ссылки для избранного в планшетах и мобильных браузерах

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

    <span id="MyID"></span>

Пример готового скрипта и страницы

Подытожу, как в итоге может выглядеть код html

<span id="AddFavViaSheens">&nbsp;</span>
<script>
    // Функция для определения "мобильности" браузера
    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 = '<a class="link" href="" rel="sidebar" id="fav">Добавить в закладки</a>';
    }
    // Функция для добавления в закладки избранного | https://sheensay.ru?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;
        }
    }
</script>

Данный способ актуален на 2017 год. Не исключено, что со временем новые версии браузеров внесут свои коррективы, и скрипт перестанет работать. Если вы заметите такие сбои, пишите в комментариях, рассмотрим и обновим код.


Так себеНеплохоНормальноХорошоОтлично (14 оценок, в среднем: 4,71 из 5)
Загрузка...


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

Свежие записи

Свежие комментарии