Кнопки поделиться в социальных сетях
Опубликовано: 13.04.2018
Здравствуйте! По многочисленным просьбам публикую статью по установке на сайт кнопок «поделиться» в социальных сетях. Конечно, есть множество готовых решений, но большинство имеет серьезные недостатки.
Один из них — малая гибкость и ограниченный выбор стандартных настроек. Взять к примеру блок Поделиться от Яндекс, с недавних пор зачем-то вместе с социальными кнопками загружается встроенная Метрика… Опять же изменить размер или цвет кнопок довольно проблематично.
Со временем популярные решения обрастают дополнительными функциями, которые не только увеличивают размер подгружаемых скриптов, но и могут содержать вредоносный код.
Как Установить Красивые Кнопки Социальных Сетей На Сайт в 2 Клика - Pluso.ru
Наверное многие из Вас наслышаны о Pluso, когда наряду с кнопками подгружались сторонние скрипты, воруя трафик и показывая левую рекламу на сайте.
После использования различных вариантов я пришел к мнению, что собственное решение гораздо лучше и сегодня расскажу об этом. Но вначале я рекомендую Вам ознакомиться с инструкцией по установке шрифта Font Awesome — он будет задействован в примере.
Как добавить кнопки поделиться в социальных сетях на свой сайт
Онлайн-демо и исходники данного примера Вы найдете в конце статьи, а сейчас по порядку приступим к реализации. Сперва убедитесь, что на сайте используется jQuery, в противном случае подключите его, в WordPress это лучше делать через файл functions.php:
| 1 2 3 4 | function my_jquery ( ) { wp_enqueue_script ( 'jquery' ) ; } add_action ( 'wp_enqueue_scripts' , 'my_jquery' ) ; |
function my_jquery() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_jquery' );
Затем подключите Font Awesome — мы будем использовать векторные иконки социальных сетей вместо изображений. Теперь необходимо вставить HTML основу кнопок в код шаблона: