Related Posts Plugin for WordPress, Blogger...

Box de comentários do Facebook e Disqus no Blogger

quinta-feira, 28 de janeiro de 2016
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
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).

Instalando - Box do Face e Disqus no Blogger
Intalando Disqus

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


Instalando - Box do Face e Disqus no Blogger
Clique em Universal Code

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

Instalando - Box do Face e Disqus no Blogger
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.

Instalando - Box do Face e Disqus no Blogger
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:

Instalando - Box do Face e Disqus no Blogger
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.

Instalando - Box do Face e Disqus no Blogger
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.

  Quer ajudar o nosso blog?

Este tutorial foi útil pra você? Te ajudou a melhorar o seu blog? Então nos ajude também, dê like, comente e compartilhe este post. Ah, e deixe também sua doação em dinheiro:

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!

Comentário(s)
0 Comentário(s)
Nenhum comentário:
Postar um comentário