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

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

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

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

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

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

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

2. Помощник конфигурирования

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

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

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

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

URL-адрес для публикации
Композиция
Размер кнопки

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

Скопируйте и вставьте пример кода на свой веб-сайт. В качестве значения параметра 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="http://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="http://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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

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

</body>
</html>

Настройки

Настройка Атрибут HTML5 Описание По умолчанию

href

data-href

Абсолютный URL страницы, который вы хотите опубликовать.

Для версий XFBML и HTML5 по умолчанию установлен текущий URL.

layout

data-layout

Указывает макет из тех, которые доступны для плагина. Параметр может иметь значение box_count, button_count или button.

icon_link

mobile_iframe

data-mobile_iframe

Если значение — true, при нажатии кнопки «Поделиться» в контейнере iframe (а не во всплывающем окне) в верхней части вашего веб-сайта на мобильном устройстве откроется диалог «Поделиться». Эта функция работает только на мобильных устройствах. Подробнее см. в разделе Веб-диалог «Поделиться» для мобильных устройств.

false

size

data-size

Кнопка может быть двух размеров: large и small.

small