Plugins Sociais

Player de vídeo ao vivo e vídeo incorporado

Com o player de vídeo incorporado, é possível adicionar facilmente vídeos e vídeos ao vivo do Facebook ao seu site. É possível usar qualquer publicação de vídeo ou vídeo ao vivo aberta de uma Página ou pessoa como origem.

Configurador do player de vídeo incorporadoExemplo de códigoConfiguraçõesAdicionar código manualmente

Passo a passo

1. Escolha a URL ou a Página

Selecione a URL de um vídeo do Facebook que você quer incorporar.

2. Use o Configurador de código

Cole a URL no Configurador de código e clique em Obter código para gerar o código do player de vídeo incorporado.

3. Copie e cole o trecho de código no HTML

Copie e cole o trecho de código no HTML do site de destino.

Configurador do player de vídeo incorporado

URL do vídeo
A largura do pixel do vídeo
Receber código

Exemplo de código completo

Copie e cole o exemplo de código no seu site. Ajuste o valor de data-href para a URL do vídeo. Controle o tamanho do player usando o atributo data-width.

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

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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>

Configurações

O configurador acima não inclui todas as configurações possíveis para o player de vídeo incorporado. Também é possível alterar estas configurações:

Configuração Descrição Padrão

data-href

A URL absoluta do vídeo.

n/a

data-allowfullscreen

Permite que o vídeo seja reproduzido em tela cheia. Pode ser false ou true.

false

data-autoplay

Começa a reprodução automática do vídeo quando a página é carregada. O vídeo será reproduzido sem som (silenciado). A pessoa pode ativar o som nos controles do player de vídeo. Essa configuração não se aplica a dispositivos móveis. Pode ser false ou true.

false

data-lazy

true significa que o navegador usará o mecanismo de carregamento lento ao definir o atributo loading="lazy" do iframe. O efeito é que o navegador não renderizará o plugin se ele não estiver próximo ao visor. Isso pode fazer com que plugin nunca seja visto. Pode ser true ou false (padrão).

false

data-width

A largura do contêiner do vídeo. Mínimo: 220px.

auto

data-show-text

Defina como true para incluir o texto da publicação do Facebook associada ao vídeo, se houver. Disponível apenas para sites de desktop.

false

data-show-captions

Defina como true para mostrar legendas (se disponível) por padrão. As legendas só estão disponíveis no desktop.

false

Exemplo de configuração

<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>

Como obter o código de uma publicação de vídeo

1. Acesse a publicação de vídeo

Ao publicar um vídeo como público (confira as Perguntas frequentes), você pode obter o código de incorporação diretamente na publicação do vídeo.

Escolha Embed Video no menu de opções:

Ou, quando assistir a um vídeo na visualização de página inteira, selecione o botão Embed Video no canto inferior direito:

Apenas para Páginas

Ao publicar um vídeo público em uma Página (confira as Perguntas frequentes), você pode obter o código de incorporação na linha do tempo. Clique no ícone que aparece no canto superior direito da publicação no Facebook.

Escolha Embed Video no menu suspenso: (apenas para Páginas)

2. Copie e cole o código

Aparecerá uma caixa de diálogo com o código para incorporar a publicação de vídeo. Copie e cole esse código na sua página da web, no ponto onde você quer que ele apareça.

Para ver os detalhes técnicos, consulte a seção Como adicionar código manualmente.

Como adicionar código manualmente

Além de usar o Gerador de Códigos, também é possível incorporar o código de modo manual.

1. Obtenha a URL da publicação de vídeo

Primeiro, é necessário obter a URL da publicação de vídeo que você quer compartilhar. A publicação de vídeo precisa ter o status de aberta (confira as Perguntas frequentes), que é indicado pelo ícone de globo cinza ao lado do horário da publicação:

Para fins de teste, use esta URL de exemplo:

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

2. Carregue o SDK para JavaScript

Para usar o plugin do player de vídeo incorporado ou qualquer outro Plugin Social, é preciso adicionar o SDK do Facebook para JavaScript ao seu site. Você só precisa carregar o SDK na página uma vez, e o ideal é que ele fique após a tag de abertura <body>:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Para receber mais ajuda com a implementação do SDK para JavaScript, consulte Início rápido: SDK do Facebook para JavaScript.

