Для начала нам нужно зайти в конструктор блока «Поделиться» от «Яндекса». Здесь выбираем сервисы (соц. сети), в которых хотим показывать свои страницы и внешний вид блока для отображения иконок. После копируем код, указанный в одноименном поле, и вставляем его в любое место шаблона. На этом можно и закончить, но все же давайте поиграем с этим кодом, чтобы сделать все красиво на нашем сайте.

Для удобства давайте создадим чанк "Share" и вставим туда все код, предоставленный нам сервисом:

<script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"></div>

В этом примере я выбрал соц. сети - Вконтакте, Фейсбук, Твиттер, Одноклассники и Мой Мир в виде счетчиков. Если захотите что-то добавить, либо изменить, то Вы можете воспользоваться data-атрибутами, поддерживаемых в HTML 5:

  • data-yashareType - тип блока;
  • data-yashareQuickServices - список сервисов;
  • data-yashareTitle - название ссылки;
  • data-yashareDescription - описание ссылки;
  • data-yashareLink - ссылка, которой требуется поделиться;
  • data-yashareL10n - язык текста блока, размещенного по ссылке, например, "ru" для русского языка;
  • data-yashareImage - дополнительный значок.

Бывают случаи, когда Вам нужно будет поместить несколько таких блоков на страницу (к примеру, несколько товаров). Для этого лучше вызывать блок при помощи JavaScript-кода:

new Ya.share({
element: 'ya_share1',
l10n: 'ru',
theme: 'counter',
title: "Сервис «Поделиться» от Яндекс",
link: "http://aboutcomputers.ru/podelitsya.html",
elementStyle: {
quickServices: ['vkontakte', 'facebook', 'twitter','odnoklassniki','moimir']
},
});

и вставляем код для отображения этого блока:

<span id="ya_share1"></span>

Это один блок, для добавки второго создаем тоже самое (JavaScript-код и код отображения) только с другим элементом "ya_share2"

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.