Plugin de Página

O plugin de Página permite incorporar e promover facilmente qualquer Página pública do Facebook no seu site. Como no Facebook, os visitantes podem curtir e compartilhar a Página sem sair do seu site. É possível usar esse plugin para qualquer Página que não tenha restrições, como de idade ou país.

Tópicos relacionados: Perguntas frequentes sobre plugins sociais | Outros plugins sociais

href

tabs

width

height

small_header

adapt_container_width

hide_cover

show_facepile

Receber código

Configurações

Além das configurações acima, também é possível realizar estas alterações:

Configuração	Atributo HTML5	Descrição	Padrão
`href`	`data-href`	A URL da Página do Facebook.	Nenhum
`width`	`data-width`	A largura em pixels do plugin. Mínimo: `180`, máximo: `500`.	`340`
`height`	`data-height`	A altura em pixels do plugin. Mínimo: `70`.	`500`
`tabs`	`data-tabs`	Abas a renderizar, ou seja, `timeline`, `events` e `messages`. Use uma lista separada por vírgulas para adicionar várias abas, ou seja, `timeline, events`.	`timeline`
`hide_cover`	`data-hide-cover`	Ocultar a foto da capa no cabeçalho.	`false`
`show_facepile`	`data-show-facepile`	Mostrar fotos do perfil quando amigos curtirem.	`true`
`hide_cta`	`data-hide-cta`	Ocultar o botão personalizado de chamada para ação (se disponível).	`false`
`small_header`	`data-small-header`	Usar o cabeçalho pequeno.	`false`
`adapt_container_width`	`data-adapt-container-width`	Tentar ajustar à largura do contêiner.	`true`
`lazy`	`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`

Atributos obsoletos

O atributo data-show-posts ficou obsoleto. Use o atributo tabs/data-tabs e o valor timeline para mostrar publicações da linha do tempo da Página.

Como adicionar o plugin de Página a um site

A configuração-padrão do plugin de Página inclui somente o cabeçalho e a foto de capa. O tamanho é perfeito para promover a Página em um espaço pequeno, como a parte superior de uma barra lateral.

<div class="fb-page" 
data-href="https://www.facebook.com/facebook"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>

Chamada para ação

Caso a Página tenha um botão de chamada para ação personalizado, ele será exibido no lugar da chamada para ação-padrão, que é um botão Compartilhar.

Se a largura do plugin for inferior a 280 px, o botão Compartilhar-padrão será exibido para evitar o desalinhamento do design em diferentes traduções.

Abas da Página: Linha do tempo, Eventos e Mensagens

Agora é possível incluir as abas Linha do tempo, Eventos e Mensagens no plugin:

Linha do tempo: mostra as publicações mais recentes na linha do tempo da sua Página do Facebook.
Eventos: as pessoas podem acompanhar os eventos da sua Página e assinar eventos pelo plugin.
Mensagens: as pessoas podem enviar mensagens para a sua Página diretamente do site. Elas precisam ter feito login para usar esse recurso.

Como ativar mensagens na sua Página

Para ativar mensagens na sua Página do Facebook, acesse as Settings da Página. Na linha Messages, marque Permitir que as pessoas entrem em contato com a minha Página de forma privada exibindo o botão Mensagem (link direto: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

Como adicionar várias abas

Use uma lista separada por vírgulas com o atributo data-tabs para adicionar várias abas:

<div class="fb-page" 
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380" 
data-hide-cover="false"></div>

Uma única aba

Também é possível adicionar uma única aba mostrando timeline, events ou messages:

<div class="fb-page" 
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>

Largura adaptável

Por padrão, o plugin se adaptará conforme a width do contêiner principal durante o carregamento da página (mínimo 180px, máximo 500px), o que é útil para mudar o layout:

<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

Se a width do elemento principal for maior do que a width do plugin de Página, ele manterá o valor definido em data-width:

<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

O plugin nunca será menor que 180px:

<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

Para desativar a largura adaptável, desmarque a opção Adaptar à largura do contêiner do plugin, e o plugin será renderizado na largura especificada a despeito do contêiner principal.

Sem redimensionamento dinâmico

O plugin de Página trabalha com layouts responsivos, fluidos e estáticos. É possível usar consultas de mídia ou outros métodos para definir a width do elemento principal, mas:

o plugin determinará a própria widthdurante o carregamento da página;
ele não reagirá às mudanças no modelo de caixaapós o carregamento da página.

Se você quiser que a width do plugin seja ajustada de acordo com o redimensionamento da janela, será preciso renderizar o plugin manualmente.

Mostrar rostos de amigos

Mostra quem curte sua Página com as imagens reais dos perfis em vez de um número. As pessoas que acessarem sua Página verão a quantidade de amigos que curtem essa Página, bem como as fotos de perfil deles.

Para ativar essa opção, marque Show Friend's Faces no configurador.

<div class="fb-page"
data-href="https://www.facebook.com/imdb" 
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>

Páginas com restrições de privacidade

Páginas do Facebook com restrições de privacidade não podem ser incorporadas.

Como mudar o idioma

É possível alterar o idioma do plugin de Página carregando uma versão localizada do SDK do Facebook para JavaScript. Ao carregar o SDK, altere o valor de js.src para usar a sua localidade. Substitua en_US pela sua localidade, por exemplo, ru_RU para usar russo (Rússia):

Exemplo

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

As opções compatíveis estão listadas no arquivo XML de localidades do Facebook. Talvez você tenha que ajustar a largura do Plugin Social para incluir idiomas diferentes. Para saber mais, consulte nossa página Localização.