Integrare un plugin commenti jQuery in un sito HTML

google-plus Scritto da . Postato in HTML

E siamo arrivati all'ultimo capitolo della saga.. Negli ultimi articoli, ho trattato l'argomento di "Inserire un plugin commenti in un sito HTML statico" ed affini.

Abbiamo visto come integrare il plugin commenti di Facebook:

Inserire il plugin dei commenti Facebook nel proprio sito

E in alternativa il plugin Disqus (sistema dei commenti conosciuto a livello internazionale):

Integrare il sistema di commenti Disqus nel proprio sito HTML

Come già accennato, questi due sistemi, benché validi, hanno un inconveniente (se vogliamo chiamarlo tale, ma dipende dai punti di vista), cioé quello che sono sistemi che si appoggiano a siti, framework o servizi esterni. Questo vuol dire che se cambia il servizio, cambia il sistema dei commenti, l'interfaccia, la logica di moderazione etc.

Insomma, non è del tutto di vostra proprietà. Ciò che scrivete o scrivono di voi, risiede in un sistema da voi utilizzato ma che non controllate al 100%. 

Se volete invece, che i commenti, le valutazioni e tutto ciò che vi giri attorno resti nel vostro sito (anche fisicamente), dovrete fare ricorso ad un sistema un po' più complesso che di certo richiederà molte più skills di programmazione nella realizzazione e integrazione del plugin rispetto ad un semplice editing per l'inserimento di codice prefatto da terzi nelle pagine del vostro sito HTML.

Questo non vuol dire che sarà migliore. Ma sarà fatto da voi (o modificato da voi), secondo le vostre preferenze. Non serve dire che vi darà molta più soddisfazione creare qualcosa di vostro. Inoltre, potrete gestire in toto grafica, campi richiesti etc. Nel mio caso, ho aggiunto al plugin commenti le stelle per la valutazione (rating stars) grazie ad uno script apposito scritto in jQuery.

Ma veniamo al dunque: Il cliente, mi aveva chiesto qualcosa che sposasse i commenti con le recensioni di TripAdvisor (?!). Ciò voleva dire che desiderava che i commenti non fossero semplicemente tali, ma vere e proprie recensioni della sua azienda con relativo giudizio.

La richiesta inoltre, era di un controllo totale su ciò che era suo (ovvero le recensioni) per poter cancellare o modificare con assoluta libertà i vari giudizi. Per questo, non adorava nemmeno l'idea di una possibile interazione con i social network, nemmeno una possibile condivisione.

Nelle varie ricerche da me effettuate, non vi sono molti strumenti a disposizione per coloro che decidono di effettuare l'integrazione di un plugin di terze parti con il proprio sito HTML. Come sempre se si facesse la stessa valutazione per un CMS come WordPress le cose cambierebbero notevolmente.

Uno dei plugin jQuery disponibili allo scopo, è jquery-comments by viima. Il plugin è fatto bene, offre diverse opzioni ma ha un piccolo difetto o pregio: Il plugin non comprende la logica di memorizzazione dei commenti. Questo implica, che sarete voi a doverla creare. Database? XML? Indipendentemente dalla tecnologia da voi preferita o imposta dalle preferenze del cliente, sarete voi che dovrete implementare con il codice la logica per archiviare e gestire i commenti.

L'altro sistema, un po' meno fine ma completo di logica di archiviazione XML dei commenti, è EasyComment jQuery plugin di jswidget.com. I difetti di questo strumento, sono la grafica (ma vi ci si può lavorare sopra) e il fatto che non funziona al primo colpo, probabile merito a qualche cambiamento di PHP.

Da notare che entrambi gli strumenti, non possiedono nessuna pagina di Login o autenticazione per la moderazione dei commenti. In poche parole, che sia semplice o elaborata sarete obbligati a realizzarla voi.

La mia scelta, è caduta su EasyComment, per via del fatto che non avevo tempo da perdere e avevo un budget limitato da rispettare. Limiti di tempo uguale limiti nel realizzare software ad hoc. Ho dunque optato per ciò che mi avrebbe richiesto meno tempo di realizzazione.

Per la logica di autenticazione, vi darò qualche dritta, ma sarà vostro compito metterci mano. E' qualcosa di delicato che comporta dei rischi. Ognuno deve prendersi le proprie responsabilità, anche nella realizzazione dello stesso. In poche parole, non mi prendo la responsabilità di eventuali intrusioni nei vostri sistemi.

In questo e nei prossimi due articoli, in sunto, vedremo:

  1. Come integrare EasyComment nel vostro sito e farlo funzionare (eliminando il problema nel codice PHP)
  2. Come aggiungere il sistema di valutazioni offerto da jQuery Bar rating in EasyComment
  3. Accenno ad un possibile, semplice ma non sicuro sistema di autenticazione per la pagina di moderazione di EasyComment

Integrare EasyComment jQuery plugin

La procedura è semplice e potete tranquillamente seguire ciò che c'é scritto nel sito ufficiale, ma visto che è in inglese, diamogli una ripassata:

La prima cosa che dovete fare è scaricare il plugin easy-comment in formato zip, create una cartella easy-comment e scompattatevi in locale i file compressi.

Accedete via FTP al vostro spazio web, e nella root del vostro sito, uplodate la cartella easy-comment e i file in essa contenuti.

Ora, scaricate la pagina HTML nella quale desiderate integrare il plugin dei commenti

Apritela con un editor di testi. 

Incollate all'interno del tag <head></head> le seguenti righe:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.your-domain.com/easy-comment/jquery.easy-comment.min.js"></script>

Le righe precedenti, includono la libreria jQuery nella vostra pagina linkandola direttamente da Google. La seconda, include la libreria javascript con il codice di funzionamento di easy-comment...

Fate attenzione con la libreria jQuery. Se l'avete già inclusa nella vostra pagina per qualche ragione, ad esempio se avete adottato un template che ne fa uso. Questo perché come già trattato in altro articolo, le jQuery possono da versione a versione entrare in conflitto e invalidare il corretto funzionamento non solo del plugin jQuery, ma anche del vostro template... ed altro ancora che dipenda da esse.

Potrebbe interessarti questo articolo:

Joomla - Come risolvere i conflitti jQuery

Ora, sempre nel tag <head></head> inserite queste righe di codice:

<script>
     jQuery(document).ready(function(){
         $("#comments-container").EasyComment();
     });
</script>

Il codice appena riportato, serve ad 'attivare' la libreria. 

Se lo usate con xampp in locale, consiglio di specificare il percorso di EasyComment all'interno del codice di inizializzazione. Modificate il codice qui sopra come segue:

<script>
     jQuery(document).ready(function(){
         $("#comments-container").EasyComment({
path:"easy-comment/",
moderate:true,
hasEmail: true
});
     });
</script>

Questo servirà per indicare correttamente il percorso in locale dello script PHP di EasyComment che altrimenti potrebbe non funzionare. 

Ultima cosa da fare, è decidere dove deve comparire il modulo dei commenti all'interno della pagina. Deciso? Bene incollate nella posizione desiderata la riga seguente:

<div id="comments-container"></div>

Secondo quanto dichiarato dal creatore, ciò basta a poter integrare e rendere funzionale e usabile il plugin nel vostro sito web.

Tuttavia, ciò che é successo nel mio caso, dimostra che non sempre è così. Temo che sia a causa di una variazione nella struttura di PHP stesso, che un riferimento ad una variabile negli argomenti di una funzione PHP nel cuore di EasyComment, impedisca il funzionamento, nonché la visualizzazione del modulo commenti nella pagina.

ec no funziona

Provate a cambiare la versione di PHP nel pannello del vostro Hosting se quest'ultimo ve lo permette. Se state usando la versione 7, provate a cambiarla per la 5.6 o simili. Se funziona avete risolto il problema. Sennò sarete costretti a modificare il codice PHP:

Ma vediamo come individuare l'errore e successivamente eliminarlo per rendere il vostro EasyComment funzionante e pronto all'uso.

