1. Crie um aplicativo, vá no link https://developers.facebook.com/apps/
2. Clique em "Criar novo App" ou "Create new App" no botão do canto superior direito:
3. Vai abrir um box e nele coloque o nome do aplicativo, você pode colocar o nome do blog ou do que quiser em 'Display Name' e em 'Contribuintes' coloquem qualquer palavra(sem espaços) e em 'Categoria' escolha o tipo no caso eu coloquei'Comunicação' por que é para comentários para se comunicar(mas você pode colocar o que quiser) e depois 'Criar Aplicativo' :
obs: não pode colocar letra maiúsculas e nem separar a palavra onde aparece contribuintes
4. Pronto seu aplicativo foi criado. Você pode o configurar, personalizar, isso é com você, neste tutorial iremos precisar somente do código 'App ID' de seu aplicativo:
Não feche a página pois o código App ID é necessário.
5. Acesse o painel de seu blog, clique em 'Modelo' :
6. Vá em 'Editar Modelo' :
7. Usando F3 ou as teclas Ctrl+F procure por :
<body ou <body> ( se achar por '<body ' cole abaixo e se achar '<body' cole acima)
8. Abaixo desta tag cole :
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPID', // App ID
channelUrl : '//www.seudominio.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/pt_BR/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
9. Substitua o "APPID" pelo código do seu aplicativo criado.
10. Substitua logo depois "www.seudominio.com" pelo link do seu blog. Ex.:www.compactado.com
11. Procure pela tag :
<data:post.body/> (poderá achar ate 3 do mesmo código) (consegui fazer pelo 2º)
ou
<div class=’post-footer-line post-footer-line-1‘/>
12. Abaixo dela cole :
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><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"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-comments' data-colorscheme='light' data-num-posts='3' data-width='420' expr:href='data:post.url'/> </b:if>
13. Agora procure por :
<head>
14. Abaixo do código acima cole isso (necessário para moderação dos comentários) :
<meta property='fb:app_id' content='ID APP' />
15. Novamente substitua "ID APP" pelo id do seu aplicativo:
Personalizando widget
- data-width='420' : Largura do widget, vá ajustando para o melhor tamanho que se adequar a seu blog, vou pode ir diminuindo ou aumentando a largura alterando o '420' pelo tamanho em pixels que achar melhor.
- data-colorscheme='light' : Como na maioria das template o fundo é branco, o código está customizado para esta cor, caso o seu contenha um fundo preto, mude para 'dark' pois poderá ficar melhor para seu template.
- data-num-posts='3' : Número de comentários no widget, no código está '3', mude para a quantidade de seu agrado.
16. Agora Salve o Modelo.
17. Os comentários do Facebook já estão adicionados
Moderação dos Comentários
Existe uma página para visualização e moderação dos comentários, clique no link abaixo para acessar: http://developers.facebook.com/tools/comments
Ocultando os comentários do blogger
Nas postagens irão aparecer os comentários do Facebook e do Blogger, para não ficar com os dois é necessário que você oculte os comentários do Blogger.
Acesse as Configurações > Postagens e comentários > EmComentários, local do comentário clique no menu de opções e clique em " Ocultar".
Este post foi escrito por: Matheus Ribeiro
Sou especialista em blogs e sites desde 2010, tento trazer conteúdos que os leitores procuram na internet.