Add Comments to Wix Sites

Pour cet exemple, nous allons ajouter FastComments Live Commenting aux pages d'articles de blog.

Pour ce faire, nous allons ouvrir notre site dans l'éditeur Wix.

Ensuite, nous devons nous assurer que nous modifions la bonne page.

Nous voulons nous assurer d'afficher un fil de commentaires unique pour chaque article de blog, donc modifions Blog Pages -> Post.

Étape 1 : Modifier la page dynamique de l'article

Ensuite, nous allons dans Add -> Embed Code -> Embed HTML.

Étape 2 : Ajouter un bloc Embed HTML

This will give us a sad looking box to start with:

Le bloc de départ

Cet exemple utilise du code personnalisé pour être compatible avec Wix. Vous ne pourrez pas utiliser les extraits de code FastComments des autres tutoriels.

Ouvrez le formulaire pour ajouter notre boîte de dialogue HTML personnalisée en cliquant sur Enter Code et en sélectionnant HTML :

Étape 3 : Ouvrir la boîte de dialogue HTML

Copiez l'extrait HTML suivant et collez-le dans la boîte de dialogue, puis cliquez sur Mettre à jour :

Extrait de code Wix Comments

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

Étape 3 : Coller et enregistrer

Vous devriez maintenant voir une version très réduite du widget de commentaires :

Étape 3 : Le résultat

Ensuite, nous allons positionner et redimensionner ceci pour l'adapter à notre page.

Maintenant que nous avons ajouté le widget de commentaires, arrangeons-le sur notre page.

Étape 4: Redimensionner

Avec ce tutoriel nous pourrons modifier le fil de discussion courant en fonction de la page active. Cependant, nous ne pourrons pas redimensionner le widget de commentaires dynamiquement jusqu'à ce que Wix ouvre cette fonctionnalité. D'ici là, vous devrez décider de la taille que vous souhaitez pour la zone de commentaires sur votre page et la dimensionner en conséquence.

Ensuite, configurons cela pour que le fil de commentaires change en fonction de la page actuelle, permettant aux utilisateurs de discuter du contenu affiché.

Sans les étapes suivantes, vous n'aurez qu'un seul fil de commentaires global pour l'ensemble du site - ce qui n'est pas très utile.

Dev Mode

Pour ajouter cette fonctionnalité, nous devons accéder à ce que Wix appelle Dev Mode.

Cliquez sur l'option Dev Mode en haut de l'écran.

Activer Dev Mode

Définir l'ID de l'élément

Nous allons ajouter du code personnalisé pour y parvenir, mais d'abord nous devons attribuer un ID à ce nouvel élément intégré afin d'y faire référence.

Appelons-le fastcomments.

Cliquez sur le nouvel élément intégré que vous avez ajouté, et en mode Dev, en bas à droite, vous devriez voir un champ ID avec une valeur comme html1 :

Le champ ID

Changez ceci en fastcomments et appuyez sur Entrée :

Définir l'ID

Nous pouvons maintenant ajouter notre code personnalisé qui indique à la zone de commentaires quelle page est affichée.

En bas de l'écran, vous devriez voir un éditeur de code comme ceci :

Ouvrir l'éditeur

Copiez le code suivant et collez-le dedans :

Extrait de navigation pour 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

Ajouter le code de navigation

Nous pouvons maintenant reprendre notre souffle et prévisualiser notre site. Vous devriez voir une zone de commentaires qui change en fonction de la page affichée. Félicitations !

Si vous rencontrez des problèmes, faites-le nous savoir dans la zone de commentaire ci-dessous.

FastComments est conçu pour être personnalisé afin de s'adapter à votre site.

Si vous souhaitez ajouter un style personnalisé ou modifier la configuration, Consultez notre documentation sur la personnalisation pour savoir comment.