Ajouter des commentaires aux sites Wix

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 deux : Ajouter un bloc Embed HTML

Cela nous donnera une boîte un peu triste pour commencer :

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 les choses 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 tout votre site - ce qui n'est pas très utile.

Mode Dev

Pour ajouter cette fonctionnalité, nous devrons passer dans ce que Wix appelle le Dev Mode.

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

Activer le Dev Mode

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

Nous allons ajouter du code personnalisé pour accomplir cela, mais d'abord nous devons donner au nouvel élément intégré un ID pour pouvoir s'y référer.

Appelons-le fastcomments.

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

Le champ ID

Changez-le en fastcomments et appuyez sur entrée :

Définir l'ID

Maintenant nous pouvons ajouter notre code personnalisé qui indique à la zone de commentaires quelle page nous consultons.

En bas de l'écran vous devriez voir un éditeur de code comme celui-ci :

Ouvrir l'éditeur

Copiez le code suivant et collez-le dedans :

Extrait de navigation des commentaires 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

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.