Como adicionar box de comentários da Disqus no Blog | Blog do Joanir -->

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.

Tá difícil?

Podemos fazer isso pra você.
Contrate-nos