Add Comments to Wix Sites

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.

Next, let's set things up so that the comment thread changes based on the current page, allowing users to discuss the currently displayed content.

Without the following steps, you will only have one global comment thread for your entire site - which is not very useful.

Dev Mode

To add this functionality, we'll have to go into what Wix calls Dev Mode.

Click the Dev Mode option at the top of the screen.

Activar Dev Mode

Set the Element ID

We're going to add custom code to accomplish this, but first we need to give the new embed element an ID to refer to it by.

Let's call it fastcomments.

Click the new embed element we added, and in dev mode in the bottom right you should see an ID field with a value like html1:

El campo ID

Change this to fastcomments and hit enter:

Establecer el ID

Now we can add our custom code that tells the comment area what page we are viewing.

At the bottom of the screen you should see a code editor like this:

Abrir el editor

Copy the following code and paste it in there:

Fragmento de navegación de Wix Comments

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

Añadir 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.