[Статья]

Сервисов, предоставляющих скрипты расшаривания контента в социальные сети, в интернете много. Свой выбор остановил на сервисе от Яндекса, который предлагает блок иконок от социальных сетей, под названием «Поделиться».

Блок «Поделиться» от Яндекса

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

Установка блока «Поделиться» на сайт

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

<script src="https://yastatic.net/share2/share.js" async="async"
 charset="utf-8"></script>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram">
</div>

Здесь
async="async" – асинхронная загрузка скрипта
charset="utf-8" – необходимо указать кодировку utf-8, если сайт в другой кодировке.
Идентификаторы соцсетей указываются через запятую без пробела. Список поддерживаемых соцсетей здесь

Названия иконок соцсетей в блоке «Поделиться» по умолчанию отображается на русском языке. Если требуется иная локализация, то в контейнер блока добавляется атрибут data-lang. Например, для украинского языка код контейнера с блоком будет следующим

<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram" data-lang=” uk”>
</div>

Если требуется поддержка старых браузеров (например, Internet Explorer 8), дополнительно подключите скрипт es5-shims.

<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="https://yastatic.net/share2/share.js" charset="utf-8"></script>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram">
</div>

Если при встраивании блока в код страницы горизонтальные линии на изображении страницы ломаются, то попробуйте заменить тэги «DIV» контейнера на строчные «SPAN».

<span class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram">
</span>

Если на странице мало места для блока «Поделиться» или было выбрано большое количество социальных сетей в Конструкторе блока, то часть иконок соцсетей можно спрятать под спойлер.

<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir,twitter,telegram" data-limit=«3»>
</div>

Здесь будут видны три иконки, остальные под спойлером. По умолчанию спойлер открывается вниз, если требуется направление открытия вверх, то необходимо указать это при помощи атрибута data-popup-direction=«top».

С другими настройками блока «Поделится» можно ознакомиться здесь.