Pubblicato il 28/03/13 - aggiornato il  | 31 commenti :

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


firebase-database

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

numero-visite
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 -


31 commenti :

  1. proprio ieri ne cercavo uno per il mio blog, grazie:)

    RispondiElimina
  2. Ho fatto come hai scritto ma non compare nessun contattore, o questo sarà visualizzato una volta scritto un nuovo articolo, non con quelli vecchi?

    RispondiElimina
    Risposte
    1. @# Funziona perfettamente. L'ho testato in un altro blog. Gli errori che puoi aver fatto sono
      1)Non hai creato il database con Firebase
      2)Non hai sostituito l'URL in https://nomedatabase.firebaseio.com
      3)Non hai copiato correttamente il codice. In questo caso prova a incollarlo in un file di testo prima di metterlo nel modello
      4)Se sei sicuro dei punti precedenti allora prova a inserire l'ultimo codice subito sotto a
      <data:post.body/>

      Elimina
    2. Il mio data base con Firebase è https://lukescintu.firebaseio.com/
      ho fatto anche il resto, in seguito ho letto la tua guida per il codice del read more perché non sapevo dove inserire gli ultimi 2 codici per il contatore. Ho provato anche con un altro blog idem. Prova a rifare tutto da capo.

      Elimina
    3. @# Ti posso dire solo che il codice funziona. Ci sono lettori del blog che lo hanno già installato (Leggi sotto). Non so che problema ci sia con i template dei blog che hai testato.

      Elimina
    4. Probabilmente sarò io che sbaglio qualcosa, eppure ho seguito la tua guida alla lettera. Infatti ho aperto un blog di prova per vedere se era nel mio che non funzionava, ma niente non compare il contatore.

      Elimina
    5. @# Non vedi nulla oppure vedi l'icona e Visite ma non il numero? Se vedi l'icona e Visite allora vuol dire che non funziona nel tuo template e c'è poco da fare, se invece vedi l'icona prova a incollare l'ultimo codice senza le prime due righe e senza l'ultima riga su Layout > Aggiungi un gadget > HTML/Javascript

      Elimina
  3. ottimo contatore, subito messo di fianco ai miei pulsanti di condivisione, solo due cose forse mancano...la possibilità di escludere l aumento di pagine viste da noi durante il log in nel blog e la possibilità di allineare le visite ai pulsanti di condivisione.

    Si può usare quel sito database per avere un database che contiene tutte le persone conosciute suddivise per categorie con foto e tutti i riferimenti? Ci sono cose simili già pronte!?

    RispondiElimina
    Risposte
    1. @# Il contatore può essere facilmente allineato ai pulsanti di condivisione basta inserire tutti i codici in una tabella
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      compreso l'ultimo del contatore. Sto avvicinandomi adesso a questi tool quindi ancora non li padroneggio sufficientemente per poter rispondere agli altri quesiti

      Elimina
  4. Grazie prima di tutto Ernesto.
    A me invece da sempre "in carica" :( >> http://i.imgur.com/9fKm5px.png

    Da cosa può dipendere?

    RispondiElimina
    Risposte
    1. @# Prova con un altro browser, altro non so dirti :( Questi problemi sono purtroppo molto comuni. Io stesso sono stato costretto a rinunciare a dei widget perché nel mio modello non la finivano mai di caricarsi ...

      Elimina
  5. Grazie Ernesto, funziona benissimo Auguri di buona Pasqua! ciao

    RispondiElimina
  6. non funge, non segnala correttamente le letture fatte. Dopo avere scritto l ultimo articolo ho potuto constatare che blogger mi segnala 36 leture mentre il contatatore 17 comprese alcune mie, quindi non funziona correttamente. Credo che questo sia da imputare al fatto che, come da me provato, lui non registra il primo caricamento della pagina (viene inserito uno zero) mentre all secondo caricamento viene inserito 1, quindi dev essere successo che sono state notificate solo le seconde, terze....letture dell articolo escludendo la prima! Come si aggiusta!?

    RispondiElimina
    Risposte
    1. @# Prova a andare su Google Analytics e vedrai un dato ancora diverso :). Può darsi che ci sia il problema che hai constatato. Il widget però serve solo per dare una idea ai lettori dell'ordine di grandezza delle visite avute dai singoli post.

      Elimina
  7. Ho cercato di fare quello che hai descritto se vai nel mio blog vedi bene che nei post il contatore gira ma non da le visite. mi aiuteresti? www.ilblogdellorco.info

    RispondiElimina
    Risposte
    1. @# Purtroppo non ho la bacchetta magica :)
      Non conosco la ragione perché nel tuo modello non vada

      Elimina
  8. Non ho capito se col passare del tempo, ad esempio su un blog di 300 visite al giorno questo spazio da 5 giga, diventerà 4,9 - 4,8 sino ad arrivare a zero oppure si mantiene sempre costante se le visite sono costanti?
    Vorrei adottarlo su Wordpress perché plugin di questo tipo occupano parecchio database.

    RispondiElimina
    Risposte
    1. @# Quale spazio di 5GB? Quello di Google? Tra un po' diventerà di 15GB. Resterà sempre di 15GB se posterai immagini di dimensione inferiore a 2048 pixel. Puoi postarle anche nei blog di Wordpress. Io ho sempre fatto così per i miei blog Wordpress per non consumare la banda del server.

      Elimina
    2. Ok allora a breve lo userò. Per i 5 giga mi riferivo a quelli di Firebase per far funzionare questo contatore, vabbé mi sa che l'unico modo per capire quanto durano questi 5 giga è provare :)

      Elimina
  9. Ciao Ernesto, ho inserito tempo fa questo contatore nel mio blog. Non mi ha mai dato il numero corretto delle visualizzazioni, nel senso che sono sempre abbondantemente inferiori a quelli che segnala blogger per ogni post. Perché? Per esempio, se faccio F5 mi cresce di 1 ogni volta che lo ripeto. Si può risolvere la cosa o serve qualche tipo di contatore?

    RispondiElimina
    Risposte
    1. L'unico contatore per Blogger che ho trovato in rete è questo. Poi tutti i contatori danno solo delle tendenze. Le visite delle statistiche di Blogger sono sempre più alte di quelle di Google Analytics
      @#

      Elimina
    2. Sebastiano visto che a te funziona per metterti in linea con le stesse visite che ti da blogger dovresti manualmente cambiare il VALUE nel database di firebase per ogni singolo articolo. Se il tuo post prima dell'installazione del contatore di firebase segnava 100 visite dovresti farlo partire da 100 cambiando appunto nel database all'url associato al post il value impostandolo a 100 - cosi sarà in linea con le visite mostrate da blogger.

      Elimina
  10. Ciao Ernesto. Mi ero talmente abituato a questo contatore ma purtroppo adesso non funziona più da quando ho cambiato template. In pratica adesso rimane bloccato su loading, carica carica ma non mostra più il numero delle visite. Questo contatore ha bisogno di jquery presente cmq nel mio template, ho cercato conflitti ecc.. ma nulla il contatore carica sempre. Qualche consiglio? Da cosa può dipendere? Grazie.

    RispondiElimina
    Risposte
    1. Non ti saprei proprio cosa dire se non quello di ripetere l'installazione a meno che tu non lo abbia già fatto
      @#

      Elimina
    2. Niente , funziona su qualsiasi tema inclusi quelli di blogger ma su questo no. Se posso approfittare , ho creato uno script contatore che memorizza le visite in un database mysql, funziona perfettamente , il problema e che se io visito un articolo da pc mi conteggia le visite esempio : 100
      Se visito lo stesso articolo da cellulare non mi conteggia più da 100 ma riparte da 1. questo xche l'url mobile e diverso quindi lo script lo memorizza come nuovo. Come posso risolvere il problema? Esiste un codice o la formula esatta per bypassare questo problema? Grazie ancora.

      Elimina
    3. Il problema degli URL del mobile che aggiungono ?m=1 a quelli del desktop non riguarda solo i contatori di visite ma anche per esempio i Mi Piace di Facebook e non ho testato ma probabilmente anche i tweet di Twitter. Onestamente non so come si potrebbe risolvere anche se su Google Analytics lo hanno fatto :)
      @#

      Elimina
  11. Ciao Ernesto, ho provato a iscrivermi su Firebase ma il sito mi obbliga a utilizzare il mio account google per il "Sign in". Una volta entrato in Firebase col mio account google, non ho idea di dove recuperare l'indirizzo https://nomedatabase.firebaseio.com/ (che dovrei aver ottenuto digitando io stesso il nome del mio database, ma non so dove digitarlo!). Forse è cambiato qualcosa su Firebase da quando hai scritto questo post? E se sì, c'è qualche altro modo per inserire un contatore di visite post su Blogger? Grazie per l'aiuto.

    RispondiElimina
    Risposte
    1. Se mi ricordo bene il nome del database è quello che si vede nell'indirizzo del browser dopo aver eseguito l'accesso. Può darsi che abbiano cambiato qualcosa e purtroppo non conosco nessun altro servizio simile
      @#

      Elimina
  12. Purtroppo nella barra indirizzo, dopo il login, compare solo questo:
    https://www.firebase.com/account/#/

    certo, è assurdo non poter avere un contatore visite post su blogger....

    RispondiElimina
  13. Ciao, o seguito tutte le istruzioni indicate da te, il contattore e' visibile sul post ma non riesce a rilevare il numero di visite. Firebase e' stato assorbito da Google e forse e' cambiato qualcosa nella configurazione di Firabese mi potresti aiutare?
    Grazie e ciao.

    RispondiElimina
    Risposte
    1. Ho eliminato tutti i miei progetti su Firebase. È diventato troppo complicato 🙂.
      Mi spiace.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy