Кнопка "Поделиться"

Эта кнопка позволяет добавлять сообщение к ссылкам, которыми люди хотят поделиться в хронике, группах или сообщении Facebook.

Если приложение разработано для iOS или Android, мы рекомендуем использовать не эту кнопку, а нативный диалог "Поделиться" в iOS и Android.

Если на веб-сайте не нужна кнопка для открытия диалога "Поделиться" или же кнопка Facebook не вписывается в его дизайн, для публикации ссылок можно использовать диалог "Поделиться" для веб-платформы. Имейте в виду: чтобы использовать этот плагин, не нужно интегрировать вход через Facebook или запрашивать дополнительные разрешения посредством проверки приложения.

Конфигуратор кнопки "Поделиться"
Пример кода
Настройки
Часто задаваемые вопросы

Пошаговые инструкции

1. Выберите URL или страницу.

Выберите URL веб-сайта или Страницы Facebook, которым вы хотите поделиться.

2. Воспользуйтесь конфигуратором кода.

Вставьте URL в конфигуратор кода и настройте параметр layout кнопки "Поделиться". Чтобы сгенерировать код кнопки "Поделиться", нажмите Get Code.

3. Скопируйте и вставьте фрагмент кода HTML.

Скопируйте и вставьте фрагмент кода в HTML-код сайта.

Конфигуратор кнопки "Поделиться"

URL-адрес для публикации

Композиция

button_count

Размер кнопки

small

Получить код

Пример полного кода

Скопируйте и вставьте пример кода на свой сайт. В качестве значения параметра data-href укажите URL своего сайта. Затем настройте предпросмотр ссылки с помощью метатегов og:***. В og:url и data-href должен использоваться один и тот же URL.

<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Your Website Title" />
<meta property="og:description"   content="Your description" />
<meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your share button code -->
<div class="fb-share-button" 
data-href="https://www.your-domain.com/your-page.html" 
data-layout="button_count">
</div>

</body>
</html>

Настройки

Настройка	Атрибут HTML5	Описание	Значение по умолчанию
`href`	`data-href`	Абсолютный URL страницы, который нужно опубликовать.	Для версий XFBML и HTML5 по умолчанию установлен текущий URL.
`lazy`	`data-lazy`	Если задать значение `true`, в браузере будет использоваться механизм отложенной загрузки. Для этого требуется атрибут iframe `loading="lazy"`. При отложенной загрузке браузер отображает плагин, только если тот расположен достаточно близко к окну просмотра и велик шанс, что пользователь его увидит. Возможные значения настройки: `true`, `false` (значение по умолчанию).	`false`
`layout`	`data-layout`	Выбор компоновки из числа доступных для плагина. Параметр может иметь значение `box_count`, `button_count` или `button`.	`icon_link`
~~`mobile_iframe`~~ Больше не используется	~~`data-mobile_iframe`~~	Если для этого параметра установлено значение `true`, при нажатии кнопки "Поделиться" в контейнере iframe (а не во всплывающем окне) в верхней части сайта на мобильном устройстве откроется диалог "Поделиться". Эта функция работает только на мобильных устройствах. Подробнее см. в разделе о веб-диалоге "Поделиться" для мобильных устройств .	~~`false`~~
`size`	`data-size`	Кнопка может быть двух размеров: `large` и `small`.	`small`

Связанные темы

Социальные плагины: ЧаВо Диалог "Поделиться"Руководство по публикации для веб-мастеров Facebook SDK для JavaScript