Aggiungere i commenti Disqus e il tracking Piwik su Ghost

ghost

Ghost sta diventando una delle mia piattaforme per blog preferite, semplice ed estremamente funzionale. Ho scritto un post di update proprio alcuni giorni fa a riguardo. Sono talmente soddisfatto di questo prodotto che lo sto utilizzando per il mio blog secondario: blog.virho.it.

Nativamente Ghost non integra un sistema di commenti ai post. Io personalmente, come molti altri blogger, mi affido a Disqus. L'integrazione non è per niente difficile, bisogna però mettere le mani al codice del template di Ghost!

Per prima cosa dobbiamo recuperare lo snippet che Disqus mette a disposizione dopo aver creato l'account e il sito. La procedura d'installazione ci farà selezionare la piattaforma sulla quale vogliamo integrare Disqus. Selezioniamo "Universal Code". Ci troveremo di fronte ad uno script javascript di questo tipo:

<div id="disqus_thread"></div>
<script type="text/javascript">
   /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
   var disqus_shortname = 'shortname'; // required: replace example with your forum shortname

   /* * * DON'T EDIT BELOW THIS LINE * * */
   (function() {
       var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
       dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();
   </script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Come spiegato nella riga 3 dobbiamo inserire nella riga successiva lo shortname attribuito al sito. Questo valore lo abbiamo stabilito noi durante la fase di configurazione di Disqus. Una volta inserito il valore corretto potremmo anche cancellare il commento alla riga 3.

Ora andiamo sul server in cui è presente l'installazione di Ghost e andiamo alla cartella:

<ghost-folder>/content/themes/<theme-name>/

Il nome del tema di default è "casper". All'interno di questa cartella troveremo un file con nome post.hbs. Editiamo questo file con l'editor che più preferite. Ora dovrete semplicemente inserire il blocco di codice javascript appena sotto alla stringa {{/post}}. A seconda del template che andrete ad utilizzare potrebbe essere necessario spostare il blocco.

Salvate il file e riavviate Ghost. Ora ogni post dovrebbe avere il form Disqus per i commenti. 😉

 

Un'altra funzionalità di cui non posso fare a meno è uno strumento di analisi del traffico web. Questo può essere fatto con strumenti come: Google Analytics, Piwik, OpenWeb Analytics. Personalmente utilizzo Piwik ed anche in questo caso è necessario inserire un piccolo frammento di codice javascript nel sorgente del template di Ghost per permettere il monitoraggio delle visite. Una volta configurate le impostazioni per tracking nel back-end di Piwik ci verrà fornito un semplice snippet che dovremmo inserire nel file default.hbs, che si trova nella root della cartella del tema. In questo caso non dovremmo modificare nulla dello script. Piwik si occuperà di farci avere per le mani il codice corretto.

Lo spezzone di codice va inserito alla fine del file appena sopra il tag </body>. Magari prima di incollare il codice potete scrivere un commento del tipo:

{{! Piwik tracking code }}

Salvate ed anche in questo riavviate Ghost. 😉

Tenete presente che se andrete ad aggiornare il tema o a sostituirlo dovrete ricordavi di riportare le le modifiche effettuate che andranno sicuramente perse!