Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Come catturare e salvare i click del pulsante mi piace (like button)

Come catturare e salvare i click del pulsante mi piace (like button)Il pulsante Mi piace che ormai è presente in tutti i siti e blog del web, ha molte potenzialità non conosciute da tutti. E’ infatti possibile catturare molte informazioni riguardanti la persona che clicca sul pulsante, come nome, cognome, url del profilo di facebook, ma cosa molto più importante… è possibile salvare sul proprio database quanti click vengono fatti su un determinato pulsante, funziona molto comoda se si vuole creare una propria classifica di determinati post o prodotti in un determinato periodo di tempo.
E’ possibile mostrare del testo, del contenuto riservato solamente a chi clicca sul pulsante mi piace, e questo potrebbe invogliare l’utente a cliccare e quindi a condividere il post (o quello a cui è associato il pulsante.
Infine è possibile tracciare i click sul like button anche tramite Google Analytics, il che è davvero molto comodo.


Premetto che:

  • per funzionare, devi aver implementato sulla tua pagina Javascript SDK, che ti permette di accedere alle funzionalità del Graph API di facebook. Sotto ti spiego come fare ad inserirlo.
  • IMPORTANTE: è possibile catturare i click solamente se usi il pulsante nella sua versione XFBML e non nella versione IFRAME.
  • ho preparato i file di esempio scaricabili da qui.
  • Vedi subito il risultato degli esempi che farò: come catturare e salvare i click.

Al momento a seguito di modifiche da parte di Facebook dei loro codici (che avviene praticamente ogni giorno -.-), il mio programmino non funziona più. Ciò nonostante, ti può servire a capire come utilizzare i codici che vengono forniti da Facebook SDK per catturare i click.

Quando si preme sul pulsante Mi piace di Facebook, viene generato un evento che è possibile captare e il buon Mark Zuckerberg mette a disposizione a tutti un metodo che permette di fare ciò.
Il metodo è il seguente:

<script>
FB.Event.subscribe('edge.create', function(href, widget) {
    alert('Ti piace ' + href);
});
</script>

In questo modo, una volta che l’utente cliccherà sul pulsante Mi piace, verrà generato un evento ‘edge.create‘ e verrà mostrato la scritta: ‘Ti piace ‘ + l’url a cui è associato il pulsante ( es. ‘Ti piace robertoiacono.it’ ).
Gli eventi che ci interessano sono due:

# edge.create - creato quando un utente clicca su Mi piace (fb:like)
# edge.remove - creato quanto un utente clicca su Non mi piace più
  (quando clicca elimina il Mi piace cliccando sul pulsante stesso)  (fb:like)

Aggiungere Javascript SDK sulla tua pagina

Il metodo più efficiente di aggiungere Javascript SDK alla tua pagina è caricarlo in maniera asincrona, in modo tale da non rallentare il caricamento di altri oggetti della tua pagina.
Il codice è il seguente:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'il tuo ID dell'applicazione', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/it_IT/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Il tuo ID dell’applicazione è l’ID dell’applicazione che ti puoi creare qui..
Dovrai inoltre inserire nel campo <head> ( tra <head> e </head> ) del codice html della tua pagina il codice:

<xmlns:fb="http://www.facebook.com/2008/fbml">

Intercettare il numero di click e salvarli nel tuo database

Ti ho fatto vedere prima come si intercetta l’evento generato quando l’utente clicca sul pulsante Mi piace, ma come si fa a salvare il tutto nel database?
E’ molto semplice, basta inviare i dati ad un’altra pagina tramite ajax, e questo file ( nel mio esempio è insert.php ) incrementerà di uno il valore già presente nel database.
Ho preparato i file di esempio scaricabili da qui.
Vedi il risultato di questi esempi su come catturare e salvare i click.
Ecco come si presenta il codice per inviare le informazioni una volta che viene cliccato il tasto Mi piace:

FB.Event.subscribe('edge.create', function(href) {
alert('Ti piace '+href);
$.ajax({
        type: "POST",
        url: "insert.php",
        data: {'url' : href, 'id':"<?php echo $id;?>", 'name':"<?php echo $name;?>"},
		success: function(){ }
    });
});
</script>

IMPORTANTE: devi inserire il seguente codice per far funzionare ajax:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Può capitare che un utente clicchi per sbaglio sul pulsante Mi piace, oppure decide che non gli piace più quella determinata cosa, allora rimuove il Mi piace e viene generato l’evento edge.remove. In questo modo, come nel caso precedente, è possibile tramite ajax ( invia url e id utente al file delete.php ) eliminare il Mi piace dal nostro database, ovvero decremento di uno il valore associato al pulsante:

FB.Event.subscribe('edge.remove', function(href) {
alert('Non ti piace più '+href);
$.ajax({
        type: "POST",
        url: "delete.php",
        data: {'url' : href, 'id':"<?php echo $id;?>"},
		success: function(){ }
    });
});
</script>

Nei file di esempio, quando l’utente clicca sul pulsante Mi piace,  viene salvato l’url e il nome e cognome dell’utente. Per contare il numero dei click su un determinato url, basta fare una semplice query SQL.
Ho utilizzato questi nomi per:
Il database: `cattura_click`
La tabella `info`
I campi: `url` ,`user_id` ,`utente`

Mostrare il contenuto riservato a chi clicca

Il contenuto riservato viene mostrato solo quando l’utente clicca sul pulsante, ottimo per ringraziare l’utente oppure, ancora meglio, per offrire un link a qualche risorsa scaricabile (un ebook ad esempio).

<fb:like href="http://www.robertoiacono.it/"></fb:like>
<div id="riservato" style="display:none">Testo del contenuto riservato</div>
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
    document.getElementById('riservato').style.display = 'block';
});
</script>

