Integrare il sistema di commenti Disqus nel proprio sito HTML

google-plus Scritto da . Postato in HTML

Di sistemi di commenti, ce ne sono davvero molti, ma soprattutto per CMS ed affini.

Non sempre si ha l'abilità di costruire un sistema ad hoc per il proprio sito. Inoltre, può essere che il cliente che ci ha commissionato il sito non ha assolutamente voglia di cambiarlo o aggiornarlo a nuova tecnologia.

Un sito HTML statico, è di facile manutenzione, economico dal punto di vista del mantenimento (sempre se non sono molte le modifiche da effettuare sulle pagine che lo compongono).

Tuttavia, può essere che il cliente ipotetico, vi chieda di inserire un sistema di commenti sul proprio sito HTML. Specie se il sito rappresenta un'attività, può essere un vantaggio se il sistema dei commenti consente ai visitatori di pubblicare il proprio giudizio, magari con la possibilità di condividerlo sul suo social network preferito.

Creare un sistema come questo, che possa funzionare stand alone e la cui logica di funzionamento e memorizzazione rimanga nello spazio web del sito, richiede diverse conoscenze di programmazione, anche se desideraste inserire un plugin di terze parti.

Se effettuate qualche ricerca, potrete constatare che Disqus è uno degli strumenti più usati in assoluto come sistema di commenti e che è integrabile in praticamente qualsiasi sito web e piattaforma sul quale esso possa appoggiarsi.

Unica pecca: Il pannello di amministrazione non è in italiano. Dovrete per forza sforzarvi di capire l'inglese... 
Se non avete problemi a fornirvi di un sistema esterno al vostro sito che vi consenta di applicare moderazione ai commenti, nonostante questo sia in lingua inglese, Disqus fa per voi.

Le conoscenze necessarie per poterlo inserire nelle pagine interessate, sono davvero poche. Avrete bisogno di:

  • Un account Disqus
  • Un buon editor di testi (consiglio Notepad++) per poter modificare il codice HTML.
  • Un client FTP per accedere e scrivere nella cartella remota del vostro sito.

Creare un account Disqus

Per prima cosa, andate sul sito disqus.com e create il vostro account. Se possedete un account in Facebook o Google, cliccando su Login in alto a destra, potrete accedere con pochi click grazie ad uno di essi.

Ora che avete creato il vostro account, accedete ad esso per effettuare le prime operazioni:

  • Cliccate sul pulsante Admin in alto a destra.

disqus admin

  • Ora che siete nel vostro pannello amministratore, Cliccate su Your sites > + New

disqus admin new site

  • Inserite dove richiesto il nome del vostro sito (lo renderà univoco in Disqus creando un pannello apposito all'indirizzo vostrosito.disqus.com), la categoria e la lingua di visualizzazione sul sito.

disqus create new site

  • Cliccate poi su Crea sito

Se tutto è andato a buon fine, ora vi si presenta una pagina riportante i simboli che caratterizzano le diverse tecnologie e CMS che supportano Disqus con plugin nativi.

Questo non è il nostro caso in quanto si suppone l'integrazione in un sito statico realizzato in HTML. Per cui, scorrete verso il basso e cliccate sul pulsante riportante la dicitura "I don't see my platform listed, install manually with Universal Code".

disqus universal code

Dovreste avere davanti le istruzioni e il codice che dovrete copiare ed integrare nelle pagine del vostro sito.

universal code instructions

Modificare la pagina/e HTML

Con un qualsiasi client FTP, come Mozilla Filezilla, accedete alla cartella remota del vostro sito e scaricate la pagina che desiderate modificare.
Apritela con il vostro editor di testi e seguendo le istruzioni della pagina vista in precedenza su disqus.com, inserite il codice esattamente dove suggerito.

Nel mio caso il codice da immettere nel punto dove si desidera visualizzare i commenti, sarà:

<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var 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
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//esempio-1.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="/https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Una volta fatto, il risultato sarà simile a questo:

disqus on website

Integrare Disqus su più pagine dello stesso sito

Se nello stesso sito, sono presenti più pagine per le quali desiderate un modulo commenti di disqus, ricordatevi di decommentare e modificare le variabili this.page.url e this.page.identifier per evitare problemi di duplicazione o perdite di commenti:

Supponendo di avere due pagine (page-1.html e page-2.html) nel quale inserire Disqus, nella prima variabile, inserite l'url della pagina:

www.esempio-1.it/page-1.html per la prima pagina
www.esempio-1.it/page-2.html per la seconda pagina

La variabile this.page.identifier, serve solo nel caso che l'url sia generato dinamicamente e che l'id sia progressivo, come ad esempio nel caso dei CMS come WordPress e Joomla!.

Comunque sia, se mai aveste necessità di fare questo, consiglio di leggere attentamente l'apposita guida realizzata da Disqus e messa a disposizione nell'area di generazione del codice.

Anche se esula dal tema, preciso che nel caso utilizziate WordPress o Joomla! (oltre ad altri CMS conosciuti), potete fare ricorso a plugin già fatti che faciliteranno di molto il compito di integrare Disqus all'interno del vostro sito.

Modificare e completare la configurazione del proprio sito su Disqus

Fatto questo, tornate al pannello amministrativo del vostro Disqus per il sito appena creato. Selezionate Settings, o visitate il sito vostrosito.disqus.com/admin/settings/

Qui, raccomando di completare i campi inserendo l'URL completo del vostro sito web e di selezionare la lingua italiana (o di vostra scelta) nel campo Language. Ciò permetterà di scegliere la lingua con la quale il plugin Disqus sarà  visualizzata sul vostro website.

In Edit Profile potete scegliere le modalità di notifica dei nuovi commenti o discussioni.

Permettere i commenti da parte di ospiti non registrati

Anche se può sembrare ovvio, usando Disqus, non verrà permesso di default il commento per i visitatori non registrati. Tuttavia, Disqus ha pensato anche a questo.

Questa opzione, benché basilare, è davvero complicato trovarla nel pannello Disqus.

Per abilitare i commenti ospiti (Allow guests to comment):

  • Accedete al vostro pannello amministratore
  • Cliccate su Your sites e scegliete per quale tra i siti elencati attivare la modalità Guest.
  • Ora cliccate su Settings.
  • Nella parte dello schermo, tra le opzioni elencate, c'é Community: Selezionatela.
  • Dalla schermata che vi appare, vi è l'opzione Guest commenting - "Allow guests to comment". Abilitatela e salvate per poterla rendere effettiva.

disqus guest comments

Fatto! Chiunque arrivi sul vostro sito, potrà anche senza registrazione al sistema Disqus lasciare un commento.

Comunque sia, qualsiasi commento sarà poi moderabile e dunque eliminabile nel qual caso riporti testo inappropriato. Se avete configurato ad hoc il sistema di notifica verrete avvisati da una mail di eventuali nuovi commenti da revisionare e in fine approvare.

Lascio a voi il compito di sperimentare e commentare successivamente l'articolo! Buon modding! wink


Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati.