Add Comments to Wix Sites

Per questo esempio, aggiungeremo FastComments Live Commenting alle pagine dei post del blog.

Per farlo, apriremo il nostro sito nell'editor di Wix.

Poi, dobbiamo assicurarci di modificare la pagina corretta.

Vogliamo assicurarci di mostrare un thread di commenti unico per ogni post del blog, quindi modifichiamo Blog Pages -> Post.

Passo Uno: Modifica la pagina dinamica del post

Quindi, andremo su Add -> Embed Code -> Embed HTML.

Passo Due: Aggiungi un blocco Embed HTML

Questo ci darà un riquadro dall'aspetto triste da cui partire:

Il blocco iniziale

Questo esempio utilizza codice personalizzato per essere compatibile con Wix. Non potrai usare gli snippet di codice FastComments di altri tutorial.

Apri il modulo per aggiungere la nostra finestra di dialogo HTML personalizzata cliccando Enter Code e selezionando HTML:

Passo 3: Apri la finestra di dialogo HTML

Copia lo snippet HTML seguente e incollalo nella finestra di dialogo, poi clicca Update:

Snippet di codice Wix per i commenti

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

Passo 3: Incolla e Salva

Ora dovresti vedere una versione molto piccola del widget dei commenti:

Passo 3: Il risultato

Successivamente posizioneremo e dimensioneremo questo per adattarlo alla nostra pagina.

Ora che abbiamo aggiunto il widget dei commenti, sistemiamolo nella nostra pagina.

Passo 4: Ridimensionamento

Con questo tutorial saremo in grado di cambiare il thread corrente in base alla pagina attiva. Tuttavia, non potremo ridimensionare il widget dei commenti dinamicamente fino a quando Wix non renderà disponibile questa funzionalità. Fino ad allora, dovrai decidere quanto grande vuoi che sia l'area dei commenti nella tua pagina e impostarne le dimensioni di conseguenza.

Successivamente, configuriamo le cose in modo che il thread dei commenti cambi in base alla pagina corrente, permettendo agli utenti di discutere il contenuto attualmente visualizzato.

Senza i passaggi seguenti, avrai solo un unico thread di commenti globale per l'intero sito - il che non è molto utile.

Modalità Dev

Per aggiungere questa funzionalità, dovremo entrare in ciò che Wix chiama Dev Mode.

Clicca sull'opzione Dev Mode in cima allo schermo.

Abilita Modalità Dev

Imposta l'ID dell'elemento

Aggiungeremo del codice personalizzato per realizzare questo, ma prima dobbiamo assegnare un ID al nuovo elemento embed in modo da potervi fare riferimento.

Chiamiamolo fastcomments.

Clicca sul nuovo elemento embed che abbiamo aggiunto e in dev mode in basso a destra dovresti vedere un campo ID con un valore tipo html1:

Il campo ID

Cambia questo in fastcomments e premi invio:

Imposta l'ID

Ora possiamo aggiungere il nostro codice personalizzato che dice all'area dei commenti quale pagina stiamo visualizzando.

In fondo allo schermo dovresti vedere un editor di codice come questo:

Apri l'editor

Copia il codice seguente e incollalo lì:

Snippet di navigazione per i commenti di 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

Aggiungi il codice di navigazione

Ora possiamo tirare un respiro e visualizzare in anteprima il nostro sito. Dovresti vedere un'area commenti che cambia in base alla pagina visualizzata. Congratulazioni!

Se riscontri problemi, faccelo sapere nella casella dei commenti qui sotto.

FastComments è progettato per essere personalizzato per adattarsi al tuo sito.

Se desideri aggiungere stili personalizzati o modificare la configurazione, Consulta la nostra documentazione sulle personalizzazioni e la configurazione per scoprire come.