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.
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&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.