Виджет «Поделиться»

Если разместить блок на вашем сайте, посетители смогут быстро публиковать в своих социальных сетях ссылки на понравившиеся им страницы сайта.

С чего начать

Ознакомиться с Yandex API

Установка

Установите данный код на все страницы сайта.

<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"><<>/script>;
<script src="https://yastatic.net/share2/share.js"></script>

<div class="ya-share2" data-curtain data-shape="round" data-services="vkontakte,odnoklassniki,telegram,viber,whatsapp"></div>

Список параметров

Параметры
data-bare
Признак того, что загрузка стилей отключена.

Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка.

data-color-scheme
Цветовая схема кнопок соцсетей.
Значение по умолчанию:normal

blackwhite — белые иконки на черном фоне
whiteblack — черные иконки на белом фоне
normal — белые иконки на индивидуальном фоне

data-copy
Позиция кнопки "Скопировать ссылку".
Значение по умолчанию:last

Кнопка может отображаться в pop-up по нажатии  , если используется атрибут data-limit, или в основном списке соцсетей.

first — кнопка вверху списка в pop-up;
last — кнопка внизу списка в pop-up;
hidden — кнопка не отображается в pop-up;
extraItem — кнопка в основном списке.

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

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

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

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

data-description
Текст, которым нужно поделиться.
Тип:
Строковое (string)

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

data-direction
Направление списка кнопок.
Значение по умолчанию:horizontal

horizontal — горизонтальное;
vertical — вертикальное.

data-image
Изображение, которым нужно поделиться.

URL изображения.

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

data-lang
Язык блока. Локализуются подписи кнопок соцсетей и кнопка "Скопировать ссылку".
Значение по умолчанию:ru

az — азербайджанский;
be — белорусский;
en — английский;
hy — армянский;
ka — грузинский;
kk — казахский;
ro — румынский;
ru — русский;
tr — турецкий;
tt — татарский;
uk — украинский;
uz — узбекский.

data-limit
Количество соцсетей, отображаемых в виде кнопок.
Тип:
Число или отсутствие атрибута

Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут отображаться в pop-up по нажатии кнопки .

data-more-button-type
Вид кнопки открытия pop-up

Вид кнопки открытия pop-up, если значение data-limit равно 0.

long — с надписью
short — без надписи
значение не задано — стандартный вид

data-popup-direction
Направление открытия pop-up.
Значение по умолчанию:bottom

bottom — вниз;
top — вверх;
auto — по умолчанию вниз; если не вмещается вниз, то вверх; если не вмещается ни вниз, ни вверх, то вниз.

data-popup-position
Расположение pop-up относительно контейнера блока.
Значение по умолчанию:inner

Значение outer может понадобиться в том случае, если из-за специфики верстки вашего сайта pop-up обрезается соседними элементами страницы.

inner — внутри контейнера;
outer — снаружи контейнера.

data-services
Список идентификаторов социальных сетей, отображаемых в блоке.
bloggerBlogger;
deliciousDelicious;
diggDigg;
evernoteEvernote;
linkedinLinkedIn;
moimirМой Мир;
pinterestPinterest (требуется указать атрибут data-image из таблицы поддерживаемых атрибутов);
pocketPocket;
qzoneQzone;
redditReddit;
renrenRenren;
sinaWeiboSina Weibo;
skypeSkype;
surfingbirdSurfingbird;
telegramTelegram;
tumblrTumblr;
twitterTwitter;
viberViber;
vkontakteВКонтакте;
whatsappWhatsApp.
data-shape
Форма кнопок соцсетей.
Значение по умолчанию:normal

round — круглая
normal — прямоугольная со скругленными углами

data-size
Размер кнопок соцсетей.
Значение по умолчанию:m

l — большой
m — средний
s — маленький

data-title
Заголовок, которым нужно поделиться.
Тип:
Строковое (string)
Значение по умолчанию: Указывается заголовок страницы, на которой размещен.

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

data-url
Ссылка, которой нужно поделиться.
Тип:
Строковое (string)
Значение по умолчанию: Указывается URL страницы, на которой размещен.

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