Agregar Comentarios a Sitios Wix

Para este ejemplo, vamos a añadir FastComments Live Commenting a las páginas de entradas del blog.

Para ello, abriremos nuestro sitio en el editor de Wix.

Después, tendremos que asegurarnos de que estamos editando la página correcta.

Queremos asegurarnos de mostrar un hilo de comentarios único para cada entrada del blog, así que editemos Blog Pages -> Post.

Paso Uno: Editar la página dinámica de la entrada

A continuación, iremos a Add -> Embed Code -> Embed HTML.

Paso Dos: Agregar un bloque Embed HTML

Esto nos dará una caja con aspecto triste para empezar:

El bloque inicial

Este ejemplo usa código personalizado para ser compatible con Wix. No podrás usar los fragmentos de código de FastComments de otros tutoriales.

Abre el formulario para añadir nuestro diálogo HTML personalizado haciendo clic en Enter Code y seleccionando HTML:

Paso 3: Abrir el diálogo HTML

Copia el siguiente fragmento HTML y pégalo en el diálogo, y haz clic en Actualizar:

Fragmento de código de comentarios de Wix

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 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

Paso 3: Pegar y Guardar

Ahora deberías ver una versión muy pequeña del widget de comentarios:

Paso 3: El resultado

A continuación posicionaremos y ajustaremos su tamaño para que encaje en nuestra página.

Ahora que hemos añadido el widget de comentarios, vamos a colocarlo en nuestra página.

Paso 4: Redimensionar

Con este tutorial podremos cambiar el hilo actual en función de la página activa. Sin embargo, no podremos redimensionar el widget de comentarios de forma dinámica hasta que Wix habilite esta funcionalidad. Hasta entonces, tendrás que decidir qué tamaño quieres que tenga el área de comentarios en tu página y ajustarla apropiadamente.

A continuación, configuremos las cosas para que el hilo de comentarios cambie según la página actual, permitiendo que los usuarios discutan el contenido que se muestra en ese momento.

Sin los siguientes pasos, solo tendrás un hilo de comentarios global para todo tu sitio, lo cual no es muy útil.

Modo de Desarrollo

Para agregar esta funcionalidad, tendremos que entrar en lo que Wix llama Dev Mode.

Haz clic en la opción Dev Mode en la parte superior de la pantalla.

Habilitar el Modo de Desarrollo

Establecer el ID del Elemento

Vamos a agregar código personalizado para lograr esto, pero primero necesitamos darle al nuevo elemento de inserción un ID para poder referirnos a él.

Llamémoslo fastcomments.

Haz clic en el nuevo elemento de inserción que agregamos, y en el modo de desarrollo, en la parte inferior derecha deberías ver un campo de ID con un valor como html1:

El Campo de ID

Cámbialo a fastcomments y presiona enter:

Establecer el ID

Ahora podemos agregar nuestro código personalizado que le indica al área de comentarios qué página estamos viendo.

En la parte inferior de la pantalla deberías ver un editor de código como este:

Abrir el Editor

Copia el siguiente código y pégalo ahí:

Fragmento de Navegación de Comentarios de Wix

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

Agregar el Código de Navegación

Ahora podemos tomar un respiro y previsualizar nuestro sitio. Deberías ver un área de comentarios que cambia según la página en la que te encuentres. ¡Felicidades!

Si tienes algún problema, háznoslo saber en el cuadro de comentarios de abajo.

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

Si desea agregar estilos personalizados o ajustar la configuración, Consulte nuestra Documentación de Personalización para saber cómo.