Встроенные публикации

Встроенные публикации — удобный способ внедрить общедоступные публикации (от Страницы или пользователя Facebook) в контент вашего сайта или веб-страницы. Встраивать можно только общедоступные публикации от имени Страниц и профилей Facebook.

Генератор кодов

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

Ширина публикации в пикселях (от 350 до 750)

Включить публикацию полностью

Получить код

Настройки

Настройка	Описание	По умолчанию
`data-href`	Абсолютный URL публикации.	`n/a`
`data-lazy`	Если задать значение `true`, в браузере будет использоваться механизм отложенной загрузки. Для этого требуется атрибут iframe `loading="lazy"`. При отложенной загрузке браузер отображает плагин, только если тот расположен достаточно близко к окну просмотра и велик шанс, что пользователь его увидит. Возможные значения настройки: `true`, `false` (используется по умолчанию).	`false`
`data-width`	Ширина публикации. От `350` до `750` пикселей. Чтобы использовать плавающую ширину, оставьте это поле пустым.	плавающая ширина
`data-show-text`	Применяется к публикации с фото. Чтобы показывать ее текст на Facebook (если он имеется), установите значение `true`.	`false`

Получение кода из публикации

1. Перейдите к публикации.

Код вставки можно получить непосредственно из публикации. Если публикация на Facebook общедоступная, нажмите значок в ее правом верхнем углу.

Выберите в меню пункт Embed Post:

Если это публикация с фото, нажмите кнопку Embed Post справа внизу:

2. Скопируйте и вставьте код.

Откроется диалог с кодом вставки публикации. Скопируйте и вставьте этот код в то место веб-страницы, где вы хотите разместить публикацию.

Подробнее см. в разделе Добавление кода вручную.

Добавление кода вручную

Если вы не хотите использовать генератор кодов, можно вставить код вручную.

1. Получите URL публикации.

Первое, что нужно сделать, — получить URL публикации, которой вы хотите поделиться. Она обязательно должна быть общедоступной. Такая публикация отмечается значком в виде серой Земли рядом со временем публикации:

Для тестирования можно использовать этот URL:

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. Загрузите SDK для JavaScript.

Чтобы использовать плагин встроенных публикаций или любой другой социальный плагин, необходимо добавить на сайт Facebook SDK для JavaScript. На каждой нужной странице достаточно разместить по одному скрипту загрузки SDK. Лучше всего сделать это сразу после открывающего тега <body>:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Подробнее о том, как реализовать SDK для JavaScript, см. в руководстве по началу работы с SDK для JavaScript.

3. Разместите тег встроенной публикации.

Разместите тег встроенной публикации в любом месте своего сайта. Подставьте вместо {your-post-url} URL-адрес публикации.

<div class="fb-post" data-href="{your-post-url}"></div>

4. Протестируйте вставку.

Выполнив эти действия, вы сможете протестировать встроенную публикацию. Полный код интеграции будет выглядеть примерно так:

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

Результат показан на снимке экрана ниже.

5. Настройте отображение.

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

Получение URL публикации

Иногда код вставки создается системой управления контентом. В этом случае вам потребуется только URL публикации. Получить URL публикации можно двумя способами:

Скопировать URL постоянной ссылки из адресной строки браузера.
Щелкнуть правой кнопкой мыши по времени публикации и скопировать адрес ссылки.

На снимке экрана оба варианта подчеркнуты красным.

С помощью API Graph

Хотите автоматически встраивать публикации на свой веб-сайт? В таком случае используйте API Graph, чтобы агрегировать публикации. Например, можно использовать конечную точку API Page Feed и параметр permalink_url для fields.

Ответ на запрос к /{page-id}/feed?fields=permalink_url будет примерно таким:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Отображение на ПК

Ширину встроенных публикаций на ПК можно задать с помощью атрибута data-width в теге встраивания публикации (см. пример ниже). Выберите значение от 350 до 750 пикселей.

Не используйте теги стилей CSS для настройки размера плагина. Это может привести к ошибкам отображения.

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

Отображение в мобильном браузере

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

WordPress

Если ваш сайт размещен на WordPress и вы уже используете на нем Facebook SDK для JavaScript, то для использования плагина встроенных публикаций достаточно добавить в публикацию тег fb-post:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Если вы не используете Facebook SDK для JavaScript, а публикации встраиваете путем копирования и вставки сниппетов с Facebook, то плагин встроенных публикаций, скорее всего, не будет отображаться. Причина в том, что WordPress преобразует символы & в #038;. Из-за этого код не будет работать.

Поэтому добавляйте плагин, используя следующий код:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v21.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

В ближайшем будущем выйдет новый, более удобный механизм интеграции с WordPress.

Часто задаваемые вопросы

Как показывать социальные плагины на разных языках?

Если вы используете HTML5- или XFBML-версию плагинов, укажите код языка при создании экземпляра библиотеки.

При загрузке SDK задайте для js.src свою локаль. Замените en_US своим языком, например fr_FR (французский язык (Франция)).

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

// Example 2:
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";

Список поддерживаемых локалей см. в файле Facebook Locales XML.

Возможно, потребуется изменить ширину социального плагина, чтобы вместить локализованный текст. Подробную информацию см. на странице Локализация и перевод.

Постоянная ссылка

Что люди видят во встроенных публикациях?

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

Постоянная ссылка

Что произойдет, если кто-то удалит публикацию или изменит настройку ее аудитории?

На месте встроенной публикации появится следующее сообщение:

Постоянная ссылка