I siti web statici forniscono contenuti attraverso una raccolta predefinita di file HTML, CSS e JavaScript, il che li rende una scelta semplice ed economica per molti.

Nonostante la loro natura fissa, i siti statici possono essere arricchiti con elementi di contenuto dinamico per favorire l’interazione degli utenti. L’integrazione di una sezione commenti permette ai visitatori di esprimere le loro opinioni, dare un feedback o porre domande su contenuti o servizi.

Questa aggiunta favorisce il coinvolgimento della community e permette di entrare in contatto con il pubblico e di perfezionare le offerte in base al loro feedback. Questo tutorial mostra come aggiungere una sezione commenti a un sito statico ospitato sull’Hosting di Siti Statici di Kinsta.

Configurare un sito statico di base su Kinsta

Questo tutorial utilizza il template per Docusaurus creato sull’account GitHub di Kinsta. Docusaurus è un popolare generatore di siti statici che utilizza React, una delle principali librerie JavaScript, come libreria UI per la creazione delle pagine.

Per configurare questo sito su Kinsta basta seguire questi passi:

  1. Per utilizzare il template Docusaurus, clicchiamo su Use this template > Create a new repository.
  2. Cloniamo il repository sul nostro computer locale eseguendo il comando: 
    https://github.com/kinsta/hello-world-docusaurus.git

  3. Accediamo o creiamo un account per visualizzare il nostro cruscotto MyKinsta.
  4. Autorizziamo Kinsta con il provider Git.
  5. Clicchiamo su Siti statici nella barra laterale di sinistra e poi su Aggiungi sito.
  6. Selezioniamo il repository e il branch da cui vogliamo effettuare il deploy.
  7. Assegniamo un nome unico al sito.
  8. Aggiungiamo le impostazioni di build nel seguente formato:
    • Comando di build: npm run build
    • Versione Node: 18.16.20
    • Directory di pubblicazione: build
  9. Infine, clicchiamo su Crea sito.

Dopo aver distribuito con successo il sito, possiamo visitare l’URL elencato come dominio nella scheda Panoramica del sito distribuito.

Schermata del sito statico di Docusaurus, denominato My Site (Il mio sito)
Il sito statico è stato distribuito con successo.

Creare un account Disqus

Disqus offre strumenti per aumentare l’engagement attraverso l’integrazione sociale, strumenti di moderazione e analisi. Supporta le discussioni online attraverso i commenti. Seguiamo questi passaggi per utilizzare Disqus:

  1. Creiamo un account Disqus.
  2. Compiliamo le informazioni richieste per il processo di registrazione.
  3. Dopo la registrazione, selezioniamo la voce I want to install Disqus on my site.
  4. Registriamo il sito con Disqus. Durante la registrazione, scegliamo un nome breve e una categoria per il nostro sito. Un’organizzazione genera automaticamente un elenco contenente il nuovo sito e tutti i siti aggiuntivi che creeremo in futuro.
  5. Selezioniamo un piano Disqus per l’organizzazione. Disqus offre diversi piani di abbonamento, tra cui Plus, Pro e Business. Per questa demo, possiamo selezionare il piano Basic, che include le funzioni principali come il plug-in per i commenti, il filtro antispam avanzato, gli strumenti di moderazione e le analisi di base.

Integrare Disqus con un sito statico su Kinsta

Il passo successivo consiste nell’integrare lo snippet di codice Disqus nel generatore del nostro sito statico.

  1. Dopo aver registrato il sito, clicchiamo su I don’t see my platform listed, install manually with Universal Code (“non vedo la mia piattaforma elencata, installa manualmente con Universal Code”).
    I don't see my platform listed, install manually with Universal Code option in Disqus (non vedo la mia piattaforma elencata, installa manualmente con Universal Code)
    Incorporare il codice Disqus manualmente con Universal Code.

    La pagina visualizzata contiene uno snippet di codice JavaScript nella sezione intitolata Place the following code where you’d like Disqus to load (“posiziona il seguente codice nel punto in cui desideri che venga caricato Disqus”). Poiché il sito statico è un’applicazione React, dobbiamo modificare questo snippet di codice per farlo funzionare con React.

  2. Creiamo una cartella chiamata Disqus all’interno della cartella src/components.
  3. Utilizziamo il seguente codice all’interno del file index.js. Assicuriamoci di sostituire https://your_shortname_placeholder.disqus.com/embed.js con l’URL ricevuto in Universal Code: 
    import React, { useEffect } from 'react';

