Comentários via Mastodon

Comentários para sites e blogs estáticos, pelo Fediverso

Esta página documenta a solução de comentários integrados ao Mastodon, que adotei em meu blog pessoal.

Com ela, cada post do blog é associado a um post no Mastodon, e qualquer usuário do Fediverso (ou seja: quem tem contas no Mastodon, Sharkey, Pixelfed, Friendica, GoToSocial, etc.) que responder na thread desse post (diretamente ou pelo link no blog) estará também comentando no blog.

Ao final desta página (bem lá embaixo ⬇) você encontra um exemplo funcional desse sistema de comentários, e poderá interagir com ele.

Com a solução que adotei, o blog exibe automaticamente, formatadas como comentários, as respostas feitas na thread do Mastodon – desde que elas sejam feitas em posts abertos, públicos, visíveis a usuários não autenticados. Para isso, o blog implementa um cliente mínimo da API do Mastodon, feito em Javascript e capaz apenas de obter e exibir os comentários de um único post.

A solução adotada

Integrar seu site estático (seja ele um blog ou outro tipo) ao Fediverso é uma tarefa com várias soluções possíveis, e esta página documenta apenas a que eu adotei, em fevereiro de 2025, no veterano trilux.org, meu blog pessoal que em dezembro completará 20 anos.

A solução que eu adotei é completa (não precisa de outros componentes, frameworks ou serviços) e relativamente simples, para quem tem condições de editar o layout de seu site ou blog.

Essa solução serve para páginas web em geral (inclusive posts de blog e outras páginas estáticas), e envolve incluir um trecho de CSS e um arquivo em javascript (ambos estáticos) no cabeçalho do seu site, bem como inserir um trecho em HTML no ponto da página em que você deseja que os comentários apareçam. Esse sistema de comentários integrados foi criado pelo dev Michael Thomas, que o disponibilizou e documentou, e eu adotei com poucas e singelas modificações.

Esse modelo engenhoso de integração foi criado pelo dev britânico Michael Thomas e está disponível e documentado no site dele. Eu usei os arquivos dele com apenas duas modificações:

1. Uma pequena mudança na função escapeHtml
   (para evitar uma falha quando ela é chamada com parâmetro nulo)

   Tradução para português, das mensagens e títulos exibidos ao usuário

Recomendo que você use a versão original dos arquivos disponibilizados pelo Michael no link acima mas, se preferir, as minhas podem ser configuradas com as mesmas instruções dele, e estão aqui: comments.js e comments.css.

Como eu configurei

Etapa I - Cabeçalho da página web

<link href="comments.css" rel="stylesheet">
<script type="text/javascript" src="comments.js"></script>

Etapa II - Ponto de inserção dos comentários

<div id="comments"></div>
<script>
  addEventListener('DOMContentLoaded', 
  (event) => window.loadComments('https://social.br-linux.org/@augustocc/114093159736463800',
  document.getElementById('comments')));
</script>

É só isso. Após as duas etapas acima, no próximo acesso à página, as respostas na thread da URL em verde apareceram automaticamente como comentários, ao final desta página, como você pode ver abaixo.

O ovo ou a galinha

Como você percebeu na descrição acima, o texto em verde corresponde à URL de um post no Mastodon que, por sua vez, divulga a URL desta página que você está lendo. Isso indica uma publicação em três passos:

1. Colocar no ar o post do blog ou página estática.
2. Publicar no Mastodon um post anunciando a URL do post do passo 1.
3. Editar o post do passo 1, para inserir nele (naquele trecho que marquei em verde na seção anterior) a URL do post do Mastodon, gerado no passo 2.

Para mim essa coreografia não é um problema, inclusive porque ela me dá condição de escolher quais posts do blog eu quero abrir para comentários e quais não – e redigir um texto à parte, postado manualmente, para a chamada no Mastodon.

Se você preferir, e tiver a necessária aptidão tecnológica, pode buscar alguma forma de automatizar essa sequência – mas não é meu caso, estou bem satisfeito.

Usando essa solução em CMS estático

Eu uso o meu CMS Axe, e nele a Etapa I foi como descrita acima; já a inserção do trecho em HTML mencionado na Etapa II, acima, foi feita no arquivo single-body.php (na pasta de temas), e fez uso de uma variável do CMS, assim:

