Tutorial: comentário do Facebook e do Blog ao mesmo tempo

Olá gente. 
Eu acho que alguém já deve ter percebido hoje que os comentário daqui do PHANNY TEEN mudaram! Quer dizer não totalmente, mas foi acrescentado os comentários do facebook *-* Mas por quê? Porque simplesmente é uma maneira ótima de divulgar o blog através do face, já que o assunto da internet é redirecionado a ele. A parte boa que gosto desse código é que você não perde os comentários do blog♥ Ah! Sem esquecer de agradecer ao Dicas para blogs.

Primeiro você terá que ter o código ID do seu Facebook e não da sua Fan Page! Adquira acessando este site www

Agora vamos aos seguintes passos em seu blog:

Modelo - Editar Html - Ctrl+F ou F3 e procure por:

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

Irá aparecer duas vezes. Na primeira vez em que aparece, cole abaixo dele, o seguinte 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://i62.tinypic.com/16q87o.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://i57.tinypic.com/acu39y.png'/> <data:post.numComments/> comentário(s)
</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='3' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

vermelho: imagem do logo do Facebook
verde: imagem do logo do Blogger
violeta: largura do formulário de comentário

Visualize para ver se não deu erro em seu blog e, depois salve!

Se não der certo usando a primeira vez em que o código <div class='comments' id='comments'> aparece  teste na segunda vez  o mesmo código: <div class='comments' id='comments'>

e abaixo desse código, cole o mesmo 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://i62.tinypic.com/16q87o.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://i57.tinypic.com/acu39y.png'/> <data:post.numComments/> comentário(s)
</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='3' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Você poderá alterar os seguintes itens:

vermelho é a url da imagem do facebook

verde é a url da imagem do blog

violeta você vai alterar a largura dos comentários como quiser

Não dará para ver o resultado clicando em visualizar, mas mesmo assim clique, pois assim você verá se aconteceu algum erro em seu blog. Se não deu nada de errado, salve!

Não acabou! 

Clique em Ctrl+F e procure por: </head> e acima dessa tag cole o seguinte código:

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

O que marquei de vermelho no código é do primeiro passo que eu lhe disse no começo do tutorial, e que eu pedi para você guardar, lembra? Pois é, você vai substituir o YOUR_FB_ID pelo código do ID do seu facebook que você guardou no início do post. Feito isso, salve!

Ainda não acabou

Ctrl+F novamente e procure por: ]]></b:skin> e acima dessa tag cole o seguinte código:

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

Ufa ... Esse foi o último passo!

• Lembrando que se você modera os comentários assim como o PHANNY TEEN modera, não irá acontecer com os comentários do Facebook, pois eles não são moderados, apenas as do blog;
• Sempre que alguém comentar irá uma notificação em seu Face.

Só para fazer foi mais de 1 hora escrevendo isso aqui kkkk' Só pra sair direitinho para vocês :D

Beijos e espero que tenha gostado.