Como colocar comentários do Facebook junto com os do blog

|| ||
Olá cherrys! Primeiramente, antes de começar o tutorial vou falar que farei uma mudança de datas de postagens aqui no blog, eu defini quer iria postar as terças e aos sábados, mas como vocês sabem eu criei um novo blog (quem quiser visitar clique aqui) e eu queria dar mais atenção a ele, então decidi que irei postar aqui no Sweet as quartas e aos sábados. Agora vamos ao post.

O tutorial de hoje foi um pedido da Camila Lima do blog Segredos da Cáh, ela pediu um tutorial de como colocar comentários do Facebook no blog, pesquisei, fiz vários testes e o único que funcionou é o qual irei postar que é Como colocar comentários do Facebook junto com os do blog.

Primeiramente vá nesse link abaixo:
Você será redirecionado para uma página de aplicativos do Facebook.

Se é a primeira vez que você entrar nesse link ele aparecerá assim:
Então é só clicar em Register Now.

E logo depois irá abrir uma janela assim:
E você irá clicar onde estar indicado na imagem, assim você irá aceitar a politica de privacidade. E logo depois clique em Cadastre-se. E em Concluir.

Vai aparecer isso aqui:
E é só clicar na imagem onde está WWW Website.

Logo depois aparecerá essa página:
Aqui você clica em Skip and Create App ID como indicado na imagem.

Logo aparecerá essa janela:
Onde está escrito Nome de exibição coloque o nome do aplicativo ou do seu blog
Onde está escrito Namespace é onde você pode colocar um nome de identificação para seu aplicativo, se caso colocar, coloque tudo junto.
E escolha a categoria.

E depois clique em Crie um ID do Aplicativo. Depois aparecerá uma Verificação de Segurança, veja o que pede e clique em Enviar.

E irá aparecer uma página com o ID do aplicativo.
Deixe reservado essa página.

Agora vamos para parte do tutorial que vamos colocar os comentários do Facebook no blog.

Vá em Modelo>> Editar HTML>> clique dentro da caixa de código e aperte Ctrl+F e procure por:
<div class='comments' id='comments'>
Em alguns caso esse código aparece duas vezes, então você tem que testar em qual das duas você vai utilizar. No meu caso o segundo é onde funcionou o código.

Abaixo dessa linha cole o seguinte 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://1.bp.blogspot.com/-gnieoeKGabg/UtTzC6E-XaI/AAAAAAAAXSU/rHuJmbZcrmc/s1600/%C3%ADcone+do+Facebook.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='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Agora vamos procurar por:
</head>
E cole o seguinte código acima dessa tag.
 <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>
Onde está escrito SEU ID é onde você vai colar o ID do aplicativo, volte lá na página que eu falei que era pra deixar reservada e copie o ID e cole onde é indicado.

Depois disso vá em:
]]></b:skin>
E cole o código a seguir acima dele.
 .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;}
Você pode alterar o que está em negrito e depois é só salvar.
Verifique se deu certo, se caso não der certo, mude a posição aquele primeiro código que eu falei que havia dois, salve e verifique se deu certo.
Resultado

Bom pessoal espero que tenham gostado!

Créditos ao blog Elaine Gaspareto