3. Posicione a tag do player de vídeo incorporado

Depois, posicione a tag do player de vídeo incorporado em qualquer ponto do seu site. Substitua {your-video-post-url} pela URL da publicação.

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

4. Teste

Depois de concluir essas etapas, teste o player de vídeo incorporado. A integração completa será mais ou menos assim:

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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>

A captura de tela abaixo mostra o resultado do nosso exemplo de teste.

5. Personalize

Siga as instruções mais abaixo na página para alterar o tamanho, o idioma e outras configurações.

Como obter a URL de uma publicação de vídeo

Em alguns casos, o código incorporado é criado por um CMS, e você só precisa da URL bruta da publicação. Existem duas formas de obter a URL da publicação:

  1. Copie a URL do link permanente na barra de endereços do navegador.
  2. Clique com o botão direito do mouse no horário de publicação e copie o endereço do link.

Os dois métodos estão destacados em vermelho na captura de tela abaixo.

Pela Graph API

Se você quiser integrar automaticamente os players de vídeo incorporado ao seu site, provavelmente usará a Graph API para agregar vídeos. Por exemplo, você pode usar o ponto de extremidade da API de Vídeos da Página, que enviará uma resposta para a sua solicitação de /{page-id}/videos no seguinte formato (reduzido):

{
  "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": []
    }
   ]
}

Para obter a URL do vídeo:

Use o valor id para criar uma URL com esta estrutura:

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

Não use a propriedade embed_html para incorporar vídeos. Para saber mais sobre esse assunto, consulte a seção Perguntas frequentes.

Layout no desktop

É possível ajustar a largura do player de vídeo incorporado no desktop por meio do atributo data-width da tag do player de vídeo incorporado, como no exemplo abaixo. O valor precisa ser no mínimo 220. Não há limite máximo, mas o player nunca será maior do que o respectivo elemento principal.

Não use tags de estilo CSS para ajustar o tamanho de um plugin. Isso pode resultar em erros de exibição.

<!-- 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>

Tela cheia

Adicione a propriedade data-allowfullscreen="true" para permitir que vídeo seja reproduzido em tela cheia.

Layout na web móvel

Na web móvel, o player de vídeo incorporado é automaticamente redimensionado para a largura interna do respectivo elemento principal.

Como mudar o idioma

É possível alterar o idioma do plugin de player de vídeo incorporado carregando uma versão localizada do SDK do Facebook para JavaScript. Quando você carregar o SDK, altere o valor de src para usar a sua localidade. Substitua en_US por sua localidade, por exemplo, fr_FR para usar francês (França):

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v3.2"

Talvez você tenha que ajustar a largura do Plugin Social para incluir idiomas diferentes. Para saber mais, consulte nossa página Localização.

Wordpress

Caso já use o SDK do Facebook para JavaScript no seu site do Wordpress, você poderá usar o plugin do player de vídeo incorporado. Para isso, basta adicionar a tag fb-video à sua publicação:

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

Se você não estiver usando o SDK do Facebook para JavaScript e incorporar o vídeo pelo trecho de código de copiar e colar que pode ser obtido na própria publicação de vídeo, o plugin do player de vídeo incorporado provavelmente não será renderizado. Isso poderá ocorrer porque o Wordpress converterá todos os caracteres & para #038; e interromperá o player.

Em vez disso, use este código para adicionar o plugin:

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

Uma nova integração mais simples com o Wordpress será lançada em breve.

Perguntas frequentes

Posso usar a propriedade de videoembed_html da Graph API?

Não, não use a propriedade embed_html. Em vez disso, use o plugin do player de vídeo incorporado.

Sobre a propriedade embed_html:

O ponto de extremidade da Graph API video fornecerá a propriedade embed_html. Seu valor terá um elemento HTML que poderá ser incorporado a uma página da web para reproduzir o vídeo solicitado.

Não confunda esse valor com o plugin do player de vídeo incorporado. Recomendamos não usar mais essa propriedade. Em vez disso, use o plugin do player de vídeo incorporado.

Se você usar o valor da propriedade embed_html, o player de vídeo:

  • não funcionará em dispositivos móveis e tablets;
  • não conterá informações adicionais, como visualizações, título do vídeo, entre outras.

Exemplo da propriedade embed_html (obsoleta):

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