Так ли необходима вашему сайту кнопка добавления страницы в закладки браузера? Ответ на этот вопрос можно получить только после тестового периода. Несмотря на обилие всевозможных закладочных сервисов, браузерные закладки до сих пор активно используются. Кнопка на сайте мотивирует посетителя на сохранение страницы, а это означает, что шансы на неоднократное посещение сайта из закладки практически гарантировано.
На этой диаграмме мы видим, что трафик с закладок занимает второе место среди источников.
Давайте рассмотрим два быстрых способа установки кнопки «Добавить сайт в закладки».
Кросс-браузерная кнопка на jQuery
Скрипт на jQuery для кнопки «Добавить сайт в закладки» на момент написания статьи работает на всех браузерах. Чтобы подключить его к себе на сайт, нужно создать файл с расширением js. Назовем его bookmark.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 и добавьте этот код:
/**
Enqueues scripts Bookmark.
*/
add_action( 'wp_enqueue_scripts', 'webkato_scripts' );
function webkato_scripts() {
wp_enqueue_script( 'bookmark', get_template_directory_uri() . '/js/bookmark.js', array('jquery'), true );
}
В том месте где вы хотите показать ваш кнопку «Избранное» вставьте ссылку с классом js-bookmark:
<a href="#" class="js-bookmark" title="Добавить в закладки"></a>
Осталось оформить кнопку стилями.
Анимированная кнопка «В избранное» на CSS
Эта анимированная кнопка отлично подойдет не только для блогов, но и для витрины товаров.
Добавьте этот 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.
/*
* Кнопка "В избранное"
* 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. Теперь скопируйте код и добавьте его на страницу или в сайдбар.
⚠️ Так как технологии постоянно меняются, тестируйте любой кастомный код на промежуточном веб-сайте перед переходом в рабочую среду.