Related Posts Plugin for WordPress, Blogger...

Como adicionar box de comentários da Disqus no Blog

sexta-feira, 30 de janeiro de 2015
Neste tutorial, você aprenderá como implementar e configurar os comentários usando a ferramenta Disqus.com em seu blog.

Comentários da Disqus no Blogger
Comentários da Disqus no Blogger

Por que ter a Disqus?

Os comentários padrão do Blogger já evoluiu bastante, dando a possibilidade de qualquer um comentar e até mesmo responder diretamente aos outros usuários. O sistema de moderação também está bem desenvolvido, podendo-se até bloquear alguns usuários "deselegantes". Porém, ainda faltam alguns atributos que seriam interessantes, como a possibilidade de avaliar o comentário ou pôr imagens nele, como forma de ilustrar alguma situação.

Assim sendo, é possível colocar um gestor externo de comentários no blog, como a  box de comentários do Facebook, da Disqus, dentre outras. Aqui mesmo, já fizemos um tutorial de como pôr comentários do Facebook no blog, mas ele tem um (pequeno) problema: não é responsivo. E o que isso quer dizer? Quer dizer que, se você tem um blog que se adapta a diferentes tamanhos de dispositivos, a caixa de comentário continuará ocupando os mesmos pixels que ocupa numa tela grande, ocultando assim partes dos comentários e criando uma barra de rolagem horizontal.

Atualização (17 de fevereiro de 2015): Agora o código apresentado no tutorial para box do Facebook torna a box responsiva, além de apresentar nativamente uma versão mobile em dispositivos móveis.

Com os comentários da Disqus, seus problemas estão resolvidos. Além de ser responsivo, ele permite avaliar comentários, respondê-los, compartilhá-los em suas redes sociais e anexar imagens. Isso é muito interessante, por exemplo, em um post de tutoriais, como esse. Se o leitor ficou com dúvida em um passo, basta ele tirar um print do que fez e mandar no comentário para o autor.

Isto posto, vamos ao tutorial. E antes de começar, já vem uma grande vantagem: você não precisa mexer em nada do HTML do seu blog!

Atualização (10 de fevereiro de 2016): O layout do site da Disqus foi reformulado. Desse modo, algumas imagens apresentadas abaixo podem estar um pouco diferentes das que você verá no site.

 Adicionando a Disqus ao seu Blog

1. Acesse disqus.com e clique em Sign Up.

A página inicial da disqus.com. No topo direito, há dois botões: no primeiro, o Sign Up (para se cadastrar) e o segundo, Log In, para entrar no sistema, caso já tenha uma conta
Clique em Sign Up

2.1. Para criar a conta, digite seu e-mail, username (apenas letras e números, sem espaços) e password (senha, de preferência, que contenha letras maiúsculas e minúsculas, números e caracteres especiais) e clique em Create Account.

2.2. Ou clique no ícone de uma das redes sociais e siga com a criação da conta.

Tela de criação da conta. Preencha os campos e-mail, username e password e clique em Create Account ou conecte-se a uma rede social para seguir com a criação da conta.
Crie sua conta

3. Na próxima janela, clique no ícone da engrenagem (localizada no topo direito da página) e selecione Add Disqus To Site.

No topo direito da página, há um engrenagem com um submenu contendo várias opções. Uma delas é a de adicionar a Disqus ao seu site.
Adicione a Disqus ao site

4. Nesta etapa, você vai criar um perfil para o seu Blog. Em Site name, escreva o nome dele. Em Choose your unique Disqus URL, será gerado um endereço assim que você escrever o nome do seu blog, Você pode alterá-lo, se quiser. Em Category, selecione uma categoria adequada para o assunto do seu blog. Não encontrando um, selecione Others (outros). Logo após, clique em Finish registration.

Na primeira caixa, adicione o nome do seu site. Na segunda, será gerado um endereço, você pode alterá-lo. Na terceira caixa, selecione uma categoria. E, por fim, clique em Finish registratio.
Crie um perfil para o seu blog

5. Escolha a plataforma Blogger. Caso não esteja aparecendo essa tela, note a hierarquia das opções: Settings > Install > Blogger.

Há várias opções na tela. neste caso, selecione a imagem que corresponde á plataforma Blogger.
Escolha a plataforma do seu blog

6. Nesta etapa, temos três opções, mas realizaremos apenas duas. A primeira é adicionar o widget da Disqus em seu blog. E a segunda, importar os comentários já existentes em seu blog.

Nesta janela, aparecem algumas opções para a adição do gadget Disqus no blog e importação de comentários existentes.
Adicionar widget e importar comentários existentes

6.1. Para adicionar o widget em seu blog, clique em 1 Add <seublog> to my Blogger site. Uma página do Blogger será aberta igual a que aparece na imagem abaixo. Atente-se para o blog selecionado. Em título, deixe como está (não se preocupe, ele não aparecerá no blog). Em seguida, clique em Adicionar widget.

