Как добавить блок на страницу?

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

  1. Подключите скрипт блока. Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут async или defer. 

    <script src="https://yastatic.net/share2/share.js" async></script>
    <script src="https://yastatic.net/share2/share.js" defer></script>

    Если требуется поддержка старых браузеров (например, 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" async></script>

  2. Поместите блок в контейнер. В качестве контейнера можно использовать любой блочный элемент, добавив атрибут class="ya-share2". 

    <div class="ya-share2" data-services="vkontakte,twitter,messenger"></div>

    Настроить блок вы можете с помощью атрибутов контейнера (см. в таблице ниже).

Поддерживаемые атрибуты

Атрибут Описание Возможные значения
data-bare Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка. Наличие или отсутствие атрибута.
data-color-scheme Цветовая схема кнопок соцсетей.
  • blackwhite — белые иконки на черном фоне
  • whiteblack — черные иконки на белом фоне
  • normal — белые иконки на индивидуальном фоне

Значение по умолчанию: normal.
data-copy Позиция кнопки Скопировать ссылку. Кнопка может отображаться в pop-up по нажатию , если используется атрибут data-limit, или в основном списке соцсетей.
  • first — кнопка вверху списка в pop-up;
  • last — кнопка внизу списка в pop-up;
  • hidden — кнопка не отображается в pop-up;
  • extraItem — кнопка в основном списке.

Значение по умолчанию: last.
data-curtain

Указание на мобильных устройствах вместо pop-up выводить окно, похожее на нативный инструмент Поделиться.

В шапке окна отображается превью сайта.

Источники данных для превью
Контент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов image и description. Если атрибуты image и description не указаны, данные подтягиваются из разметки Open Graph. Если описание не найдено в разметке Open Graph, оно подставляется из мета-тега description страницы. Если описания нет и там, берется текущий URL страницы.

Кнопка Другие для вызова нативного инструмента Поделиться и кнопка Скопировать ссылку присутствуют в окне, если такая возможность предусмотрена браузером.

 Наличие или отсутствие атрибута.
data-description Текст, которым нужно поделиться. Строка.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-direction Направление списка кнопок.
  • horizontal — горизонтальное;
  • vertical — вертикальное.

Значение по умолчанию: horizontal.
data-hashtags Хэштеги. Актуальны и работают только для Твиттера. Строка, указывается без знака #.

Несколько хэштегов указываются через запятую, без пробела.
data-image Изображение, которым нужно поделиться. URL изображения.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-lang Язык блока. Локализуются подписи кнопок соцсетей и кнопка Скопировать ссылку.
  • az — азербайджанский;
  • be — белорусский;
  • en — английский;
  • hy — армянский;
  • ka — грузинский;
  • kk — казахский;
  • ro — румынский;
  • ru — русский;
  • tr — турецкий;
  • tt — татарский;
  • uk — украинский;
  • uz — узбекский.

Значение по умолчанию: ru.
data-limit Количество соцсетей, отображаемых в виде кнопок. Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут отображаться в pop-up по нажатию кнопки . Натуральное число или отсутствие атрибута.
data-more-button-type Вид кнопки открытия pop-up, если значение data-limit равно 0.
  • long — с надписью
  • short — без надписи
  • значение не задано — стандартный вид
data-nonce Идентификатор директивы Content Security Policy. Используется для подтверждения безопасности скрипта блока «Поделиться». Строка, сгенерированная сервером.
data-popup-direction Направление открытия pop-up.
  • bottom — вниз;
  • top — вверх;
  • auto — по умолчанию вниз; если не вмещается вниз, то вверх; если не вмещается ни вниз, ни вверх, то вниз.

Значение по умолчанию: bottom.
data-popup-position Расположение pop-up относительно контейнера блока. Значение outer может понадобиться в том случае, если из-за специфики верстки вашего сайта pop-up обрезается соседними элементами страницы.
  • inner — внутри контейнера;
  • outer — снаружи контейнера.

Значение по умолчанию: inner.
data-services Список идентификаторов социальных сетей, отображаемых в блоке. См. список идентификаторов поддерживаемых соцсетей. Несколько соцсетей указываются через запятую без пробела.

Значение по умолчанию: vkontakte,twitter.
data-shape Форма кнопок соцсетей.
  • round — круглая
  • normal — прямоугольная со скругленными углами

Значение по умолчанию: normal.
data-size Размер кнопок соцсетей.
  • l — большой
  • m — средний
  • s — маленький

Значение по умолчанию: m.
data-title Заголовок, которым нужно поделиться.

Строка.

По умолчанию указывается заголовок страницы, на которой размещен блок.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-url Ссылка, которой нужно поделиться. Любой URL.

По умолчанию указывается URL страницы, на которой размещен блок.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-use-links Указание, что страницу отправки ссылки нужно всегда открывать в новом окне или вкладке. Если атрибут не добавлять, страница может выводиться во всплывающем окне (возможность зависит от соцсети и браузера). Наличие или отсутствие атрибута.
Атрибут Описание Возможные значения
data-bare Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка. Наличие или отсутствие атрибута.
data-color-scheme Цветовая схема кнопок соцсетей.
  • blackwhite — белые иконки на черном фоне
  • whiteblack — черные иконки на белом фоне
  • normal — белые иконки на индивидуальном фоне

Значение по умолчанию: normal.
data-copy Позиция кнопки Скопировать ссылку. Кнопка может отображаться в pop-up по нажатию , если используется атрибут data-limit, или в основном списке соцсетей.
  • first — кнопка вверху списка в pop-up;
  • last — кнопка внизу списка в pop-up;
  • hidden — кнопка не отображается в pop-up;
  • extraItem — кнопка в основном списке.

Значение по умолчанию: last.
data-curtain

Указание на мобильных устройствах вместо pop-up выводить окно, похожее на нативный инструмент Поделиться.

В шапке окна отображается превью сайта.

Источники данных для превью
Контент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов image и description. Если атрибуты image и description не указаны, данные подтягиваются из разметки Open Graph. Если описание не найдено в разметке Open Graph, оно подставляется из мета-тега description страницы. Если описания нет и там, берется текущий URL страницы.

Кнопка Другие для вызова нативного инструмента Поделиться и кнопка Скопировать ссылку присутствуют в окне, если такая возможность предусмотрена браузером.

 Наличие или отсутствие атрибута.
data-description Текст, которым нужно поделиться. Строка.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-direction Направление списка кнопок.
  • horizontal — горизонтальное;
  • vertical — вертикальное.

Значение по умолчанию: horizontal.
data-hashtags Хэштеги. Актуальны и работают только для Твиттера. Строка, указывается без знака #.

Несколько хэштегов указываются через запятую, без пробела.
data-image Изображение, которым нужно поделиться. URL изображения.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-lang Язык блока. Локализуются подписи кнопок соцсетей и кнопка Скопировать ссылку.
  • az — азербайджанский;
  • be — белорусский;
  • en — английский;
  • hy — армянский;
  • ka — грузинский;
  • kk — казахский;
  • ro — румынский;
  • ru — русский;
  • tr — турецкий;
  • tt — татарский;
  • uk — украинский;
  • uz — узбекский.

Значение по умолчанию: ru.
data-limit Количество соцсетей, отображаемых в виде кнопок. Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут отображаться в pop-up по нажатию кнопки . Натуральное число или отсутствие атрибута.
data-more-button-type Вид кнопки открытия pop-up, если значение data-limit равно 0.
  • long — с надписью
  • short — без надписи
  • значение не задано — стандартный вид
data-nonce Идентификатор директивы Content Security Policy. Используется для подтверждения безопасности скрипта блока «Поделиться». Строка, сгенерированная сервером.
data-popup-direction Направление открытия pop-up.
  • bottom — вниз;
  • top — вверх;
  • auto — по умолчанию вниз; если не вмещается вниз, то вверх; если не вмещается ни вниз, ни вверх, то вниз.

Значение по умолчанию: bottom.
data-popup-position Расположение pop-up относительно контейнера блока. Значение outer может понадобиться в том случае, если из-за специфики верстки вашего сайта pop-up обрезается соседними элементами страницы.
  • inner — внутри контейнера;
  • outer — снаружи контейнера.

Значение по умолчанию: inner.
data-services Список идентификаторов социальных сетей, отображаемых в блоке. См. список идентификаторов поддерживаемых соцсетей. Несколько соцсетей указываются через запятую без пробела.

Значение по умолчанию: vkontakte,twitter.
data-shape Форма кнопок соцсетей.
  • round — круглая
  • normal — прямоугольная со скругленными углами

Значение по умолчанию: normal.
data-size Размер кнопок соцсетей.
  • l — большой
  • m — средний
  • s — маленький

Значение по умолчанию: m.
data-title Заголовок, которым нужно поделиться.

Строка.

По умолчанию указывается заголовок страницы, на которой размещен блок.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-url Ссылка, которой нужно поделиться. Любой URL.

По умолчанию указывается URL страницы, на которой размещен блок.

Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-use-links Указание, что страницу отправки ссылки нужно всегда открывать в новом окне или вкладке. Если атрибут не добавлять, страница может выводиться во всплывающем окне (возможность зависит от соцсети и браузера). Наличие или отсутствие атрибута.
Примечание. Часто соцсети игнорируют параметры title и description и берут значения из семантической разметки страницы. О том, как использовать семантическую разметку, читайте в статьях Open Graph, Schema.org и Микроформаты.

Указать атрибуты контента для каждой соцсети отдельно

Вы можете указать атрибуты контента (data-title, data-description, data-image, data-url) для каждой соцсети отдельно. Например, это может понадобиться для Твиттера, где установлено ограничение на длину сообщения.

<div class="ya-share2" data-services="vkontakte,twitter,messenger" data-title="All about Yandex" data-title:twitter="Yandex"</div>

Также для Твиттера можно указать хэштеги. Несколько хэштегов указываются через запятую, без пробела и знака #.

<div class="ya-share2" data-services="vkontakte,twitter,messenger" data-title="All about Yandex" data-title:twitter="Yandex" data-hashtags:twitter="yandex,share"</div>

Список поддерживаемых соцсетей

В настоящее время поддерживается обмен ссылками с пользователями следующих социальных сетей: