Add Comments to Wix Sites

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

Pour ce faire, nous ouvrirons 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 d'article dynamique

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 des commentaires 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

Étape 3 : Coller et enregistrer

Vous devriez maintenant voir une version très petite du widget de commentaires :

Étape 3 : Le résultat

Ensuite, nous positionnerons et redimensionnerons ceci pour l'adapter à notre page.

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

Étape 4 : Redimensionnement

Avec ce tutoriel, nous pourrons changer le fil de discussion actuel en fonction de la page active. Cependant, nous ne pourrons pas redimensionner le widget de commentaires de façon dynamique tant que Wix n'aura pas activé cette fonctionnalité. D'ici là, vous devrez décider de la taille souhaitée pour la zone de commentaires sur votre page et l'ajuster en conséquence.

Ensuite, configurons les choses afin que le fil de commentaires change en fonction de la page courante, 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 de votre site - ce qui n'est pas très utile.

Mode développeur

Pour ajouter cette fonctionnalité, nous devons entrer dans 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 donner un ID à la nouvelle élément intégré afin d'y faire référence.

Appelons-le fastcomments.

Cliquez sur le nouvel élément intégré que nous avons ajouté, et en mode développeur dans le coin inférieur droit 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 nous consultons.

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 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-nous savoir dans la boîte de commentaires ci-dessous.

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

Si vous souhaitez ajouter des styles personnalisés, ou ajuster la configuration, Consultez notre documentation sur la personnalisation pour apprendre comment.