<div id="comments"></div>
<script>
  addEventListener('DOMContentLoaded', 
  (event) => window.loadComments('%%MASTODONPOST%%',
  document.getElementById('comments')));
</script>

Assim, quando edito um post já publicado (e já divulgado por mim no Mastodon), posso colocar a URL do post do Mastodon na variável MASTODONPOST, e ao gerar a página editada, o CMS fará a substituição, gerando uma menção à URL, idêntica à que vimos na Etapa II, acima.

Nota:Devido à forma engenhosa como o Michael Thomas criou esse mecanismo, deixar o campo em branco (ou preenchido como uma string que não forme uma URL válida de post do Mastodon) gera um HTML vazio – ou seja, mesmo com o código acima fazendo parte do template dos meus posts, enquanto eu não inserir a URL correta não aparecerá para o usuário nenhum botão para comentar, nem qualquer referência a comentários: as menções a comentários só aparecem depois de haver a referência ao post do Mastodon.

Pelo relato do próprio Michael, que também usa a solução que criou, o mecanismo para quem tem blogs estáticos criados com o CMS do omg.lol é similar: note que o trecho de código HTML dele usa a variável {mastodon}, que ele define quando edita um post do blog, após já ter criado o post correspondente no Mastodon:

<div id="comments"></div>
<script>
  addEventListener('DOMContentLoaded', 
  (event) => window.loadComments('{mastodon}',
  document.getElementById('comments')));
</script>

O beetle_b também relatou ter implementado essa mesma solução em um blog feito com o CMS estático Pelican, usando código similar.

Acredito que as variações para outras plataformas serão pequenas, mas dependem de você conhecer a estrutura e o funcionamento do sistema que você usa.

Privacidade dos posts

Como essa solução é implementada na forma de um cliente do Mastodon, a privacidade funciona como deveria ser: controlada 100% pelo servidor da instância, que não passará ao cliente (no caso, o seu blog) nenhum post que não esteja público e disponível para ser exibido.

Assim, quem responder na sua thread do Mastodon usando configurações como "só para meus seguidores" ou "só para pessoas mencionadas" participará normalmente da discussão, mas não terá seus posts reproduzidos como comentários no blog – só são exibidos no blog os posts de quem usa as configurações de privacidade “Público” (que é a default) ou “Público (silencioso)”. O servidor do blog jamais obtém, nem armazena cópias, dos posts do Mastodon, que são lidos diretamente, a cada acesso, pelo navegador do usuário.

Os posts são lidos a cada acesso, pelo navegador do usuário, e não ficam armazenados no servidor web. Assim, se o comentário for editado ou removido pelo seu autor no Fediverso, essa alteração se reflete imediatamente no blog, a partir do próximo acesso.

Vale observar que essa vantagem de privacidade tem o custo, necessário e justificado, do desaparecimento periódico dos comentários de usuários que configuram apagamento automático de posts após um prazo, assim como em caso de fediblocks e outros incidentes que interferem na visibilidade de conteúdos do Fediverso.

A mesma atenção deve ser dada à configuração dos posts da conta do Mastodon usada para divulgar os posts do blog: se ela estiver configurada para apagar posts automaticamente depois de um prazo, cada post do seu blog também perderá o acesso aos comentários dele depois do mesmo prazo.

Leia também as observações do autor do código sobre a questão do acesso e disponibilidade dos posts.

Importante: sobre suporte e garantia

Embora eu tenha compartilhado acima os passos que usei para implantar o código em meu blog, o uso dessas instruções e do código é sem qualquer garantia. Além disso, não tenho condição nem estrutura para prestar suporte à sua instalação ao seu uso por outras pessoas, ainda que deseje sucesso a quem for fazê-lo.

O autor do código original é o Michael Thomas, e ele também disponibilizou sem garantia, oferta de suporte, ou especificação de termos de licenciamento.

Além disso, a implementação desse serviço de comentários para blogs e sites usa a API do Mastodon – acessível a usuários de qualquer outro serviço compatível e conectado ao Fediverso que queira comentar – e está sujeita aos efeitos das configurações das instâncias envolvidas, bem como dos recursos de publicação e hospedagem do seu site, e todos esses aspectos devem ser analisados em conjunto quando você considerar a sua implantação e uso..

Veja como funciona

O campo de comentários abaixo corresponde às respostas a esta thread do Mastodon.

Se desejar testar, interaja – mantendo a cortesia e o respeito.

Augusto Campos
Fevereiro de 2025