Contatore del numero delle visite per i post di Blogger.

Widget di Blogger per mostrare in tempo reale il numero dei visitatori ricevuti da ciascun post.

La realizzazione di un contatore in tempo reale per le visite che riceve ciascun post di un blog su Blogger è sempre stata un compito difficile perché su Blogger non esiste la possibilità di creare un database e quindi ci si doveva appoggiare su coloro che lo avevano già creato. In un widget di questo genere che presentai tempo fa era presente della pubblicità nascosta che si presentava quando ci si cliccava sopra. Come se non bastasse improvvisamente cessò di funzionare presumo per il superamento dei limiti di banda. Vediamo finalmente come creare un database con il servizio gratuito Firebase per poi utilizzarlo per realizzare un contatore di visite per Blogger.

Un account gratuito su Firebase offre 5GB di spazio e 10GB di limite di banda che sono ampiamente sufficienti per fare quello che ci si propone. Si va su Sign Up e si compila il modulo di iscrizione inserendo un indirizzo email e una password. Subito dopo dovremo digitare il nome che si vuole dare al nostro database, che ne determinerà l'URL sul web

e che sarà del tipo https://nomedatabase.firebaseio.com/ dove la parte in rosso sarà quella scelta dall'utente. Firebase può essere naturalmente molto utile per altre operazioni visto che si possono creare fino a 5 database gratuitamente ma per il widget del contatore di Blogger basta segnarsi questo indirizzo per poi sostituirlo nel codice. Se vi siete dimenticati l'URL vi basta andare su Account > Settings per visualizzarlo nuovamente.

Dopo aver salvato il template andate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate la riga ]]></b:skin> e, subito sopra, incollate questo codice

/*-------- Contatore Pagine Viste  ----------*/
    #contenitore {
    width: 75px;
    float: right;
    }
    .caricando {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMrqq5Fzjt-3P78qQVN5ByjLDeWtTVmdPDCe1I3j5X2FphrzhksYJN_c8zt4U8linULcYyqD8lmzGjhmUz_A2w2he1wHIOrlcvHYhrpo9hEi9coS0oEU6XjMgKUvAHmopOEhlPW6WGB4Oa/s16/loading1.gif) no-repeat left center;
    width: 16px;
    height: 16px;
    }
    .pagineviste {
    float: right;
    color: #003366;
    font: bold italic 14px Trebuchet;
    }
    .testovisite {
    float: left;
    font: bold italic 14px Trebuchet;
    color: #191919;
    }
    .iconavisite{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJVfu4-ys94VMAaCRV5qKvbCZvUamN2UaPf1QRqloMU6ghc9T5QQYak8cXwVjaFtTAluU6rEM_OmeQiDkQRAmVZfEOuFmB0JwxSH37vTTEmPtKPCL9Kjp9IMwn1i1tqyh7S5mGf576RmV/s16/visite.gif) no-repeat left;
    border: 0px;
    display: block;
    width: 16px;
    height: 16px;
    float: left;
    padding: 0px 2px;
    }

che determinerà l'aspetto del contatore e che può essere personalizzato nei colori, nelle icone, nella famiglia di font e nel grassetto-corsivo. Ricordo che bold serve per il grassetto e italic per il corsivo. Si può togliere uno o anche tutti e due i tag se preferiamo un testo normale. I meno esperti possono consultare il post sui codici dei colori per personalizzare i codici esadecimali.

Si cerca ora la riga </body> e, subito sopra, si incolla quest'altro codice

<!-- Contatore di Visite per Blogger -->
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#numeropost&#39;).addClass(&#39;caricando&#39;);
var blogStats = new Firebase(&quot;https://nomedatabase.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;caricando&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

dove si sostituisce a nomedatabase quello che gli abbiamo dato su Firebase. Adesso dobbiamo decidere dove inserire il contatore che sarà visibile solo nei singoli articoli. Se vogliamo visualizzarlo alla fine di ciascun post, bisogna cercare il codice del Read More

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

e incollare, subito sotto a questo, l'ultimo codice del contatore

<!-- Pagine Viste Widget per Blogger -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='contenitore'><span class='iconavisite'/><div class='testovisite'>Visite:</div> <div class='caricando pagineviste' id='numeropost'/></div>
</b:if>

Finalmente si salva il modello. Per visualizzare il risultato aprite qualsiasi post di questo sito



Alla fine di ciascun articolo in basso a destra si vedrà questo contatore

con l'espressione Visite che può essere modificata e con il numero delle volte che è stato aperto quel post. Per verificare il funzionamento del contatore pigiate su F5 o comunque ricaricate le pagina e vedrete il numero aumentare di una unità. Ovviamente le pagine viste saranno conteggiate dal momento della installazione del widget quindi tutti i post partiranno con il numero 0 accanto a Visite.

Fonte | MyBloggerTricks -