Встраиваемые видео и видеоплеер

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

Конфигуратор встраиваемого видеоплеераПример кодаНастройкиДобавление кода вручную

Пошаговые инструкции

1. Выберите URL или страницу.

Выберите URL видео Facebook, которое вы хотите встроить.

2. Помощник конфигурирования.

Вставьте URL в помощник конфигурирования. Нажмите кнопку Получить код, чтобы сгенерировать код встраиваемого видеоплеера.

3. Скопируйте и вставьте фрагмент кода HTML.

Скопируйте и вставьте сниппет в HTML-код веб-сайта.

Конфигуратор встраиваемого видеоплеера

URL-адрес видео
Ширина видео в пикселях

Пример полного кода

Скопируйте и вставьте пример кода на свой сайт. В качестве значения параметра data-href укажите URL видео. Используйте атрибут data-width, чтобы задать размер видеоплеера.

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <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&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

Настройки

В конфигураторе выше доступны не все возможные настройки для встраиваемого видеоплеера. Вы можете задать следующие настройки:

Настройка Описание По умолчанию

data-href

Абсолютный URL видео.

n/a

data-allowfullscreen

Воспроизведение видео во весь экран. Значение может быть false или true.

false

data-autoplay

Автоматический запуск видео при загрузке страницы. Видео будет воспроизводиться без звука. Включить звук можно с помощью инструментов управления видеоплеером. Эта настройка неприменима к мобильным устройствам. Значение может быть false или true.

false

data-width

Ширина контейнера видео. Мин. 220px.

auto

data-show-text

Чтобы добавить текст из публикации Facebook, связанной с видео (если есть), установите значение true. Доступно только для сайтов для ПК.

false

data-show-captions

Чтобы показывать подписи (если доступны) по умолчанию, установите значение true. Подписи доступны только на ПК.

false

Пример конфигурации

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

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

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

Если вы публикуете общедоступное видео (см. раздел «ЧаВо»), получить код можно непосредственно из видеопубликации.

В меню параметров выберите Embed Video:

Или же во время просмотра видео в полноэкранном режиме нажмите кнопку Embed Video справа внизу:

Только для Страниц

При публикации общедоступного видео на Странице (см. раздел «ЧаВо») вы можете получить код прямо из Хроники. Нажмите значок в правом верхнем углу публикации на Facebook.

В раскрывающемся меню выберите Embed Video: (Только для Страниц.)

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

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

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

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

Добавить код можно не только с помощью генератора кода, но и вручную.

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

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

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

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

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-video-post-url} URL-адресом публикаций.

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. Тестирование

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

<html>
  <title>My Website</title>
<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>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

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

5. Настройка

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

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

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

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

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

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

Если вы хотите автоматически встраивать видеоплееры на свой веб-сайт, воспользуйтесь API Graph, чтобы агрегировать видео. Например, можно использовать эндпойнт API Page Videos. Он будет отправлять отклики на ваши запросы к /{page-id}/videos в следующем формате.

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

Чтобы получить URL видео

Используйте значение id для создания URL-адреса со следующей структурой.

"https://www.facebook.com/video.php?v={id}"

Не используйте свойство embed_html для встраивания видео. Подробнее см. раздел ЧаВо.

Вид на ПК

На ПК ширину видеоплеера можно задать с помощью атрибута data-width в теге встраиваемого видеоплеера. См. пример ниже. Минимальное значение — 220. Предела верхнего значения нет, однако плеер не может быть больше, чем его родительский элемент.

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

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

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

Полноэкранный режим

Если вы хотите, чтобы видео можно было воспроизводить во весь экран, добавьте свойство data-allowfullscreen="true".

Вид плеера на мобильном устройстве

На мобильном устройстве плеер автоматически подстраивается под внутреннюю ширину родительского элемента.

Настройка языка

Чтобы настроить язык плагина «Встраиваемый видеоплеер», загрузите локализованную версию Facebook SDK для JavaScript. При загрузке SDK задайте значение js.src в соответствии со своим регионом: Просто замените en_US своей локалью, например fr_FR (французский язык (Франция)):

js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.5";

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

Wordpress

Если вы уже используете Facebook SDK для JavaScript на веб-сайте Wordpress, вы можете встроить видеоплеер, просто добавив в публикацию тег fb-video.

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

Если вы не используете Facebook SDK для JavaScript и встраиваете видео с помощью сниппета, который можно извлечь из любой видеопубликации, плагин «Встраиваемый видеоплеер», скорее всего, не будет отображаться. Причина в том, что Wordpress будет конвертировать все символы & в #038;.

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

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v2.5'
  });
  }; (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-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

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

ЧаВо

Можно ли использовать для API Graph video свойство embed_html?

Нет. Мы не рекомендуем использовать свойство embed_html. Вместо этого используйте плагин «Встраиваемый видеоплеер»!

Информация о свойстве embed_html.

Эндпойнт API Graph video обслуживает свойство embed_html. Его значение включает элемент HTML, который можно встроить в веб-страницу для воспроизведения нужного видео.

Это значение не следует путать с плагином «Встраиваемый видеоплеер». Мы не рекомендуем использовать это свойство. Вместо него используйте плагин «Встраиваемый видеоплеер».

При использовании значения свойства embed_html:

  • видеоплеер не будет работать на мобильных устройствах и планшетах;
  • в видеоплеере не будет отображаться дополнительная информация, например количество просмотров, название видео и т. д.

Пример свойства embed_html (больше не используется).

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}