Blog

Como Adicionar a Like Box / Fan Box do Facebook no WordPress

Facebook Like
Tutoriais

Como Adicionar a Like Box / Fan Box do Facebook no WordPress

A Like Box do Facebook, também conhecida como Fan Box ou mesmo Caixa de Fãs do Facebook, tornou-se um elemento obrigatório para muitos site. Ela proporciona aos seus usuários uma maneira fácil de se juntar à sua comunidade/página no Facebook e receber atualizações em seu feed de notícias do Facebook. Já falamos sobre como adicionar o Botão Curtir, Botão Enviar e Comentários do Facebook. Então, neste artigo, vamos mostrar a você como adicionar a Fan Box do Facebook no WordPress.

Adicionando a Like Box usando o Plugin Oficial do Facebook para WordPress

Talvez a maneira mais simples de adicionar uma Like Box do Facebook no seu site WordPress, seja usando o plugin oficial do Facebook para WordPress. A primeira coisa que você precisa fazer é instalar e ativar o plugin Facebook. Depois de ativar o plugin, vá em “Aparência » Widgets“. Basta arrastar e soltar o Widget Facebook Like Box à sua barra lateral (sidebar). Você terá que fornecer a URL da sua página de fãs no Facebook nas configurações do widget.

Widget Like Box

O widget tem as mesmas opções que plugins sociais do Facebook. Você pode optar por mostrar um stream, mostrar rostos, remover cabeçalho, mudar a cor da borda, etc. Atualmente apenas dois temas estão disponíveis: claro e escuro.

Adicionando a Like Box manualmente, sem usar qualquer Plugin

É possível adicionar a Like Box do Facebook manualmente, sem usar qualquer plugin. Vá para a página Like Box nos Plugins Sociais do Facebook. Forneça a URL da sua página do Facebook e configure a aparência da Like Box.

Obtendo o código para adicionar manualmente a Like Box do Facebook no WordPress

Pressione o botão Obter Código “Get Code” para obter o código da Like Box.

O Facebook oferece várias maneiras de adicionar o código da Like Box em seu site. Você pode escolher entre HTML5, XFBML, IFRAME e URL. Vamos mostrar-lhe como adicionar cada um deles, mas você precisa escolher um. Em nossa opinião o HTML5 é uma opção razoavelmente boa para a maioria dos sites WordPress. XFBML é bom para as pessoas que utilizam outros plugins do Facebook que usam XFBML para exibir botões do Facebook. Use IFRAME apenas se as duas primeiras opções não funcionarem para você.

Like Box do Facebook disponível em vários tipos de código

Adicionando Código HTML5 da Like Box do Facebook no WordPress

Clique na aba HTML5 a partir da janela de código e copie a primeira parte do código. Eles recomendam a você colá-lo logo após tag <body> que é normalmente encontrado em seu arquivo header.php. No entanto, ele vai funcionar em qualquer lugar do body. Para tornar as coisas fáceis para você, você pode simplesmente adicioná-lo no rodapé usando o plugin Insert Headers and Footers. A primeira parte do código ficaria assim:

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Este javascript conecta seu site à biblioteca javascript do Facebook. Agora copie a segunda parte do código, o que seria algo parecido com isto:

<div class="fb-like-box" data-href="http://www.facebook.com/wpteste" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Esta parte do código informa ao javascript para exibir a Like Box neste local e com esses parâmetros. Para este exemplo, vamos colar esse código em um widget da barra lateral. Vá para “Aparência » Widgets“. Agora, Arraste e solte um widget de texto à sua barra lateral e cole o código que você copiou para ele. Salve o seu widget e verificque seu site.

Isto irá funcionar em qualquer outra área do seu site também. Se você é experiente com códigos, então, você pode colar isso no seu rodapé, após o post, etc.

Não se esqueça de mudar a URL da Página de fãs do exemplo para sua própria URL.

Adicionando Código XFBML da Like Box do Facebook no WordPress

Clique na aba XFBML para obter o código para a Like Box do Facebook. Para adicionar uma Like Box do Facebook XFBML, você precisa adicionar três pequenos pedaços de código no WordPress.

Copie o primeiro pedaço de código e cole-o no arquivo header.php do seu tema, logo após a tag <body>. Semelhantemente ao último, este código irá funcionar em qualquer lugar do body. Para tornar as coisas mais fáceis, você pode simplesmente adicioná-lo no rodapé usando o plugin Insert Headers and Footers. Este código deve ser algo parecido com isto:

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Esta pequena função javascript conecta seu site à biblioteca javascript do Facebook.

A segunda linha de código é uma declaração de namespace XML, e você precisará adicioná-lo na tag <html> do seu site. A maneira mais fácil seria abrir o arquivo functions.php do seu tema e colar o seguinte código:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

Por fim, copie a terceira linha de código que poderia ser algo como isto:

<fb:like-box href="http://www.facebook.com/wpteste" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

Este código diz ao javascript que você carregou na primeira etapa, para exibir a Like Box neste local com esses parâmetros. Vá para “Aparência » Widgets“. Arraste e solte um widget de texto à sua barra lateral e, dentro dele, cole a terceira linha de código. Salve as alterações e visualize o seu site.

Adicionando IFRAME da Like Box no WordPress

Clique na aba IFRAME para copiar o código iframe. Vá para “Aparência » Widgets“, arraste e solte um widget de texto à sua barra lateral. Cole o código iframe dentro do widget de texto e salve as alterações. Abra o site para visualizar a Fan Box do Facebook.

Nota: O método de adicionar a Like Box via URL, basicamente, será para utilizar a URL fornecida pelo facebook em um IFRAME.

Esperamos que este artigo tenha ajudado você adicionar a Like Box / Fan Box do Facebook em seu site WordPress. Para perguntas e dúvidas, por favor, deixe um comentário abaixo.

Deixe seu comentário aqui...

O seu endereço de e-mail não será publicado.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Nosso site usa cookies e, portanto, coleta informações sobre sua visita para melhorar nosso site (por meio de análise), mostrar a você conteúdo de mídia social e anúncios relevantes. Por favor, consulte nossa página Termos & Políticas para mais detalhes ou concorde clicando no botão 'Aceitar'. OBS: Ao continuar a navegação, você, automaticamente, concorda.

Configurações de Cookies

Abaixo, você pode escolher os tipos de cookies que quer permitir neste site. Clique no botão "Salvar Configurações de Cookies" para aplicar sua escolha.

FuncionalNosso site usa cookies funcionais. Esses cookies são necessários para permitir que nosso site funcione.

AnalíticoNosso site usa cookies analíticos para permitir a análise de nosso site e a otimização para o propósito de a.o. a usabilidade.

Mídia SocialNosso site coloca cookies de mídia social para mostrar conteúdo de terceiros, como YouTube e Facebook. Esses cookies podem rastrear seus dados pessoais.

PublicidadeNosso site coloca cookies de publicidade para mostrar anúncios de terceiros com base em seus interesses. Esses cookies podem rastrear seus dados pessoais.

OutrosNosso site coloca cookies de terceiros de outros serviços que não são analíticos, mídia social ou publicidade.