Встраиваемые публикации

Вы можете без труда встроить в сайт или веб-страницу общедоступные публикации, размещенные на 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. Загрузите JavaScript SDK

Чтобы использовать плагин встроенных публикаций или любой другой социальный плагин, необходимо добавить 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>

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

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 публикации

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

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

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

Использование 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 for Javascript, для встраивания публикации достаточно добавить в нее тег fb-post:

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

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

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v8.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. Они также смогут подписаться на тех, кто разместил эту информацию, или поставить Страницам отметку «Нравится» прямо из встроенной публикации.