Plugin de Página

O plugin de Página permite incorporar e promover facilmente qualquer Página do Facebook no seu site. Como no Facebook, os visitantes podem curtir e compartilhar a Página sem sair do seu site.

Configurações

Além das configurações acima, também é possível alterar o seguinte:

Configuração Atributo HTML5 Descrição Padrão

href

data-href

A URL da página do Facebook

Nenhuma

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

Guias a renderizar, ou seja, timeline, events e messages. Use uma lista separada por vírgulas para adicionar várias guias, 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


Atributos obsoletos

  • O atributo data-show-posts está 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 sua 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.

Guias da Página: Linha do Tempo, Eventos e Mensagens

Agora você pode incluir as guias Linha do Tempo, eventos e mensagens no plugin:

  • Guia Linha do Tempo: mostra as publicações mais recentes na Linha do Tempo da sua Página do Facebook.
  • Guia Eventos: as pessoas podem acompanhar os eventos da sua página e assinar eventos através do plugin.
  • Guia Mensagens: as pessoas podem enviar mensagens para sua Página diretamente do site. Elas precisam ter feito login para usar esse recurso.

Como habilitar mensagens na sua Página

Para habilitar mensagens na sua Página do Facebook, acesse as Settings da sua 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 guias

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

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

Também é possível adicionar uma única guia 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 pai durante o carregamento da página (mínimo 180px, máximo 500px), o que é útil nas mudanças de 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 pai for maior do que a do plugin de Página width, 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 pai.

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 pai, mas:

  • O plugin determinará sua 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 se ajuste quando a janela for redimensionada, 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 restritas de forma privada

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

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. Quando você carregar o SDK, altere o valor de js.src para usar 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 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. Para saber mais, consulte nossa página Localização e tradução.