Cómo añadir una sección de comentarios a tu sitio estático

Los sitios web estáticos ofrecen contenido a través de una colección predefinida de archivos HTML, CSS y JavaScript, lo que los convierte en una opción sencilla y económica para muchos.

A pesar de su naturaleza estática, los sitios estáticos pueden mejorarse con elementos de contenido dinámico para fomentar la interacción del usuario. Integrar una sección de comentarios permite a los visitantes expresar sus opiniones, dar feedback o plantear preguntas sobre tus contenidos o servicios.

Al añadir esta sección fomentas la participación de la comunidad y te permite conectar con tu público y perfeccionar tus ofertas basándote en sus comentarios. Este tutorial muestra cómo añadir una sección de comentarios a un sitio estático alojado en el alojamiento de sitios estáticos de Kinsta.

Configurar un sitio estático básico en Kinsta

Este tutorial utiliza la plantilla Docusaurus creada en la cuenta GitHub de Kinsta. Docusaurus es un popular generador de sitios estáticos que utiliza React, una de las principales bibliotecas de JavaScript, como biblioteca de interfaz de usuario para la creación de páginas.

Sigue los pasos que se indican a continuación para configurar este sitio en Kinsta:

1. Para utilizar la plantilla Docusaurus, haz clic en Utilizar esta plantilla > Crear un nuevo repositorio.
2. Clona el repositorio en tu máquina local ejecutando el siguiente comando:

   https://github.com/kinsta/hello-world-docusaurus.git

3. Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
4. Autoriza a Kinsta con tu proveedor de Git.
5. Haz clic en Sitios Estáticos en la barra lateral izquierda, y luego en Añadir sitio.
6. Selecciona el repositorio y la rama desde la que deseas desplegar.
7. Asigna un nombre único a tu sitio.
8. Añade la configuración de construcción en el siguiente formato:
   • Comando de construcción: npm run build
   • Versión de Node: 18.16.20
   • Directorio de publicación: build
9. Por último, haz clic en Crear sitio.

Después de desplegar con éxito tu sitio, puedes visitar la URL que aparece como dominio en la pestaña Visión General de tu sitio desplegado.

Crear una Cuenta Disqus

Disqus ofrece herramientas para aumentar la participación mediante la integración social, herramientas de moderación y analíticas. Admite discusiones online a través de comentarios. Sigue estos pasos para utilizar Disqus:

1. Crea una cuenta Disqus.
2. Rellena la información necesaria para el proceso de registro.
3. Después de registrarte, selecciona I want to install Disqus on my site. (Quiero instalar Disqus en mi sitio).
4. Registra tu sitio en Disqus. Durante el registro, elige un nombre corto y una categoría para tu sitio. Una organización genera automáticamente una lista que contiene tu nuevo sitio y cualquier sitio adicional que crees en el futuro.
5. Selecciona un plan de Disqus para tu organización. Disqus ofrece varios planes de suscripción, incluyendo Plus, Pro y Business. Para esta demostración, puedes seleccionar el plan Básico, que incluye funciones básicas como el plugin de comentarios, filtrado avanzado de spam, herramientas de moderación y analíticas básicas.

Integrar Disqus con tu sitio estático en Kinsta

El siguiente paso es integrar el fragmento de código de Disqus en el generador de tu sitio estático.

1. Tras registrar tu sitio, haz clic en I don’t see my platform listed, install manually with Universal Code. (No veo mi plataforma en la lista, instalar manualmente con Código Universal).

   

   La página mostrada contiene un fragmento de código JavaScript en la sección denominada Place the following code where you’d like Disqus to load (Coloca el siguiente código donde quieras que se cargue Disqus). Como el sitio estático es una aplicación React, debes modificar este fragmento de código para que funcione con React.

2. Crea una carpeta llamada Disqus dentro de la carpeta src/components .
3. Utiliza el siguiente código dentro de tu archivo index.js. Asegúrate de sustituir https://your_shortname_placeholder.disqus.com/embed.js por la URL que recibiste en el Código Universal:

   import React, { useEffect } from 'react';
   
   const DisqusComments = () => {
       useEffect(() => {
   
       const disqus_config = function () {
           this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's 
   canonical URL variable
           this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with   
   your page's unique identifier variable
       };
   
       // Load Disqus script dynamically
       (function () {
           const d = document;
           const s = d.createElement('script');
           s.src = 'https://your_shortname_placeholder.disqus.com/embed.js';
           s.setAttribute('data-timestamp', +new Date());
           (d.head || d.body).appendChild(s);
       })();
   
       // Cleanup Disqus on component unmount
       return () => {
           const disqusThread = document.getElementById('disqus_thread');
           if (disqusThread) {
           disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid  
   interference with other components
           }
       };
       }, []); // Run this effect only once on component mount
   
       return (
       <div>
           <div> id="disqus_thread"></div>
           <noscript>Please enable JavaScript to view the <a>  
   href="https://disqus.com/?ref_noscript">comments powered by  
   Disqus.</a></noscript>
       </div>
       );
   };
   
   export default DisqusComments;

   La función disqus_config define dos variables:

   • this.page.url — Esta variable se establece en PAGE_URL, que debes sustituir por la URL canónica de la página. Disqus utiliza esta URL para identificar la página específica a la que pertenecen los comentarios.
   • this.page.identifier — Esta variable se establece en PAGE_IDENTIFIER, que debes sustituir por un identificador único para la página. Este identificador permite a Disqus diferenciar entre páginas con la misma URL y asociar los comentarios a la página correcta.