Sostituisci robertoiacono.it con l’url che preferisci (se non metti niente, punta automaticamente alla pagina dove si trova il pulsante).
Questo codice inserisce il pulsante, e sotto crea un <div> che non viene visualizzato inizialmente ma solo al click del like button. Ovviamente è possibile spostare il posizionamento del contenuto, spostando la posizione del <div>.

Tracciare i Mi piace tramite Google Analytics

Con questo codice è possibile sapere quando e quali pulsanti Mi piace vengono cliccati.

<script>
FB.Event.subscribe('edge.create', function(href, widget) {
    pageTracker._trackEvent('facebook','like', href);
});
</script>

Questo codice va inserito DOPO il codice standard di Google Analytics (quello che usi normalmente per tracciare le statistiche sul tuo blog o sito).
Vedi il risultato di questi esempi su come catturare e salvare i click

Non è stato proprio una passeggiata, ma finalmente sfrutterai tante funzioni in più del like button, utile no?


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
22 Commenti
  • opinionando

    credo che sia al di sopra della mia portata, ma estremamente interessante

    • Roberto

      Basta perdere un po’ di tempo, ma vedrai che ci riuscirai!

  • guglielmo

    A me serve di sapere i nomi delle persone che cliccano sul pulsante mi piace! Come posso fare?
    Il sito è stato creato con wordpress e per il pulsante like uso un plugin
    Grazie

    • Roberto

      Non è facile da spiegare, guarda i file che ho messo a disposizione.
      Guarda l’esempio come catturare e salvare i click e clicca da questa pagina il pulsante mi piace. Aggiorna la pagina e vedrai comparire il tuo nome!!!

      Per funzionare, devi aver implementato sulla tua pagina Javascript SDK, che ti permette di accedere alle funzionalità del Graph API di facebook. E’ possibile leggere i nomi dei click solamente se usi il pulsante nella sua versione XFBML, quindi guarda che versione usa il tuo plugin.
      Poi segui tutto quello che ho scritto nel post, ma non è così immediato da implementare.

  • Salvo

    Buongiorno. Ho scaricato i file di esempio, solo che non capisco come impostare il tutto sul mio blog WordPress. Ho degli articoli e i like sono presenti sia nell’articolo stesso, nella pagina archivi (tipo categorie) e in home page. Come/dove inserisco il codice su wordpress?? Grazie per l’aiuto.

    • Roberto

      Ciao Salvo,
      leggi il commento di sopra, come ho detto è difficile da spiegare. La cosa migliore è laggere il codice dei file che ho caricato (ci sono i commenti dove spiego a cosa servono determinate funzioni) e fare delle prove. Ma non è così semplice da aggiungere questa funzione

  • Salsero

    Ciao,
    grazie per l’articolo!
    C’è un piccolo inconveniente in questa funzionalità di FB.
    Ossia che guardando il codice uno potrebbe agire direttamente sul file
    invocato dall’edge.create (nel tuo esempio url: “insert.php”)
    e falsare un po’ i risultati.

    Sai mica se c’è la possibilità di leggere l’attuale valore dei like di Facebook per il bottone in questione? (ad esempio, per questa tua pagina web, attualmente sono “9”)

    • Roberto

      per leggere l’attuale valore dei like su una pagina, ho usato:


      $prodotto1="url-pagina"
      $url_controllare1="https://graph.facebook.com/?ids=".$prodotto1;
      $cont = file_get_contents($url_controllare1);

      //se l’utente non è loggato, mostra quanti like ha avuto il link

      preg_match("/shares(.+?)}/s", $cont, $matches1);
      if (!empty($matches1)){
      $arr_ima=$matches1[0];
      if( preg_match('/\.*([0-9]{1,})/', $arr_ima, $matches2) ) {
      $num_like1=$matches2[0];
      }
      }

      Non sarà il metodo migliore ma a me ha funzionato.

  • Gabriele

    Ciao Roberto,
    interessante tutta la spiegazione, io cercavo una cosa più “semplice” ma che non sto trovando. Come faccio a sommare i “MI piace” del “Like button” (applicato in diverse sezioni del sito) alla pagina azienda creata di FB?
    Vedo che compaiono nella pagina del sito dove è presente il “Like button” ma non si sommano nella pagina azienda al quale dovrebbe essere associato.
    Cosa devo specificare nell’href del button?
    Ciao e grazie

    • Roberto

      Ciao Gabriele,
      quindi vorresti sommare i Mi piace dei tuoi post al Mi piace della tua pagina fan?
      Basta che nell’href metti l’indirizzo della tua pagina fan! Così dovrebbe andare, io l’avevo fatto, se non va così dimmelo che ti cerco il codice.

  • Salvatore

    Ciao Roberto, ho seguito tutta la tua guida, a me interesserebbe intercettare il nome di chi fa mi piace sul mio sito dopo essersi loggato con FB connector. Ora però dopo diverse prove, non riesco a capire dove trovare i clik sui vari “mi piace” che ho fatto per prova. Grazie per l’aiuto :)

    • Roberto

      Salvi tutto su un database?

      • Salvatore

        Si, ho creato un database apposito, ma non so bene come gestirli. Sicuro so che non viene salvato alcun dato perchè il DB ha sempre 0Kb. Così per prova ho messo tutto quello che hai condiviso tu in una cartella specifica del mio sito (dove uso di regola wordpress) e il risultato è questo errore:

        Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /home/XXXX/domains/dominio.it/public_html/wp-content/themes/PoserInkA/click/index.php on line 160.

        Il file l’ho regolarmente sostituito con le info del mio DB e dell’id applicazione con Fb, ma ti ripeto non so dove sbaglio. Non so dove rintracciare i mi piace, fatti fare ad alcuni miei amici.

        Mi confermi, inoltre, che con FB connector, i dati del profilo di chi clicca su mi piace vengono salvati sempre all’interno di questo database? Grazie di tutto :)

        • Roberto

          Allora, prova a caricare l’intera cartella in una sezione ESTERNA al blog, così com’è non è compatibile con WP. Per questo motivo ti da mille errori. Al momento però mi pare ci sia un problema, non riesco più a fare il login, devono aver cambiato i codici quelli di fb… appena riesco aggiorno tutto

          Io ho usato il social plugin di FB (login), non credo che FB connector sia compatibile con l’esempio.

  • Andrea Novi (@n0v1x84)

    Ciao Roberto, l’articolo è veramente ben fatto, complimenti!!!
    La mia domanda è la seguente: c’è un modo di intercettare chi ha già cliccato sul like senza usare i cookie?
    Ovvero se uno ha già cliccato mi piace su un post, prima di inserire questa funzione, per generare l’evento edge.create dovrebbe decliccare e ricliccare sul like.

    Avete idee?

    • Roberto

      Ti ringrazio Andrea,
      purtroppo non c’è modo di sapere chi ha cliccato sul Mi piace in precedenza. Dovrebbe proprio fare come hai detto te, decliccare il like e poi cliccarlo nuovamente.
      Altre strade non ne conosco…

      • Andrea Novi (@n0v1x84)

        Grazie Roberto, per la risposta. Sto provando a cercare un po’ in rete e ho trovato delle cose davvero molto interessanti che forse potrebbero interessare anche a voi.

        http://unbound-media.com/facebook/how-to-tell-if-a-facebook-user-likes-your-facebook-application/

        Il metodo “auth.sessionChange” ormai è deprecato ma in sostituzione c’è “auth.authResponseChange” che ancora devo capire come funziona.

        Cmq attraverso questo metodo è possibile capire chi ha già cliccato su una FANPAGE (ma non ad un post, purtroppo, ma sto cercando di capire se è possibile anche quest’opzione).

        Direi che ci siamo quasi dai 😀

        • Roberto

          Grande! Suggerimento molto prezioso :) Vedrò di studiarmelo un po’… se trovo qualcosa di utile lo pubblico!

          • Gabriella

            Ciao Roberto scusa la mia poca conoscenza in materia. E’ possibie conoscere il nome di chi ha messo un mi piace per poco tempo per trarmi in inganno? Ho un serio problema per favore aiutami. Grazie infinite

          • Roberto

            Così su due piedi no, dovresti crearti un sistema/applicazione apposta, ma non è una passeggiata.

  • Giuseppe

    Ciao Roberto,
    ti scrivo innanzitutto per complimentarmi per la guida dettagliata,poi per rimproverarti del mancato aggiornamento!!! 😛
    Scherzi a parte !vorrei chiederti se con l’apertura delle api di facebook la situazione ad oggi 2013 del tuo esempio è rimasta invariata o meno..
    In realtà dopo aver seguito passo passo i tuoi consigli…devo dire che ho incontrato qualche problemino di compatibilità con firefox e chrome…forse a causa della gestione dei javascript(credo)…come affronteresti il problema,tu che hai un po di esperienza in piu?
    si tratta della mia giusta intuizione secondo te dei javascript o è cambiato qualcosa nelle api?
    Grazie mille…sperando che mi ripsonda…e abuon rendere!! :)

    • Roberto Iacono

      Ciao Giuseppe,
      scusami ma ho abbandonato lo sviluppo di questo tool, non sono più aggiornato sull’argomento. Probabilmente sono cambiate le API.
      Un saluto

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13598+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13598+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614