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

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

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

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

некрасивый плагин

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

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

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

 красивые социальные кнопки

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

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

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


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

  • Первое, что потребуется сделать — выбрать социальные сервисы, которые  вы хотите использовать на сайте. Не забудьте о возможности использования дополнительных кнопок, таких как: «Наверх», «RSS», «Избранное браузера» (кнопки разрешается перетаскивать, тем самым, задавая порядок их отображения в будущей панели;  активировать сервис, можно кликнув левой кнопкой мыши по иконке).

выбор социальных сетей для сайта, перетаскивание иконок

  • Перейдем к настройкам. Для начала выберете предпочтительный для вас вид панели (выбрав вертикальный,  появится возможность ограничить количество иконок), укажите кодировку сайта.

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

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

настройка работы социальных кнопок

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

Распакуйте скачанный ранее архив и загрузите папку share42 (в ней находятся 2 файла: «share42.js» и «icons.png»)  на сайт (например, у меня получилось следующее —  https://dayafternight.ru/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>

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

  • top1=»150″ — расстояние от начала страницы до плавающей панели (размер указывается в пикселях «px»)

  • data-top2=»20″ — расстояние от верха окна браузера до панели (при прокрутке, размер в «px»)

  • data-margin=»0″ — этот параметр отвечает за горизонтальное перемещение панели ( чтобы сдвинуть влево, указываем значение с минусом, например, data-margin=»-50″, сдвинет панель на 50 пикселей влево, вправо аналогично, только без минуса.

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

primer_bloka

Осталось придать панели эстетичный вид, дабы она вписывалась в дизайн сайта. Для этого в файл  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) настройте под себя. Готово! Теперь у вас на сайте или блоге привлекательные кнопки социальных сетей и закладок без использования плагинов.

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
3 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Виктор
Виктор
7 лет назад

А я использую плагин «Social Share Buttons» и красивый и все есть=) Так же у него есть свои настройки

Виктор
Виктор
7 лет назад

Буду благодарен если еще напишите статью о «похожих статьях в посте» как у вас на блоге «Статьи по теме» .. Классная и красивая штука. У меня на блоге так же будет много разделов, WordPress. seo, сайтостроение и тд, и хотелось бы сделать примерно так же как у вас на блоге. Чтобы в разделе сео в конце поста были «Так же по теме» и перелинковка с картинками. Так же в разделе WordPress, перелинковывались статьи только находящиеся в этом разделе.. Или если есть плагин и гибкими настройками?

3
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x
Send this to a friend