Como colocar os comentários do Facebook no seu blog

Sem dúvida o Facebook toma conta do planeta internet nos dias de hoje, com isso trouxemos pra você um tutorial interessante que irá te possibilitar adicionarem os comentários do Facebook nas suas páginas. Isso poderá até mesmo aumentar o volume de visitas do seu blog. Então vamos ao passo-a-passo.

Fase 1 - Facebook: 

1º) Logado no Facebook acesse a página Facebook developers nela você deverá encontrar estas opções:

2º) Clique em Register Now

3º) Concorde com os Termos de Uso e clique em continuar.

4º) Avance as etapas até concluir o registro (durante este processo será necessário fazer uma verificação via celular.

5º) Agova vamos criar o aplicativo, basta clicar aqui:

6º) Avance as etapas preenchendo o que lhe for pedido, ao final você poderá encontrar a ID de seu Aplicativo, Este ID será necessário nas próximas etapas.

Com o Ip em "mãos" concluimos a primeira parte, agora vamos para a fase 2.

Descubra aqui como ganhar mais de 100 reais por dia com um blog na internet.

Fase 2 - Blogger:

É sempre importante lembrar que qualquer alteração errada no HTML do seu blog pode ser definitiva e consequentemente fatal por isso sempre salve o backup do modelo antes de começar as alterações.

1º) Acesse a página Modelo e clique em Editar HTML, clique sobre o código HTML e pressione CTRL+F, aparecerá uma caixa de buscas, nela pesquise por:

<div class='comments' id='comments'>

ATENÇÃO: Existem templates onde é necessário encontrar este trecho mais de uma vez, em alguns casos é necessário fazer a alterações todas as vezes em que este trecho se repetir em outros casos isto já não é necessário, portante é necessário que você teste.

2º) Abaixo desta linha cole:

<div class='comments-tab' id='fb-comments'  onclick='javascript:commentToggle("#fb-comments");'  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("#blogger-comments");'  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 == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

3º) Após salvar procure por </head> e ANTES desta tag cole:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='SEU 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>

4º ) Onde você vê SEU ID  troque pelo ID que você colheu no Facebook. Salve mais uma vez e vamos para os últimos ajustes.

5º) Procure por ]]></b:skin> e ANTES desta tag cole:

 .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;}

Claro que este método irá melhorar muito o seu blog e com isso você com certeza poderá arrecadar mais verdinhas com ele, sendo assim aproveite e veja também as formas de monetizar o seu blog assim você saber se é possível ganhar dinheiro de outras formas e rentabilizar o seu blog.

Finalmente o fim!

Agora salve tudo o desfrute de seu novo recurso.

Caso você queira testar também um outro sistema de comentários, de uma olhada neste tutorial, ele irá te ensinar a usar o sistema de comentários Disqus, boa parte dos melhores blogs estão se rendendo a ele, então dê uma olhadinha...

Se necessário ou se possível deixe seu comentário.