Como colocar e moderar comentários do Facebook no Blogger

+Ampliar

Como colocar comentários do Facebook com sistema de moderação no blogger/blogspot e junto com os comentários do próprio Blogger.
Que o Facebook é uma das ferramentas mais poderosas em matéria de divulgação de um site ou Blog, isso todos sabemos, por isso é de suma importância que os blogs possam se conectar ao máximo com o facebook, seja através dos plugins de curtir, compartilhar , caixa de curtir  Paginas e comentários.


De todos os itens citados acima, o mais importante é o sistema de comentários do Facebook no Blogger. A implementação da caixa de comentários do Facebook no blogger, não só aumenta as chances de um blog receber comentários, como também ajuda em muito na divulgação, afinal, ao comentar em um blog, existe a opção ( que fica marcada automaticamente) do leitor enviar para sua timeline o seu comentário, juntamente com a página do blog comentado. Caso não queira divulgar o comentário no Facebook o leitor terá que desmarcar a caixa.
Como colocar comenta´rios do Facebook no Blogger/Blogspot.
O primeiro passo essencial é possuir um numero de celular com créditos, pois sem isso, voce não irá receber o código de confirmação do facebook DEVELOPERS.

• Certifique-se que sua conta é confirmada por celular em https://www.facebook.com/settings?tab=mobile , em caso negativo cadastre um celular com créditos na sua conta.
• Entre no http://developers.facebook.com/setup/  para criar um aplicativo, preencha somente os campos “App Name:”– que será o nome que você dará ao aplicativo – e “Espaço de nome do aplicativo” que será o endereço do app no Face.
• Após toda a etapa de criação se completar (captcha e etc)  copie e cole o numero da sua ID de aplicativo no bloco de notas, pois essa ID será usada mais tarde
•  
• Preencha o campo “informações básicas” da seguinte forma:
• Display Name: – nome do app
• Contact Email: – Endereço de e-mail para contato mantenha o que usa para se logar no face, e que provavelmente já estará configurado.
• App Domains: Escreva endereço do seu blog sem o http ou www. ATENÇÃO nessa parte, 
  1- se não funcionar como blablbla.blogspot.com.br use sem o br.
  2- Caso voce tenha comprado um dominio proprio e o mantenha no no blogger coloque o endereço do dominio e não do blogger. 
  3 - Caso você use um Subdominio coloque o endereço do dominio, por exemplo, no caso do meu tattoo-estimulanet.com coloquei estimulanet.com .
• Website with Facebook Login : coloque o endereço completo do seu blog com http e www. Salve as configurações

Colocando o sistema de comentários do Facebook no HTML do Blogger
Como de praxe, antes de mexer no Html do seu blog Faça um backup do modelo, se algo der errado basta colocar de volta.

• Clique em Expandir modelo de Widgets

com Ctrl+F procure pela tag <div class='comments' id='comments'> – ATENÇÃO podem existir 2 dessa tags, nesse caso coloque o código DEPOIS  segunda, se no final do processo não der certo, retire da segunda e coloque DEPOIS da primeira . Eis o Código:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

As partes customisáveis desse código são num_posts ( numero de comentários a serem exibidos e width= que no caso se refere a largura da caixa de comentatários. Salve o Blog

• Agora insira o próximo código ANTES da Tag </head> e troque a Frase SUA_ID pelo numero de ID do seu aplicativo no Facebook que você salvou no bloco de nota. ATENÇÃO mantenha as aspas
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='SUA_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Salve mais uma vez seu blog e procure dessa vez pela Tag ]]></b:skin> e coloque o código abaixo ANTES dela

.comments-page {background-color: #f2f2f2;}
#blogger-comments-page {padding: 0px 5px;display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Atenção, repare que no inicio do código acima, antes de comments-page tem um pontinho, não esqueça de copia-lo também, pois faz parte do código. Salve seu Blog e veja se tudo deu certo.
Como moderar os comentários do Facebook feitos no Blogger:
Para fazer a moderação dos comentários Acesse o http://developers.facebook.com/tools/comments e procure pelo nome do seu blog no menu lateral esquerdo ou mesmo diretamente no painel dos comentários do seu blog, caso vc esteja  logado no facebook. Clique em Configurações. Coloque uma pessoa para ser moderadora, ( claro que essa pessoa é você, assim será notificado no mural do facebook cada vez que houver um novo comentário. LEMBRE-SE. Caso queira, você pode colocar outras pessoas para ser moderador dos comentários, desde que ela seja sua amiga no Facebook.

• Make every post public by default. Nesse modo a pessoa publica o comentário sem aguardar a moderação, você poderá moderá depois. Caso voc~e tenha feito uma Lista Negra de palavras, o comentário que a contiver não será publicado
• Let me approve each comment before it appears. O comentário só aparecerá no Blog após a sua aprovação

Tweet