Usar Telegram para los comentarios de tu blog de Ghost

Te enseño a embeber comentarios de Telegram en tu blog de Ghost

Usar Telegram para los comentarios de tu blog de Ghost

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 (https://comments.app), 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