CAIXA DE COMENTÁRIO DO FACEBOOK

Tem muita gente na internet que se propõe à ajudar copiando post de outros e colocando no seu blog. Bem, esses indivíduos acabam ensinando a fazer as coisas de modo errado. Aqui vou ensinar corretamente como, colocar a caixa de comentários do Facebook.





1º - Se você não tiver uma conta no Facebook deve criar uma, caso já tenho faça login, como na imagem abaixo.


2º - Acesse a página https://developers.facebook.com/apps e clique em criar novo aplicativo, como demonstrado na imagem abaixo.


3º - Em seguida, abrirá uma página como na imagem abaixo. Nesta página digite em App Name o nome do aplicativo, por exemplo: comentários ou caixa de comentário pra o blog. Também selecione Web Hosting.


4º - Abrirá uma página para você: Verificação de segurança necessária, como demonstrada na imagem abaixo, preencha com os dados que aparecem.


5º - Caso abra uma janela como a imagem abaixo clique em cancelar. Se você ainda não configurou sua conta no Facebook com o número do seu celular, configure, pois, o Facebook pedirá para você inserir um número de celular e te enviará uma mensagem com o código de acesso. É simples, é só seguir os passos solicitados.


6º - Após a confirmação com o número do celular, abrirá uma página como abaixo, caso não abra, no lado esquerdo da página estará o aplicativo com o nome que você criou, selecione e clique em editar aplicativo, assim, abrirá uma página como abaixo.

7º - Bem, aqui você irá configurar o aplicativo com os dados do seu blog.
Na aba Informações básicas em Contact Email, digite o email para correspondência, pode ser o email que você quiser. Em App Domains, insira o endereço do seu blog, exemplo: http://filosofialaica.blogspot.com.br/.  Em Category, escolha uma categoria, eu escolhi, aplicativo para páginas. Neste caso, escolha a melhor opção para o seu blog.
Em seguida, na aba, Selecione o modo como seu aplicativo se integra com Facebook, em Website with Facebook Login, Site UR: insira novamente o endereço do seu blog e clique em salvar.
Obs. Caso as outras janelas, como, App on Facebook, Mobile Web, Native iOS App, Native Android App, Page Tab, estejam abertas, clique no X do lado direito para fecha-las.

8º - Clique em Facebook developers, como demonstrado na imagem abaixo, e depois clique em DESENVOLVAPARA SITES, será o primeiro ícone da esquerda.





9º -Em seguida, clique em Social Plugins, como na imagem abaixo.



10º - Em seguida, clique em Comments. Como demonstrado na imagem abaixo.


11º - Abrirá a página onde você vai gerar o código do comentário em html, como demonstrado na imagem abaixo.

Na página acima em URL to comment on, não precisa mexer. Em Number of posts, você escolhe o numero de comentários que aparecerão no blog. Em Width, você escolhe a largura da caixa de comentários. Em Color Scheme, você escolhe a cor da caixa de comentários. Depois de configurado ao seu modo, clique em GET CODE.
12º - Abrirá uma caixa de diálogo como demonstrada abaixo. Estes são os códigos da sua caixa de comentários.
Obs.: Confira se em This script uses the app ID of your app está selecionado o nome da sua caixa de comentário, caso não esteja, selecione-o.
Agora faça login no seu blog e clique em MODELO e depois em EDITAR HTML, clique em prosseguir.
Na página de HTML, clique em Expandir modelos de widgets, depois clique em CTRL + F no seu teclado para abrir a caixa de pesquisa. Na caixa de pesquisa digite: <data:post.body/>,  então, de três ENTER logo após o código encontrado na caixa de html, para dar três espaços, copie o primeiro código e cole na página de HTML. 


AGORA PRESTE MUITA ATENÇÃO, no código que você inseriu no HTML você vai fazer a seguinte alteração: na linha em negrito, onde está o espaço, adicione as letras: amp; não se esqueça do ponto e vírgula. Então a linha ficará como abaixo, depois clique em SALVAR.
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=259824597460955";

<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/pt_BR/all.js#xfbml=1&___appId=259824597460955";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Agora de mais dois espaços, isto é, de dois ENTER  e adicione o segundo código.

No segundo código, onde está digitado: "http://example.com" apague e digite o seguinte:  'data:post.url' e logo depois de <div class="fb-comments"  junto ao código data-href= insira o seguinte, expr: não apague <div class="fb-comments", somente insira expr: e seu código ficará como demonstrado na segunda linha abaixo, clique em salvar.

<div class="fb-comments" data-href= "http://example.com" data-num-posts="10" data-width="470"></div>
<div class="fb-comments" expr:  data-href= 'data:post.url'data-num-posts="10" data-width="470"></div>



Pronto, verifique se está funcionando.
Caso tenha dado certo ou errado, deixe um comentário.