2 способа установки кнопки «Добавить сайт в закладки»

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

На этой диаграмме мы видим, что трафик с закладок занимает второе место среди источников.

трафик с закладок

Давайте рассмотрим два быстрых способа установки такой кнопки на сайт.

Кросс-браузерная кнопка «Добавить сайт в закладки» на jQuery

Скрипт на jQuery для кнопки «Добавить сайт в закладки» работает на всех браузерах. Чтобы подключить его к себе на сайт, нужно создать файл с расширением js. Назовем его bookmark.js и скопируем в него содержимое скрипта.

JS
(function ($) {
    'use strict';

    jQuery(document).ready(function () {

/**
 *  Добавить в закладки
 * */

//  Сначала мы определяем элемент, в котором действие «Добавить в закладку» будет срабатывать
var triggerBookmark = $(".js-bookmark"); // Это должен быть тег `a`

triggerBookmark.click(function() {
    
    if (window.sidebar && window.sidebar.addPanel) { // Firefox <23
        
        window.sidebar.addPanel(document.title,window.location.href,'');

    } else if(window.external && ('AddFavorite' in window.external)) { // Internet Explorer

        window.external.AddFavorite(location.href,document.title); 

    } else if(window.opera && window.print || window.sidebar && ! (window.sidebar instanceof Node)) { // Opera <15 и Firefox >23
        /**
         *  Для Firefox <23 и Opera <15 нет необходимости добавлять JS в закладки
         * Единственное, что нужно, это `title` and a `rel="sidebar"`
         */
        triggerBookmark.attr('rel', 'sidebar').attr('title', document.title);
        return true;
    
    } else { // Для других браузеров (в основном WebKit) мы используем простое оповещение, чтобы информировать пользователей о том, что они могут добавлять в закладки с помощью ctrl + D / cmd + D
        
        alert('Вы можете добавить эту страницу в закладки, нажав ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D на клавиатуре.');
    
    }
    // Если у вас есть что-то в `href` вашего триггера
    return false;
});

  });

})(jQuery);

Теперь этот файл загрузите в папку JS вашего сайта и вставьте данную строчку перед закрывающим тегом </body> на всех страницах, где вам нужна кнопка.

Для HTML сайтов
<script src="js/bookmark.js"></script> 

Чтобы правильно подключить скрипт на WordPress, откройте файл functions.php и добавьте этот код:

PHP
/**
Enqueues scripts Bookmark.
*/
function webkato_scripts() {
wp_enqueue_script( 'bookmark', get_template_directory_uri() . '/js/bookmark.js', array('jquery'), true );
}
add_action( 'wp_enqueue_scripts', 'webkato_scripts' );

В том месте где вы хотите показать ваш кнопку «Избранное» вставьте ссылку с классом js-bookmark

HTML
<a href="#" class="js-bookmark" title="Добавить в закладки"></a>

Осталось оформить кнопку стилями.

Анимированная кнопка «В избранное» на CSS

Эта анимированная кнопка отлично подойдет не только для блогов, но и для витрины товаров.

Добавьте этот HTML код в ту часть страницы, где необходимо вывести кнопку.

HTML
<div class="favourite">
  <a href="#" class="js-bookmark">
    <div class="bookmark">
      <div class="bookmark-edge">
        <div class="edge-top"></div>
        <div class="edge-bottom"></div>
      </div>
      <div class="bookmark-body">♥</div>
    </div>
  </a>
</div>

Теперь скопируйте стили и вставьте их в файл style.css.

CSS
/*
* Кнопка "В избранное"
* Browsers: last 5 version
*/

.js-bookmark {
    text-decoration: none;
}
.bookmark-edge {
    float: left;
}
.bookmark-edge .edge-top {
    border-top: 20px solid #b00;
}
.bookmark-edge .edge-bottom {
    border-bottom: 20px solid #b00;
}
.bookmark-edge .edge-top,
.bookmark-edge .edge-bottom {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
}
.bookmark-body {
    display: block;
    font-size: 30px;
    line-height: 40px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    color: #fff;
    background-color: #b00;
    position: relative;
    padding-left: 8px;
}
.bookmark .bookmark-body::after {
    display: inline-block;
    color: #b00;
}
.favourite:hover .bookmark .bookmark-body::after {
    position: absolute;
    margin-left: 20px;
    content: 'В избранное';
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    text-transform: uppercase;
}
.favourite:hover .bookmark .bookmark-body {
    min-width: 185px;
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

У вас должна получиться вот такая кнопка.

Кнопка закладок с помощью генератора Share42

Переходим на сайт Share42.com на котором можно быстро сгенерировать скрипт не только социальных кнопок, но и кнопку «Избранное браузера».

На первом шаге выберем размер иконки.

простой способ добавить кнопку закладок на свой сайт

Вы можете выбрать 3 разных размера кнопок.

На втором шаге,  отметьте нужные опции:

как добавить кнопку избранное на сайт

1. Если вы устанавливаете «Избранное браузера» отдельно от социальных кнопок, то выбирайте горизонтальный тип панели, кодировка UTF-8.
2. Снимите галку с пункта «Добавить иконку Share42» и скачайте архив скрипта к себе на компьютер.
3. По FTP или через панель хостинга загрузите папку в корень сайта, разархивируйте папку share42, а архив удалите.
4. На четвертом шаге укажите путь к папке, проверьте верно ли прописан путь до файла в пункте №5, отметьте тип сайта.
5. Теперь скопируйте код и добавьте его на страницу или в сайдбар.

наверх Do NOT follow this link or you will be banned from the site!