Как добавить блок на страницу?
Блок «Поделиться» позволит пользователям вашего сайта или блога в один клик поделиться контентом сайта в социальных сетях. Если ваш сайт реализован в виде одностраничного приложения, вы можете добавить и настроить блок с помощью API блока «Поделиться».
-
Подключите скрипт блока. Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут
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>
-
Поместите блок в контейнер. В качестве контейнера можно использовать любой блочный элемент, добавив атрибут
class="ya-share2"
.<div class="ya-share2" data-services="vkontakte,twitter,messenger"></div>
Настроить блок вы можете с помощью атрибутов контейнера (см. в таблице ниже).
Поддерживаемые атрибуты
Атрибут |
Описание |
Возможные значения |
|
Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка. |
Наличие или отсутствие атрибута. |
|
Цветовая схема кнопок соцсетей. |
Значение по умолчанию: |
|
Позиция кнопки Скопировать ссылку. Кнопка может отображаться в pop-up по нажатии |
Значение по умолчанию: |
|
Указание на мобильных устройствах вместо pop-up выводить окно, похожее на нативный инструмент Поделиться.
Источники данных для превьюКонтент в превью может не совпадать с контентом для соцсети. Картинка и описание для превью берутся из атрибутов Кнопка Другие для вызова нативного инструмента Поделиться и кнопка Скопировать ссылку присутствуют в окне, если такая возможность предусмотрена браузером. |
Наличие или отсутствие атрибута. |
|
Текст, которым нужно поделиться. |
Строка. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно. |
|
Направление списка кнопок. |
Значение по умолчанию: |
|
Хэштеги. Актуальны и работают только для Твиттера. |
Строка, указывается без знака |
|
Изображение, которым нужно поделиться. |
URL изображения. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно. |
|
Язык блока. Локализуются подписи кнопок соцсетей и кнопка Скопировать ссылку. |
Значение по умолчанию: |
|
Количество соцсетей, отображаемых в виде кнопок. Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут отображаться в pop-up по нажатии кнопки |
Натуральное число или отсутствие атрибута. |
|
Вид кнопки открытия pop-up, если значение |
|
|
Идентификатор директивы Content Security Policy. Используется для подтверждения безопасности скрипта блока «Поделиться». |
Строка, сгенерированная сервером. |
|
Направление открытия pop-up. |
Значение по умолчанию: |
|
Расположение pop-up относительно контейнера блока. Значение |
Значение по умолчанию: |
|
Список идентификаторов социальных сетей, отображаемых в блоке. |
См. список идентификаторов поддерживаемых соцсетей. Несколько соцсетей указываются через запятую без пробела. Значение по умолчанию: |
|
Форма кнопок соцсетей. |
Значение по умолчанию: |
|
Размер кнопок соцсетей. |
Значение по умолчанию: |
|
Заголовок, которым нужно поделиться. |
Строка. По умолчанию указывается заголовок страницы, на которой размещен блок. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно. |
|
Ссылка, которой нужно поделиться. |
Любой URL. По умолчанию указывается URL страницы, на которой размещен блок. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно. |
|
Указание, что страницу отправки ссылки нужно всегда открывать в новом окне или вкладке. Если атрибут не добавлять, страница может выводиться во всплывающем окне (возможность зависит от соцсети и браузера). |
Наличие или отсутствие атрибута. |
Примечание
Часто соцсети игнорируют параметры 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>
Список поддерживаемых соцсетей
В настоящее время поддерживается обмен ссылками с пользователями следующих социальных сетей:
blogger
— Blogger;delicious
— Delicious;digg
— Digg;evernote
— Evernote;messenger
— Яндекс Мессенджер;linkedin
— LinkedIn;lj
— Живой Журнал;moimir
— Мой Мир;odnoklassniki
— Одноклассники.ru;pinterest
— Pinterest (требуется указать атрибутdata-image
из таблицы поддерживаемых атрибутов);pocket
— Pocket;qzone
— Qzone;reddit
— Reddit;renren
— Renren;sinaWeibo
— Sina Weibo;skype
— Skype;surfingbird
— Surfingbird;telegram
— Telegram;tumblr
— Tumblr;twitter
— Twitter;viber
— Viber;vkontakte
— ВКонтакте;whatsapp
— WhatsApp.