Кнопки поделиться в социальных сетях

Опубликовано: 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 основу кнопок в код шаблона:

IRC (Internet Relay Chat)
rss