Dia do aprimoramento: Comentários

A primeira coisa que quero ressaltar nesse post, é minha imensa vontade de que o nome da série chamasse “improvement day”, mas fiquei com medo de começar a fazer tudo com o título em inglês. Afinal, os posts já são recheados de termos em inglês.

Quando eu pensei em fazer o sistema de comentários, a minha primeira ideia foi continuar a minha saga do blog. Criar quase tudo do zero. Só que comecei a pensar melhor. Eu iria ter que lidar com um banco de dados bem estruturado, onde teria que salvar os usuários, liga-los a um comentário, conectar esse comentário a um post, ainda teria que tratar os casos em que um comentário é resposta de outro, fora toda uma série de tratamentos e validações, e uma interface bonita e que conseguisse renderizar todo esse aglomerado de informações. Apesar disso tudo, eu ainda estava disposto a ter todo esse trabalho, mesmo que demorasse algumas semanas a mais para começar o blog. O que me desanimou, na verdade, foi quando lembrei que ainda teria que criar um sistema que me avisasse quando e em qual página os comentários foram postados. No momento que comecei a pensar nesse nível de detalhe, vi que para ter um sistema de comentários redondo e bem feito, iria ser um trabalho bastante demorado. Então, comecei a pesquisar sistemas prontos. Esses foram os que mais chamaram minha atenção:

1. Pusher
2. Disqus
3. Plugin de comentários - Facebook

Se vocês rolarem até o final da página, vão ver qual foi o plug-in escolhido. Chegarei nele daqui a pouco. Antes vou falar sobre cada ferramenta e explicar como cheguei na decisão que tomei.

Pusher

A primeira coisa a se falar sobre o Pusher, é: que página inicial linda. É muito legal ficar mexendo no canvas. Fora as brincadeiras, eu descobri o pusher em um post no blog deles.

O motivo de não ter escolhido o Pusher, foi: ele não tem um front-end default, então iria ser trabalhoso faze-lo. No post do blog tem um código que renderiza um front, mas não é muito agradável. Ainda tem o detalhe dos preços praticados. Mesmo sabendo que iria demorar um pouco para eu chegar no número de visualizações diárias necessárias para eu ter que migrar para um plano pago, é um problema de 50 dólares mensais que eu não gostaria de me preocupar.

Por último, tem um detalhe que me deixou com uma pulga atrás da orelha. O blog deles não usa o sistema de comentários proposto. Eles usam a opção que vou falar agora, o Disqus.

Disqus

O Disqus foi a segunda alternativa que encontrei. Eu estava bem inclinado a escolhe-la, mas algumas coisas me desmotivaram. Ele me pareceu pouco customizável e não achei a interface deles muito agradável.

Ele também tem o plano gratuito, como o Pusher. Só que os planos pagos sobem de uma maneira mais gradual. O primeiro plano começa em 10 dólares, porém, como já havia dito, não é exatamente o que eu estou procurando.

Facebook Comments

Por fim, a ferramente escolhida. Já de cara vou falar sobre o problema de não poder customizar a interface, mas pessoalmente, eu não acho o estilo padrão do Facebook feio, e como já é bastante conhecido, ainda ajuda na usabilidade. Sem contar o diferencial que não pretendo usar agora, mas devo utilizar no futuro. Uma ferramenta para moderação de comentários extremamente completa e poderosa que já vem inclusa.

Além desses detalhes, o plug-in apresenta customizações pontuais, tem uma instalação extremamente fácil e ainda me manda as notificações de novos comentários diretamente no meu Facebook. Então, para mim, foi a ferramente perfeita.

A documentação é simples, mas objetiva. São 6 pontos de customização:

1. data-colorscheme: muda o esquema de cores, que pode ser “dark” ou “light”;
2. data-href: que é a URL a quais os comentários devem ser associados, se estiver em branco, usa a URL atual;
3. data-mobile: é um valor boleno que especifica se é para ser apresentada a versão otimizada para mobile. Por padrão, ele detecta automaticamente;
4. data-numposts: quantos posts deveram ser exibidos por página. Por padrão são 10;
5. data-order-by: qual a ordem que os comentários devem ser mostrados. São três opções possíveis, a social, a por tempo e a por tempo inverso;
   • social: traz os comentários que são mais relevantes para a pessoa que está vendo;
   • time: os comentários são exibidos na ordem em que foram publicados;
   • reverse_time: os comentários são exibidos na ordem reversa em que foram publicados;
6. width: tamanho da tela que o plugin deve ocupar;

Para instalar em sua página, simplesmente abra a documentação, escolha a URL, a largura que o plug-in deve ocupar e o número de publicações que serão mostradas e peça para gerar o código. Será gerado um script e uma div de comentários. Inclua o script no início da sua página e a div no lugar onde você quer que os comentários apareçam.

Na parte onde o Facebook gera o código, ele irá pedir para associa-lo a um app, você terá que cria-lo no facebook developers. Clique em My Apps, e verá de cara uma opção para criar um aplicativo.

Para finalizar, vou deixa o código que renderiza os comentários aqui do blog. Ele foi escrito em pug, a tecnologia que eu comentei lá no primeiro post do blog:

Bom, that's all folks. Qualquer dúvida, sugestão ou crítica, agora temos uma sessão de comentários para nos comunicarmos.