Вы можете без труда встроить в сайт или веб-страницу общедоступные публикации, размещенные на Facebook от имени Страницы или человека. Обратите внимание: встроить можно только общедоступные публикации!
| Настройка | Описание | По умолчанию |
|---|---|---|
| Абсолютный URL публикации. |
|
| Ширина публикации. Мин. | гибкая ширина |
| Применяется к фотопубликации. Чтобы добавить текст из публикации Facebook (если есть), установите значение |
|
Код для встраивания можно получить непосредственно из публикации. Если публикация на Facebook общедоступная, нажмите значок в ее правом верхнем углу.
В раскрывающемся меню выберите Embed Post:
Если это публикация с фото, нажмите кнопку Embed Post справа внизу:
Вы увидите диалог с кодом для встраивания публикации. Скопируйте и вставьте этот код в то место веб-страницы, где вы хотите разместить видео.
Подробнее см. раздел Добавление кода вручную.
Добавить код можно не только с помощью генератора кода, но и вручную.
Первое, что нужно сделать, — это получить URL публикации, которой вы хотите поделиться. Публикация должна быть общедоступной. Такая публикация помечается значком в виде серой планеты рядом с отметкой времени публикации: 
Для тестирования вы можете использовать этот URL.
"https://www.facebook.com/20531316728/posts/10154009990506729/"
Чтобы использовать плагин «Встраиваемые публикации» или любой другой социальный плагин, необходимо добавить 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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>Подробнее о том, как интегрировать JavaScript SDK, см. в руководстве по началу работы с JavaScript SDK.
Разместите тег встраиваемой публикации в любом месте своего сайта. Замените {your-post-url} URL-адресом публикаций.
<div class="fb-post" data-href="{your-post-url}"></div>После выполнения приведенных выше инструкций вы сможете протестировать встроенную публикацию. Полный код интеграции будет выглядеть примерно так.
<html>
<title>My Website</title>
<body>
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"
async></script>
<div class="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
data-width="500"></div>
</body>
</html>Результат показан на снимке экрана ниже.
Следуйте приведенным ниже инструкциям, чтобы задать размер, язык и другие настройки.
В некоторых случаях код создается системой CMS, и все, что вам нужно, — это URL публикации. Получить URL публикации можно двумя способами:
На снимке экрана оба метода выделены красным цветом.
Хотите автоматически встраивать публикации на свой веб-сайт? В таком случае используйте 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>При просмотре веб-страницы на мобильном устройстве размер встроенной публикации автоматически подстраивается под ширину контейнера.
Если вы используете 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 : 'v3.1'
});
};
(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";
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 своей локалью, например 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. Они также смогут подписаться на тех, кто разместил эту информацию, или поставить Страницам отметку «Нравится» прямо из встроенной публикации.
На месте встроенной публикации появится следующее сообщение:
