Como configurar o plugin de comentário do facebook no site? (responsivo)

Muitas pessoas ainda sentem dificuldade em configurar um plugin do facebook no site, seja ele uma simples caixa de curtida, uma de compartilhar ou até mesmo um Plugin de Comentário responsivo do facebook. Pensando nisso, criei um tutorial explicando passo a passo como inserir um plugin de comentário do facebook de forma responsiva no seu site.

Esse tutorial funciona perfeitamente em sites criados em wordpress, bootstrap… 

 

Telas do plugin - Desktop e Mobile. Plugin de Comentário responsivo

Essa regra serve basicamente para todo o resto. A partir do momento que você aprender a configurar o plugin do comentário, você já poderá implementar todos os outros plugins.

Vamos lá.

1- Entre na página developers do facebook

Tela de Developers do Facebook - Plugin de Comentário responsivo
Tela de Developers do Facebook

Não é obrigatório, mas é altamente recomendado pela comunidade de programadores que antes de inserir no seu código o plugin comentário do facebook, você deve primeiro criar um AppID. Segue então a explicação detalhada desses passos.

2- No menu acima, do lado de Developers você encontra “My Apps“, clique nesse link e aparecerá um submenu para você clicar na opção “Add a New App”, como mostra a  figura abaixo.

Tela Add a New App do facebook. Plugin de Comentário responsivo
Tela Add a New App do facebook

3- Clique em “Advanced Setup” e essa tela aparecerá:

Tela Advanced Setup do facebook. Plugin de Comentário responsivo
Tela Advanced Setup do facebook

Você deverá preencher os campos de acordo com o que se pede:

•Nome de Exibição: O nome do seu app ou site.

•Namespace: Uma palavra única que vai identificar seu app/site. É opcional.

•Sim/Não: Esse botão aparecerá apenas quando você está criando o AppId mais de uma vez.

•Categoria: Selecione “Arquivos para Páginas”

Depois de preencher todos os campos, clique em “Crie um ID do Aplicativo“.

Pronto, o ID já está criado.

Após criar o ID, agora você pode inserir o comentário no código.

4- Na barra de menu, clique em Developers.

Tela de Facebook Devloper Conference - Save the Date. Plugin de Comentário responsivo

Desça a página até encontrar “Discover more Products”, que em tradução livre para o português é “Descubra mais produtos”. Quando encontrar,  clique em “Website”, onde na imagem abaixo está na cor cinza.

Tela - Discover more Products do facebook. Plugin de Comentário responsivo
Tela – Discover more Products do facebook

Repare que quando você clicou em “Website” os links que estavam abaixo mudaram. Agora você pode clicar em “Facebook Comments” e é nesse momento que você será redirecionado a página que tem os códigos que você vai precisar.

5- Desça a página até encontrar uma tela igual a imagem abaixo:

Tela de visualização dos Comentários. Plugin de Comentário responsivo

Clique então no botão grande azul chamado “Plug-in de Comentários“, vai te redirecionar a outra tela, nela você deve clicar em “Comments Plugin Configurator“. E então a tela a seguir irá aparecer.

Tela - Comments Plugin Configurator do facebook. Plugin de Comentário responsivo
Tela – Comments Plugin Configurator do facebook

Nessa tela você escolhe o tamanho o qual você quer deixar sua caixa de comentário em pixel. E o número de posts que você quer que apareçam nos comentários em “Number of Posts”, sendo o número padrão do facebook 5.

6- Descendo mais a tela,  você encontrará um botão azul escuro escrito “get Code” como o da imagem a baixo.

Tela - botão get Code do facebook. Plugin de Comentário responsivo
Tela – botão get Code do facebook

Clique nesse botão e aparecerá para você uma tela com dois códigos, sendo:

1° o código do facebook o qual você colocará dentro do seu código, sendo o lugar ideal para inserir esse código é logo após o body.

2° o código em que você colocará no lugar do código onde você deseja que o comentário apareça.

A tela abaixo ilustra o que foi comentado acima:

Tela - Códigos do comentário. Plugin de Comentário responsivo
Tela – Códigos do comentário

Recapitulando:

Pegue o primeiro código e cole depois do body do seu código. O segundo código você irá colar onde quer que os comentários sejam exibidos no seu site.

Note que no segundo código o data-href está com um código diferente, você deve então apagar o que está dentro das aspas duplas ” ” e colar o código a seguir dentro, o código ficará assim:

<?php echo ‘http://’.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’]; ?>

A função desse código é simples, ele vai “pegar” exatamente a URL do seu post. É uma URL única.

Se você quiser fazer um teste e ver como está imprimindo na tela a URL, dentro do seu código coloque:

<h1 style=”color: red”><?php //echo ‘http://’.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’]; ?></h1>

Atenção, o código acima é somente para teste. Não é necessário no código.

7- RESPONSIVIDADE

Agora é a hora que todos estavam esperando. Para deixar a caixa de comentário do facebook responsiva no seu site, você precisa apenas encontrar na sua IDE o seu código (para quem acompanhou o tutorial inteiro, você precisa encontrar o segundo código) e apenas trocar o data-width=”600″  por data-width=”100%”. Quando você fizer isso, o navegador vai reconhecer o tamanho da tela e redimensionar o tamanho da caixa de comentário.

Observação: Apenas com o data-width=”100%” a responsividade funciona, mas eu acho interessante inserir o data-mobile=”auto-detected”. Agora você já tem conhecimento o suficiente para decidir se implementa o código ou não.

Boa Sorte. ;)