Adicionar elemento de página: Selecione um blog; Título; Adicionar widget.
Clique em Adicionar widget

6.2. Caso você já tenha comentários nas suas postagens do blog, você pode importá-los. Dessa forma, você não perderá esses comentários, pois eles continuarão aparecendo nos posts. Para importar, clique em 2 Import your existing Blogger comments into Disqus at Tools>Import.  Aparecerá duas opções. Note a hierarquia: Discussions > Import.

Opções para importação e sincronização de comentários
Opções para importar e sincronizar comentários

6.2.1. Clique em Import comments from Blogger. Será aberta uma janela do Blogger informando que um aplicativo está solicitando acesso. Basta clicar em Permitir.

Disqus - Conceder acesso
Clique em Permitir

E logo após, selecione o blog correspondente.

Disqus
Selecione o seu Blog

6.2.2. Caso você queira sincronizar os novos comentários da Disqus com o sistema do Blogger, clique em Enable syncing (ver imagem do passo 6.2).

No caso do meu blog, quando ativei a opção para sincronizar os novos comentários, ao recebê-los, eles apareciam na postagem normal, assim como no painel da Disqus. Porém, no painel do Blogger, eles apareciam na última postagem do blog. Por esse motivo, desativei a sincronização e desabilitei os comentários no Blogger. Dessa forma, continuo recebendo os comentários pelo Disqus, mas eles não são contabilizados no painel do Blogger. Esse bug pode ou não acontecer com o seu blog.

Editando a box de comentários

Você já deve ter percebido que tudo está funcionando corretamente, mas as opções na box estão em inglês: comments, share, etc. Para deixar tudo em português, além de fazer outras alterações, clique em Settings.

Configurações: Aparência e contagem de comentários
Personalize a box

A primeira box destacada indica que a importação de comentários está ocorrendo. Quando ela for finalizada, aparecerá uma notificação em verde. Para melhor visualização, separamos duas seções na imagem acima. Na primeira (com bordas azuis), você altera a aparência da box, como a cor do tema e o texto que aparecerá ao lado do seu nome quando você comentar em seu próprio blog, Por padrão, aparece Mod (de moderador). Na segunda seção, você define como quer que apareça a contagem dos comentários.

Rolando a página, você verá várias opções. Vá editando conforme as suas necessidades. Você pode alterar o idioma para o português do Brasil ou o europeu.

Nas configurações da Disqus, é possível alterar o idioma para o português.
Selecione Portuguese (Brazil) ou apenas Portuguese (de Portugal)

Após todas as alterações, não se esqueça de clicar em Save Changes (Salvar 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

Após esse gigante tutorial, sua box de comentários da Disqus deve estar funcionando. Agora os seus leitores poderão comentar com mais opções, como inserir imagens e avaliar os outros comentários.
Comentário(s)
4 Comentário(s)
4 comentários
  1. Apareceu no meu blog o "COMENTÁRIOS palavra que coloquei na descrição". Sei que é do Disqus, mas não importou nada.
    No painel diz que importou mais de 800, mas não vejo.

    ResponderExcluir
    Respostas
    1. Boa tarde, Paulo. Bom, aguarde mais um tempo, talvez o Disqus esteja ainda importando ou algo assim.

      Se após algum tempo, não aparecerem, remova o gadget do Disqus que voltará a box de comentários padrão do Blogger.

      Ah, passe o link do seu blog para eu poder dar uma olhada.

      Excluir
  2. Olá Joanir, boa noite!

    Li seu blog aqui, é muito instrutivo e claro. Fiz um blog há poucos dias e estou tentando instalar Disqus nele.

    Contudo,apesar de ter seguido todos estes passos, na hora em que clico no passo final para a instalação, aparece uma mensagem de erro e o ícone do Blogger, o B, quebrado...

    É um blog sem comentários ainda, não sei se foi porque coloquei reticências ao final do título, mas o que acontece é que de fato nada acontece: simplesmente a plataforma não aparece no blog...

    Devo tirar as reticências do título? Devo criar outro blog? Devo sair do Blogger? Tenho que colocar o link para o site em algum lugar? Não sei mais o que fazer...


    Agradeço por este espaço, Kátia.

    ResponderExcluir
    Respostas
    1. Boa noite, Kátia
      Bom, fica um pouco difícil de saber o motivo de estar dando esse problema, eu precisaria de mais informações.
      Mas, lá nas configurações do Disqus, tente não pôr as reticências para ver se tudo ocorrerá bem. Verifique também se o seu blog está em modo público.

      Não dando certo, tente, no passo 5 deste tutorial, escolhe o Universal Code para instalar o código manualmente no seu blog.

      Em último caso, eu poderia fazer essa instalação remotamente para você (com custo de 40 reais).

      Mas, por favor, não conseguindo nenhum desses passos, entre em contato novamente e vamos conversando sobre isso.

      Abraço. Joanir.

      Excluir