Varias plataformas de blogging como Tumblr, Ghost (la que usa este blog) o Jekyll no tienen comentarios en su lista de features. Eso para muchos puede ser un problema porque evita un ida y vuelta con la audiencia del blog.

Una solución común hace mucho tiempo (cuando Tumblr era popular) era usar third-party services como Disqus.com

Yo lo usé hace poco y la verdad es que no me gustó mucho.

Googlee algunas alternativas como commento.io, cove.chat, hyvor, talkyard.io pero son todos pagos. Excepto uno: comments.app

comments.app es un widget para embeber comentarios usando el login de Telegram.

Paso 1: Completar el form

Una vez que te loggueaste al website, básicamente tenés que completar un form. Tuve un par de dificultades, esto es lo que aprendí:

  • En domains tuve que poner: betzerra.com; www.betzerra.com Si no ponía ambos, recibía constantemente Invalid Domain como error en el website.
  • Si después implementar el widget no ves nada, probá cambiar height de auto a 100  y ver si te está imprimiendo algún error.
  • Page ID es fundamental porque si no lo usás, todo tu website va a apuntar al mismo "pool" de comentarios. Igual este field lo dejé en blanco pero lo agregué luego a la hora de inyectar el código en el template de Ghost.

Paso 2: Inyectar el script

Vas a tener que editar el archivo post.hbs, en mi caso se encontraba en  /var/www/ghost/content/themes/casper/post.hbs . Esto va a depender de tu instalación de Ghost y el theme que estás usando.

Vas a buscar section class="post-full-comments" y agregar el código que tenés para copiar en el website. Debería ser parecido a este:

<section class="post-full-comments">
    <script async src="https://comments.app/js/widget.js?3" data-comments-app-website="XYZABC" data-limit="5" data-height="300" data-page-id="{{id}}"></script>
</section>

data-page-id={{id}} es clave, si no agregás eso todos los comments van a apuntar a un mismo lugar.

Paso 3: Reinicia ghost

Una vez que terminaste de editar este archivo, no te olvides de ejecutar ghost restart dentro de /var/www/ghost/ porque sino los cambios en tu blog no surten efecto.

El look and feel no es lo mejor pero creo que se pueden hacer algunos hacks para mejorarlo :-)

Bien, ahora deberías encontrar un recuadro de Telegram al final de tus posts.

Paso 4: Cambiar el theme si está en dark mode (opcional)

Esta parte no estoy seguro si es la mejor manera de hacerlo (por que no sé nada de Javascript y muy poco de HTML) pero logré setear el atributo data-dark="1" si tu device está con dark mode encendido.

Sólo tuve que setear un id al script y luego escribir otro script que edite el atributo data-dark si el color scheme preferido era "dark".

            <section class="post-full-comments">
                <script async id="telegram-comments" src="https://comments.app/js/widget.js?3" data-comments-app-website="XYZABC" data-limit="5" data-page-id="{{id}}"></script>
                <script>
                    if (window.matchMedia &&
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
                        var aScript = document.querySelector('#telegram-comments')
                        aScript.setAttribute("data-dark", "1");
                    }
                </script>
            </section>
No quedó impecable pero muchísimo mejor comparado con la iteración anterior