Кнопки социальных сетей и закладок на сайт или блог с помощью сервиса share42

Здравствуйте, уважаемые читатели блога uznipc.com. Хочу поделиться с вами тем, как я реализовал кнопки социальных сетей, не пользуясь плагинами.

Блогеры, которые уже не первый год занимаются продвижением сайтов, рекомендуют в первую очередь всячески связывать свой сайт с социальными сетями. Зачем? — зададитесь вы вопросом. В наше цифровое время социальные сети стали неотъемлемой частью в жизни человека и очень стремительно развиваются. Кнопки, установленные на сайте, помогают популяризировать статьи, что влияет на общее продвижение и тем самым привлекает посетителей.

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

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

Достоинства сервиса Share42

1.   Элегантный вид, выбор размера и изобилие кнопок (популярных в рунете социальных сетей и закладок)

 

2.   Возможность расположения блока как горизонтально (обычно используется в начале или конце поста), так и вертикально (в виде плавающей панели)

3.   Все файлы, касающиеся данной панели, размещаются у вас на сайте, точнее на хостинге вашего сайта (что обеспечит ее стабильную работу  и не повлияет на быстродействие)

4.   Простота в установке и настройке (не требуется особых знаний в HTML или CSS)

Настройка панели Share42

Хотите поддержать автора проекта? Оставьте иконку сайта Share42, в противном случае снимите птицу. Добавьте ссылку на RSS ленту (если выбирали).

В поле «К вашему сайту подключен jQuery» я изначально не ставил галочку, панель прекрасно работает. Перед тем как скачивать скрипт посмотрите, как будет выглядеть ваше творение.

Установка скрипта на сайт

Распакуйте скачанный ранее архив и загрузите папку share42 (в ней находятся 2 файла: «share42.js» и «icons.png»)  на сайт (например, у меня получилось следующее —  https://uznipc.com/share42, корневая директория в которой папка со скриптом)

Обязательно проверьте работоспособность скрипта, перейдя по ссылке. Если увидите кучу непонятных для вас символов — все правильно!  Также я поставил галочку напротив WordPress, так как мой блог стоит на этом движке. На этом мы заканчиваем с настройками и переходим к установке.

Нам предлагают вставить HTML код в шаблон сайта, что мы и сделаем! Я решил выводить кнопки социальных сетей только на странице с полной новостью. Файл, отвечающий за эту страницу — single.php  (для открытия данного файла рекомендую использовать Html редактор Notepad++)

 

<div data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src="https://ВАШ-САЙТ.ру/share42/share42.js"></script>

Рассмотрим расстояния:

Советую использовать бесплатную, маленькую програмку JRuler, которая помогает измерять расстояние в пикселях.

Осталось придать панели эстетичный вид, дабы она вписывалась в дизайн сайта. Для этого в файл  style.css (стили) добавим следующее:

#share42 {padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}
#share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
#share42 a {opacity: 0.5}   /* прозрачность (0.1 - прозрачно на 90%, 1 - не прозрачно) */
#share42:hover a {opacity: 0.7}   /* прозрачность при наведении */
#share42 a:hover {opacity: 1}    /* прозрачность при наведении на кнопку */

Прозрачность (opacity) и цвета (background) настройте под себя. Готово! Теперь у вас на сайте или блоге привлекательные кнопки социальных сетей и закладок без использования плагинов.