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

Вы можете без труда встроить в сайт или веб-страницу общедоступные публикации, размещенные на Facebook от имени Страницы или человека. Обратите внимание: встроить можно только общедоступные публикации!

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

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

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

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

Получить код

Настройки

Настройка	Описание	По умолчанию
`data-href`	Абсолютный URL публикации.	`n/a`
`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>(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&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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 src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></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 публикации можно двумя способами:

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

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

Использование API Graph

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

Отклик на ваш запрос к /{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

Если вы используете Facebook SDK для JavaScript на сайте Wordpress, вы можете использовать плагин «Встраиваемые публикации», просто добавив в публикацию Wordpress тег 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    : 'v2.10'
    });
  }; 
  (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";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</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» своей локалью, например «ru_RU» (русский язык (Россия)):

// Пример 1:
'//connect.facebook.net/fr_FR/sdk.js';

// Пример 2:
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";

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

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

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

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

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

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

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

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