Add Members-Only Live Commenting to ghost Sites

Para agregar FastComments a Ghost correctamente, tenemos que editar los archivos del tema.

Así que empecemos descargando tu tema actual o el que desees.

Navega al panel de tu sitio y haz clic en el ícono de engranaje en la esquina inferior izquierda:

Abrir configuración

A continuación, selecciona la opción Design:

Seleccionar Diseño

Aunque técnicamente no vamos a cambiar el tema, haz clic en Change Theme en la esquina inferior izquierda:

Cambiar tema

En la esquina superior derecha, selecciona Advanced:

Seleccionar Avanzado

...y luego descarga tu tema actual o el que prefieras:

Descargar tema

Ahora que hemos descargado el archivo zip, extráelo a una carpeta. He descargado el casper.zip predeterminado y lo he extraído en Downloads\casper en Windows.

A continuación, asegúrate de tener instalada la versión LTS o una más reciente de NodeJS. Puedes obtenerla aquí: https://nodejs.org/en/download/

Una vez que NodeJS esté instalado, querrás instalar un editor de código.

Recomendamos (y usamos) Webstorm, que puedes obtener aquí con una prueba de 30 días (no se necesita tarjeta de crédito): https://www.jetbrains.com/webstorm/

La siguiente mejor opción gratuita probablemente sería Visual Studio Code: https://code.visualstudio.com/download

Una vez que tengas tu editor configurado y la carpeta del tema abierta en el editor, abre la terminal en el IDE y ejecuta:

Instalar el tema

Copy

1

2npm install

3

La salida exitosa se verá así (puedes ignorar las advertencias):

Salida exitosa de npm install

Esto configurará las dependencias del tema para los comandos posteriores que ejecutaremos. Además, la exportación depende de que las dependencias del tema estén instaladas; de lo contrario, la reimportación no funcionará correctamente.

Ahora que tenemos el tema abierto en nuestro editor, abre package.json y cambia el campo name por otro valor. En nuestro caso simplemente añadimos -fastcomments al final:

Renombrar tema

Si estás usando un IDE, guardará automáticamente después de que hagas este cambio.

Ahora vamos a abrir la plantilla que se utiliza para nuestros artículos del blog. Se llama post.hbs:

Abrir post.hbs

A continuación, necesitamos identificar dónde añadir el código del widget de FastComments.com.

Si estás usando el tema predeterminado casper, verás una sección como esta en la línea 82:

Sección de comentarios deshabilitada

Si estás usando otros temas, no verás esto, y necesitarás añadir este código después del último </section>:

Ejemplo de sección

Copy

1

2<section class="article-comments gh-canvas">

3</section>

4

Deberías tener algo así listo:

Plantilla lista para el código de comentarios

Una vez listo, copia el código del widget de FastComments.com:

Fragmento de código de comentario de FastComments.com para Ghost

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let simpleSSO = null;

7

8 {{#if access}}

9 {{#if @member}}

10 simpleSSO = {

11 id: '{{ @member.uuid }}',

12 email: '{{@member.email}}',

13 username: '{{@member.name}}',

14 avatar: '{{ @member.avatar_image }}',

15 optedInNotifications: true,

16 optedInSubscriptionNotifications: true,

17 displayLabel: '{{@member.labels}}'

18 }

19 {{/if}}

20 {{/if}}

21

22 FastCommentsUI(document.getElementById('fastcomments-widget'), {

23 tenantId: "demo",

24 urlId: window.location.pathname,

25 allowAnon: false,

26 simpleSSO: simpleSSO

27 });

28 })();

29</script>

30

...y debería verse así:

Añadir código de comentarios de FastComments.com

Código listo. ¡Ahora solo tenemos que volver a importar nuestro tema!

Ahora necesitamos empaquetar los archivos del tema de nuevo en un archivo zip. Para ello, utiliza las funciones integradas en Ghost.

Abre de nuevo la terminal de tu editor y ejecuta npm run zip.

Exporta tu tema

Esto empaquetará el tema en un archivo zip en dist/casper-fastcomments.zip (si ese es el nombre que le diste al tema en Step Three).

De vuelta en el panel de Ghost, vamos a subir nuestro tema:

Sube tu tema

En mi caso, tengo el archivo zip en la siguiente ubicación. Fíjate en la carpeta dist:

Selecciona el archivo ZIP para subir

Recuerda activar el tema que acabas de subir (Ghost debería pedírtelo).

Ahora deberíamos tener FastComments Live Commenting habilitado para nuestros miembros!

¡Éxito!

¡Felicitaciones por configurar FastComments con Ghost! Si has encontrado un Domain Error, o te gustaría aprender cómo personalizar el área de comentarios, ¡sigue leyendo!

FastComments está diseñado para personalizarse y adaptarse a tu sitio.

Si deseas agregar estilos personalizados o ajustar la configuración, Consulta la documentación de personalización para saber cómo.