const DisqusComments = () => {
    useEffect(() => {

    const disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's 
canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with   
your page's unique identifier variable
    };

    // Load Disqus script dynamically
    (function () {
        const d = document;
        const s = d.createElement('script');
        s.src = 'https://your_shortname_placeholder.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();

    // Cleanup Disqus on component unmount
    return () => {
        const disqusThread = document.getElementById('disqus_thread');
        if (disqusThread) {
        disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid  
interference with other components
        }
    };
    }, []); // Run this effect only once on component mount

    return (
    <div>
        <div> id="disqus_thread"></div>
        <noscript>Please enable JavaScript to view the <a>  
href="https://disqus.com/?ref_noscript">comments powered by  
Disqus.</a></noscript>
    </div>
    );
};

export default DisqusComments;

    La funzione disqus_config definisce due variabili:

    • this.page.url: questa variabile è impostata su PAGE_URL, che dovremo sostituire con l’URL canonico della pagina. Disqus utilizza questo URL per identificare la pagina specifica a cui appartengono i commenti.
    • this.page.identifier: questa variabile è impostata su PAGE_IDENTIFIER, che dovremo sostituire con un identificatore unico per la pagina. Questo identificatore permette a Disqus di distinguere le pagine con lo stesso URL e di associare i commenti alla pagina corretta.
  4. Possiamo importare questo componente nella pagina in cui vogliamo visualizzare la sezione dei commenti di Disqus. 
    import DisqusComments from '@site/src/components/Disqus';
  5. Quindi, aggiungiamo la sezione dei commenti di Disqus alla pagina di destinazione, includiamo la seguente dichiarazione di importazione in index.js all’interno della cartella src/pages e utilizziamo DisqusComments di conseguenza: 
    export default function Home() {
    const {siteConfig} = useDocusaurusContext();
    return (
    <Layout
        title={`Hello from ${siteConfig.title}`}
        description="Description will go into a meta tag in <head />">
        <HomepageHeader />
        <main>
        <HomepageFeatures />
        <DisqusComments/>
        </main>
    </Layout>
    );
}
  6. Applichiamo queste modifiche al repository per poterle applicare al nostro sito statico ospitato da Kinsta: 
    git add .
git commit -m "Adding Disqus Comments"
git push -u origin master

Se durante la distribuzione del sito statico abbiamo selezionato deploy automatico su commit abilitato, il commit delle nuove modifiche avvierà automaticamente il deploy su MyKinsta. In caso contrario, distribuite le modifiche manualmente.

Schermata del sito statico con una sezione di commenti tramite Disqus qui sotto
Il sito statico con i commenti Disqus integrati.

Ed ecco fatto, abbiamo creato un sito statico utilizzando l’Hosting di Siti Statici Kinsta e abbiamo integrato una sezione commenti con Disqus!

In seguito, potremmo modificare il componente DisqusComments per assicurarci che la sezione dei commenti venga caricata come previsto.

Come personalizzare la sezione commenti

Possiamo personalizzare la sezione commenti del sito statico modificandone l’aspetto, implementando le reaction, moderando i commenti e altro ancora. Alcune opzioni di personalizzazione disponibili su Disqus sono le seguenti.

Personalizzare il tema

Per personalizzare il tema dei commenti Disqus, accediamo alla dashboard di Disqus, clicchiamo su Settings dalla scheda Settings e selezioniamo le opzioni adatte dai menu a tendina Color Scheme e Typeface.

Schermata della pagina per la personalizzazione del tema
Personalizzare il tema dei commenti Disqus.

Abilitare le reazioni sul sito

Possiamo aumentare l’engagement del pubblico abilitando le reazioni sul sito e personalizzare le reazioni in base alle nostre preferenze.

Per attivare questa funzione, andiamo alla scheda Settings della dashboard di Disqus. Selezioniamo Reactions. Poi, clicchiamo su Enable Reactions on your site (Abilita reactions sul sito).

Schermata della pagina di configurazione e abilitazione delle reazioni della dashboard di Disqus
Configurazione e abilitazione delle reazioni attraverso la dashboard di Disqus.

Aggiorniamo il sito e l’opzione per le reazioni apparirà.

Sito statico con sezione commenti e reazioni
Il sito statico mostra l’integrazione delle reazioni.

Avatar dei commenti

Possiamo caricare un avatar predefinito per i commenti degli utenti, per farli sentire parte della comunità.

Per attivare questa funzione, accediamo alla dashboard di Disqus, clicchiamo su General dalla scheda Settings e carichiamo un’immagine da Default Commenter Avatar (Avatar predefinito del commentatore).

Caricare l'avatar predefinito di un commentatore
La funzione Avatar predefinito del commentatore.

Ordinare i commenti

Aggiungiamo una personalizzazione per consentire agli utenti di ordinare i commenti in base a Oldest First, Newest First, o Best First (Primo più vecchio, Primo più recente o Migliore). Clicchiamo su Community nella scheda Settings della dashboard Disqus e selezioniamo l’ordine dal menu a tendina Default Sort.

Ordinamento dei commenti con Disqus
Ordinamento dei commenti in base all’ordine fornito.

Come moderare i commenti

Per moderare i commenti su Disqus, usiamo il pannello di moderazione di Disqus nella barra di navigazione superiore della dashboard Disqus. Questo strumento fornisce una rapida visione dei commenti del forum e del loro stato (approvati, in sospeso e così via).

Possiamo anche configurare le regole di moderazione dal menu Moderation, disponibile nel pannello di navigazione sinistro della scheda Settings della dashboard Disqus.

Pagina delle impostazioni dei commenti e della moderazione nella dashboard di Disqus
Accesso al pannello di moderazione dalla dashboard di Disqus.

Successivamente, potete dare un’occhiata alla documentazione per scoprire i passaggi chiave e le funzioni che vi aiuteranno a gestire e moderare i commenti su Disqus.

Consentire ai visitatori di commentare

Per consentire agli utenti ospiti di commentare sul sito, selezioniamo la casella Guest Commenting, quindi clicchiamo su Save. Questi commenti rimangono in sospeso fino a quando un moderatore non li approva dalla dashboard di moderazione di Disqus.

Schermata della casella Commenti degli ospiti
Consentire agli ospiti di commentare sul sito.

Approvare, eliminare e contrassegnare i commenti come spam

Il pannello di moderazione permette di eseguire azioni in blocco (approvare, eliminare e contrassegnare i commenti come spam) controllando più commenti. In alternativa, possiamo moderarli singolarmente nella vista estesa dei commenti.

Una volta attivata questa impostazione, un moderatore dovrà approvare i commenti prima che vengano visualizzati.

Schermata della sezione commenti dal punto di vista del moderatore
Moderare i commenti di Disqus con azioni di massa.

Riepilogo

Con questo tutorial abbiamo visto come aggiungere una sezione commenti a un sito statico. Oltre a Docusaurus, è possibile implementare Disqus in qualsiasi altro SSG come VuePress, Gatsby e altri.

L’Hosting di Siti Statici di Kinsta permette di distribuire facilmente i file pre-costruiti non dinamici. Per scoprire i vantaggi di ospitare il vostro sito statico su Kinsta e integrare funzioni come la sezione commenti, date un’occhiata all’Hosting di Siti Statici di Kinsta.

Avete mai implementato Disqus o un altro servizio di commenti su un sito statico? Condividete le vostre esperienze nella sezione commenti qui sotto.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).