4. Puedes importar este componente a la página en la que quieras mostrar la sección de comentarios de Disqus.

   import DisqusComments from '@site/src/components/Disqus';

5. A continuación, añade la sección de comentarios de Disqus a la página de destino, incluye la siguiente declaración de importación en index.js dentro del directorio src/pages y utiliza DisqusComments en consecuencia:

   export default function Home() {
       const {siteConfig} = useDocusaurusContext();
       return (
       <Layout
           title={`Hello from ${siteConfig.title}`}
           description="Description will go into a meta tag in <head />">
           <HomepageHeader />
           <main>
           <HomepageFeatures />
           <DisqusComments/>
           </main>
       </Layout>
       );
   }

6. Confirma estos cambios en tu repositorio para que se reflejen en tu sitio estático alojado en Kinsta:

   git add .
   git commit -m "Adding Disqus Comments"
   git push -u origin master

Si hiciste clic en Automatic deployment on commit enabled (Despliegue automático al confirmar activado) al desplegar tu sitio estático, al confirmar nuevos cambios se iniciará automáticamente un despliegue en MyKinsta. De lo contrario, despliega los cambios manualmente.

Enhorabuena — ¡has creado un sitio estático utilizando el Alojamiento de Sitios Estáticos Kinsta e integrado una sección de comentarios utilizando Disqus!

Puede que quieras modificar el componente DisqusComments para asegurarte de que la sección de comentarios se carga como es debido.

Cómo personalizar la sección de comentarios

Puedes personalizar la sección de comentarios de tu sitio estático modificando su apariencia, implementando reacciones, realizando la moderación de comentarios y mucho más. Algunas opciones de personalización disponibles en Disqus son las siguientes.

Personalizar el tema

Para personalizar el tema de tus comentarios de Disqus, ve al panel de Disqus, haz clic en General en la pestaña Settings y selecciona las opciones adecuadas en los desplegables Color Scheme (Esquema de colores) y Typeface (Tipo de letra).

Habilita las reacciones en tu sitio

Puedes aumentar la participación de tu audiencia habilitando Reacciones en tu sitio. Personaliza estas Reacciones según tus preferencias.

Para activar esta función, ve a la pestaña Settings del panel de control de Disqus. Selecciona Reactions. A continuación, haz clic en Enable Reactions on your site (Activar reacciones en tu sitio).

Actualiza tu sitio. Aparece la opción de reacciones.

Avatares de comentarios

Puedes subir un avatar de comentarista predeterminado para los usuarios, para que se sientan parte de la comunidad.

Para activar esta función, ve al panel de control de Disqus, haz clic en General en la pestaña Settings y sube una imagen desde Default Commenter Avatar (Avatar por defecto del comentarista).

Ordenar comentarios

Añade personalización para permitir a los usuarios ordenar los comentarios en función de Oldest First (más antiguo primero), Newest First (Más reciente primero) o Best First (primero el mejor). Haz clic en Community en la pestaña Settings del panel de control de Disqus y selecciona el orden en el desplegable Default Sort (Ordenar por defecto).

Cómo moderar comentarios

Para moderar comentarios en Disqus, utiliza el panel de moderación de Disqus en la barra de navegación superior de tu panel de Disqus. Esta herramienta proporciona una vista rápida de los comentarios de tu foro y su estado (aprobado, pendiente, etc.).

También puedes configurar las reglas de moderación desde el menú Moderation (Moderación), que está disponible en el panel de navegación izquierdo, en la pestaña Settings del panel de Disqus.

A continuación, consulta su documentación para conocer los pasos y funciones clave que te ayudarán a gestionar y moderar los comentarios en Disqus.

Permitir que los visitantes comenten

Para permitir que los usuarios invitados comenten en tu sitio, marca la casilla Guest Commenting y, a continuación, haz clic en Save. Estos comentarios permanecerán pendientes hasta que un moderador los apruebe desde el panel de moderación de Disqus.

Aprobar, eliminar y marcar comentarios como spam

El panel de moderación te permite realizar acciones masivas (aprobar, eliminar y marcar comentarios como spam) comprobando varios comentarios. Alternativamente, puedes moderarlos individualmente en la vista ampliada de comentarios.

Una vez activada esta opción, un moderador debe aprobar los comentarios antes de que se muestren.

Resumen

Este tutorial te ha enseñado cómo añadir una sección de comentarios a tu sitio estático. Aparte de Docusaurus, puedes implementar Disqus en cualquier otro SSG como VuePress, Gatsby, etc.

El alojamiento de sitios estáticos de Kinsta te permite desplegar fácilmente tus archivos no dinámicos preconstruidos. Para explorar las ventajas de alojar tu sitio estático en Kinsta e integrar funciones como una sección de comentarios, echa un vistazo al Alojamiento de Sitios Estáticos de Kinsta.

¿Has implementado alguna vez Disqus o cualquier otro servicio de comentarios en tu sitio estático? Comparte tus experiencias en la sección de comentarios más abajo.

Jeremy Holcombe Kinsta

Editor de Contenidos y Marketing en Kinsta, Desarrollador Web de WordPress y Redactor de Contenidos. Aparte de todo lo relacionado con WordPress, me gusta la playa, el golf y el cine. También tengo problemas con la gente alta ;).

• LinkedIn