Correzione del codice PHP

La riga di codice, è la 315 del file ec-comment.php ma se volete verificare l'errore che ne impedisce il funzionamento, potete eseguire la seguente procedura con Chrome o Firefox:

  • Attivate gli Strumenti per sviluppatori del vostro browser (se usate Chrome premete Ctrl + Maiusc + I per attivarlo)

ec comment error

  • Selezionate Network e nella barra dei filtri All
  • Qui vedrete tutte le chiamate che sono state fatte per realizzare la pagina, così come la vedete.
  • Ora scorrete fino al modulo commenti EasyComment, fate come se doveste inserire il vostro commento... Ora premete Invia
  • La richiesta dovrebbe apparire ora nel riquadro degli Strumenti per sviluppatori con il nome di ec-comment.php
  • Cliccatevi sopra e nel riquadro che compare a destra, cliccate su Response per vedere la risposta del server che dovrebbe indicarvi la linea di codice (315) ed altre informazioni sull'errore.
  • Individuata! Ora apriamo il file ec-comment.php seguendo gli indizi datici dal browser e togliamo il simbolo "&" davanti alla variabile incriminata.
             $temp_html .= getComment($last_child,$total_comment,$total_reply,true,&$cur_level,$max_reply);
  • Salvate ed il gioco è fatto: Provate nuovamente il funzionamento del form dei commenti. Se funziona abbiamo superato lo step!

ec ripristinato

Arrivati a questo punto, è una questione di preferenze. Se così vi va bene, EasyComment è pienamente funzionale anche se in inglese e ha un pannello moderazione scarno e senza un modulo di login per l'accesso.

Ovviamente, ripeto, non è sicuro ma per il momento vi consentirà di fare ciò che dovete alla pagina http://www.vostrosito.xx/easy-comment/ec-dashboard.html

Il sistema di moderazione è molto basico, ma fa il suo dovere consentendovi di pubblicare nuovi commenti o rifiutare un eventuale messaggio indesiderato.

In uno dei prossimi articoli, vedremo come integrare una pagina di login, anche se rudimentale e comunque non sicura. Ribadisco il concetto che ognuno può e deve pensare alla sicurezza dei propri sistemi, specie se li si mette a disposizione dei propri clienti. 

Come tradurre EasyComment in italiano

Come già accennato, EasyComment e davvero easy, cioé molto basico. Non è stato studiato per avere un sistema multilingua. Se è ciò che desiderate questo plugin non fa per voi. Comunque, vi è il lato positivo: E' un plugin pronto all'uso ma che si offre molto per eventuali customizzazioni essendo anche OpenSource.

Per questo motivo, il modo più rapido per modificare le etichette di lingua, è entrare nel codice di EasyComment e cambiare fisicamente le descrizioni.

I file da modificare, sono i file del core del plugin: ec-comment.php e jquery.easy-comment.js (almeno per quanto riguarda la visualizzazione front-end da parte del visitatore del sito). 

EasyComment infatti, gestisce quasi tutta la visualizzazione del form di inserimento commenti e di risposta ad essi in maniera dinamica attraverso ajax. Questo vuol dire che il codice che descrive il modulo di inserimento dei commenti è integrato nel codice.

In esso appunto, vanno cancellate le parole in inglese e introdotte quelle in italiano.

Inutile dire che per fare ciò avrete bisogno di una conoscenza seppur base di programmazione per evitare di mettere mano dove non dovete ed invece ritoccare ciò che sarà utile allo scopo: Avere il sistema commenti in italiano. 

Per chi ritenesse questo compito arduo e complicato a breve nella sezione download di questo sito pubblicherò una versione rivisitata di EasyComment in italiano.

Sperando che anche questa mia esperienza sia utile a qualcuno, vi invito a scrivere i vostri commenti qui sotto e a lasciarmi qualche mi piace o condivisione se vi ha risparmiato qualche ora di grattacapi.

Alla prossima e buona lettura! laughing


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.