Publicações incorporadas

As publicações incorporadas são uma maneira simples de colocar publicações públicas (de uma Página ou pessoa no Facebook) no conteúdo do site ou da página da Web. Só é possível incorporar as publicações públicas de Páginas e perfis do Facebook.

Gerador de Códigos

URL da publicação
Largura do pixel da publicação (entre 350 e 750)

Configurações

Configuração Descrição Padrão

data-href

O URL absoluto da publicação.

n/a

data-width

A largura da publicação. Mínimo de 350 pixels; máximo de 750 pixels. Esvaziar para usar uma largura flexível.

largura flexível

data-show-text

Aplica-se à publicação de fotos. Defina como true para incluir o texto da publicação do Facebook, se for o caso.

false

Como obter o código de uma publicação

1. Navegue até a publicação

É possível obter o código de incorporação na própria publicação. Se a publicação for pública, clique no ícone que aparece no canto superior direito dela no Facebook.

Escolha Embed Post no menu suspenso:

Caso seja uma publicação de foto, selecione o botão Embed Post no canto inferior direito:

2. Copie e cole o código

Aparecerá uma caixa de diálogo com o código para incorporar a publicação. 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 Adicionar código manualmente

Adicionar código manualmente

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

1. Obtenha o URL da publicação

Primeiro, é necessário obter a URL da publicação que deseja compartilhar. A publicação deve ser pública, o que é indicado pelo ícone de globo cinza que fica ao lado do horário de publicação:

Para fins de teste, você pode usar esta URL de exemplo:

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. Carregue o JavaScript SDK

Para usar o plugin de publicações incorporadas 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; o ideal é que ele fique após a tag de abertura <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&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Para receber mais ajuda na implementação do JavaScript SDK, consulte JavaScript SDK — Início rápido.

3. Posicione a tag de publicação incorporada

Depois, posicione a tag da publicação incorporada em qualquer ponto do seu site. Substitua {your-post-url} pela URL da publicação.

<div class="fb-post" data-href="{your-post-url}"></div>

4. Teste

Depois de concluir essas etapas, você pode testar a publicação incorporada. A integração completa será mais ou menos assim:

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

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

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 no horário de publicação e copie o endereço do link.

Ambos os métodos estão destacados em vermelho na captura de tela abaixo.

Pela Graph API

Se você quiser integrar automaticamente as publicações incorporadas ao seu site, provavelmente usará a Graph API para agregar publicações. Por exemplo você pode usar o Ponto de extremidade da API do feed da página e o parâmetro fieldspermalink_url.

A resposta à sua solicitação para /{page-id}/feed?fields=permalink_url enviará a você uma resposta como esta:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Layout no computador

É possível ajustar a largura das publicações incorporadas no computador através do atributo data-width da tag de publicações incorporadas, como no exemplo abaixo. Escolha um valor entre 350 e 750 pixels.

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

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

Layout na Web móvel

Na Web móvel, as publicações incorporadas são automaticamente dimensionadas para ter a largura do contêiner.

Wordpress

Caso você já use o SDK do Facebook para JavaScript em seu site do Wordpress, pode usar o plugin de publicações incorporadas simplesmente acrescentando a tag fb-post à sua publicação:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Caso não esteja usando o SDK do Facebook para JavaScript e faça a incorporação pelo trecho de copiar e colar, que você pode obter na própria publicação, o plug-in de publicações incorporadas provavelmente não será renderizado, porque o Wordpress converterá todos os gráficos & em #038; e interromperá o plug-in.

Em vez de fazer isso, use este código para adicionar o plug-in:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.11'
    });
  }; 
  (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>

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

Perguntas frequentes

Se estiver usando as versões HTML5 ou XFBML, inclua o código do idioma quando instanciar a biblioteca.

Quando você carregar o SDK, altere o valor de js.src para usar sua localidade. Substitua en_US pela sua localidade, por exemplo, fr_FR para usar francês (França):

// 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"; 

As localidades compatíveis estão listadas no arquivo XML de localidades do Facebook.

Talvez você tenha que ajustar a largura do Plugin Social para acomodar idiomas diferentes. Saiba mais em nossa página Localização e tradução.

A publicação incorporada mostra qualquer mídia vinculada a ela, bem como seu número de curtidas, compartilhamentos e comentários. Com a incorporação de publicações, os visitantes do site podem ver as mesmas informações avançadas mostradas no Facebook.com e seguir ou curtir autores de conteúdo ou de Páginas diretamente na incorporação.

A mensagem a seguir será mostrada no lugar da publicação incorporada: