Вы можете без труда встроить в сайт или веб-страницу общедоступные публикации, размещенные на 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 и параметр fields
permalink_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 : 'v2.12
'
});
};
(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. Они также смогут подписаться на тех, кто разместил эту информацию, или поставить Страницам отметку «Нравится» прямо из встроенной публикации.
На месте встроенной публикации появится следующее сообщение: