Box de comentários do Facebook e Disqus no Blogger

Neste tutorial, veremos como pôr a box de comentários do Facebook juntamente com a do Disqus no Blogger. Já temos um grande tutorial do Facebook com o do Blogger e vamos recorrer a ele em alguns passos deste post. Então, vamos que vamos!!

Box do Face e Disqus no Blogger

1 - Criando um "app" (aplicativo) no Facebook

1.1 - Já temos um tutorial aqui de como fazer isso. Assim, clique aqui e siga até o PASSO 2.6.

1.2 - Agora, vamos fazer algumas modificações no passo 2.6. Note no código abaixo e siga as instruções a seguir:

<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='https://sites.google.com/site/arquivosdoblog007/ico/btface.png'/>

<fb:comments-count expr:href='data:post.url'/> Comentário(s)

</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='https://sites.google.com/site/arquivosdoblog007/ico/btblogger.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 != "index"'>

<div id='fb-root'/>

<fb:comments expr:href='data:post.url' num_posts='10' width='100%' data-colorscheme='light'  />

</b:if>

</div>

<div class='comments comments-page' id='blogger-comments-page'>

Nos códigos destacados, substitua:

https://sites.google.com/site/arquivosdoblog007/ico/btface.png por https://sites.google.com/site/arquivosdoblog007/ico/bgface.png

https://sites.google.com/site/arquivosdoblog007/ico/btblogger.png por https://sites.google.com/site/arquivosdoblog007/ico/bgdisqus.png

Comentários no Blogger por Comentários no Disqus

<data:post.numComments/> por <a style='color: #000000;' expr:href="data:post.url + &quot;#disqus_thread&quot;"></a>


1.3 - Siga o PASSO 3 para configurar a moderação.

2 - Criando uma conta Disqus

2.1 - Também temos um tutorial de como pôr a box do Disqus no Blogger. Siga-o até o PASSO 4.

2.2 - Não faça o passo 5. Pule direto para Editando a box de comentários. Na parte Comment Count Link, faremos uma pequena modificação. deixando como na imagem abaixo:

Contador de comentários

3 - "Juntando" a box do Facebook e Disqus

Agora, finalmente, começaremos este post. Até o momento, temos a box do Facebook funcionando normalmente no seu blog e uma conta configurado no Disqus. Então, seguimos!

3.1 - Vá para o painel do Disqus, clique em Your Sites (1) e selecione o seu (2). Após isso, clique em Installing Disqus (3).

Intalando Disqus

3.2 - Em Choose your platform, clique em Universal Code.

Clique em Universal Code

3.3.1 - Aparecerá uma página igual a essa de baixo. Você deve copiar todo o código destacado.

Copie o código destacado

3.3.2 - Abra o editor HTML do seu blog e procure por <div class='comments comments-page' id='blogger-comments-page'> e cole o código do passo 3.3.1 abaixo dessa linha.

Cole o código no local indicado

3.4.1 - Volte à página que estava do Disqus e copie o primeiro código abaixo de How to display comment count:

Número de comentários

3.4.2 - No editor HTML, procure por </body> e antes dele cole o código do passo 3.4.1.

Cole o código antes de </body>

Note que em async adicionamos ='async'. Faça o mesmo, senão não será possível salvar as alterações.

Conclusão

Se você seguiu todos os passos, provavelmente agora seu blog está com as duas box funcionando bem. Caso tenha algum problema, tente fazer o mesmo processo num blog de testes  com um template padrão do Blogger.

Não se esqueça de nos dizer se deu tudo certo nos comentários abaixo. Até a próxima!