Colocar os comentários do Blogger antes dos comentários do Facebook

Este tutorial é um complemento do tutorial de Como colocar comentários do Facebook juntos com os do Blogger . Deixe-o aberto e vamos que vamos!

Colocando a Box do Blogger e Face juntas!!

Antes de tudo, faça um BACKUP de seu código: Modelo > Fazer Backup/Restaurar > Fazer download  do modelo completo.

1 - Mudando a TAB selecionada para a do Blogger

Procure por </head>, como mencionado no passo 2.3 e localize o seguinte código:

<script src='&quot;//connect.facebook.net/pt_BR/sdk.js#xfbml=1&amp;version=v2.5&amp;appId=SEU_APP_ID&quot;;'/>
<meta content='SEU_APP_ID' property='fb:app_id'/>
<meta content='SEU_FB_ID' property='fb:admins'/>

<script type='text/javascript'>
function commentToggle(comentario) {
 if (comentario == '#fb-comments'){
window.document.getElementById("fb-comments-page").style.display='block';
window.document.getElementById("blogger-comments-page").style.display='none';
window.document.getElementById("fb-comments").style.background='#ffffff';
window.document.getElementById("blogger-comments").style.background='#d1d1d1';
 } else if (comentario == '#blogger-comments') {
window.document.getElementById("blogger-comments-page").style.display='block';
window.document.getElementById("fb-comments-page").style.display='none';
window.document.getElementById("blogger-comments").style.background='#ffffff';
window.document.getElementById("fb-comments").style.background='#d1d1d1';
}}
window.onload = function(){
commentToggle('#fb-comments');
}</script>

Na penúltima linha, localize commentToggle('#fb-comments'); e altere '#fb-comments' por '#blogger-comments'.

Clique em Salvar modelo e visualize uma postagem do seu blog. A box do Blogger já deve estar selecionada, mas ainda assim, as abas estão na ordem Facebook - Blogger. Vamos alterar isso agora.

2 - Mudando a posição das TABs

No passo  2.6 pedimos para que você procure por <div class='comments' id='comments'> e cole um código  nos dois resultados.

Nesta parte, faremos uma pequena troca de lugar. Note esta parte do código no editor HTML do Blogger:

A TAB do Face está antes da do Blogger

Note que o que está destacado em vermelho é a Tab do Facebook. Já a que está destacado em verde, do Blogger. Tudo o que você tem que fazer é recortar o código verde e colocá-lo acima do código vermelho, como na imagem abaixo:

Agora, a TAB do Blogger está antes da do Face

Faça isso nos dois lugares que você colou o código anteriormente. Simples assim! Clique em Salvar modelo e visualize uma postagem do seu blog.

Pronto!! Agora os comentários do Blogger estarão mais destacados. Qualquer dúvida ou sugestão, utilize os comentários abaixo. Até a próxima!!