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

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

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

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

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

Кросс-браузерная кнопка «Добавить сайт в закладки» на 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 type="text/javascript" src="js/bookmark.js"></script> 

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

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

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

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
.favourite {
    display: table-cell;
    width: 200px;
    height: 50px;
    vertical-align: middle;
}
.bookmark .bookmark-edge {
    float: left;
}
.bookmark .bookmark-edge .edge-top {
    border-top: 20px solid #b00;
}
.bookmark .bookmark-edge .edge-bottom {
    border-bottom: 20px solid #b00;
}
.bookmark .bookmark-edge .edge-top, .bookmark .bookmark-edge .edge-bottom {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
}
.bookmark .bookmark-body {
    display: inline-block;
    font-size: 1.2em;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding-left: .5em;
    padding-top: .2em;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
    color: #fff;
    background-color: #b00;
}
.favourite .bookmark .bookmark-body::after {
    display: inline-block;
    content: 'В ИЗБРАННОЕ';
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    color: #b00;
}
.favourite:hover .bookmark .bookmark-body {
    min-width: 185px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.favourite:hover .bookmark .bookmark-body:after {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    color: #fff;
}

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

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

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

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

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

Теперь скопируйте код и добавьте его на страницу или в сайдбар. 

СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт