Publicações incorporadas

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

Gerador de Códigos

href

width

show_text

Receber código

Configurações

Configuração	Descrição	Padrão
`data-href`	A URL absoluta da publicação.	`n/a`
`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 da publicação. Mínimo de `350` pixels, e máximo de `750` pixels. Deixe em branco para usar 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. Acesse a publicação

É possível obter o código de incorporação na própria publicação. Se a publicação for aberta, 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 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 do Gerador de Códigos, é possível incorporar o código manualmente.

1. Obtenha a URL da publicação

Primeiro, é necessário obter a URL da publicação que você quer 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, use esta URL de exemplo:

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

2. Carregue o SDK para JavaScript

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, 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 de publicação incorporada

Depois, posicione a tag da publicação incorporada em qualquer ponto do 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, é possível testar a publicação incorporada. A integração completa será mais ou menos assim:

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

Copie a URL do link permanente na barra de endereços do navegador.
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 de modo automático as publicações incorporadas ao seu site, provavelmente usará a Graph API para agregar publicações. Por exemplo, é possível usar o ponto de extremidade da API do feed da página e o parâmetro fields em permalink_url.

A resposta à sua solicitação para /{page-id}/feed?fields=permalink_url será semelhante a esta:

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

Layout no desktop

É possível ajustar a largura das publicações incorporadas no desktop por meio 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 resultar em 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 já use o SDK do Facebook para JavaScript no seu site do Wordpress, você poderá 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>

Se não estiver usando o SDK do Facebook para JavaScript e fizer a incorporação pelo trecho de copiar e colar (que você pode obter na própria publicação), o plugin de publicações incorporadas provavelmente não será renderizado, já que o Wordpress converterá todos os caracteres & em #038; e interromperá o plugin.

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v25.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></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

Como eu exibo Plugins Sociais em línguas diferentes?

Se você estiver usando as versões HTML5 ou XFBML, você deve incluir o código de linguagem ao 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. Encontre mais informações sobre sua página Localização e Tradução.

Link permanente

O que as pessoas veem nas publicações incorporadas?

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.

Link permanente

O que acontece se alguém excluir a publicação ou alterar o respectivo seletor de público?

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

Link permanente