Facebook Like Button: gestione degli eventi con JavaScript SDK

04 Giugno 2011 Javascript, Servizi web
ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Facebook mette a disposizione un'SDK per javascript tramite la quale è possibile gestire le interazioni degli utenti con i widget inseriti in un sito web. Uno degli eventi che possono maggiormente interessare è il click di un utente sul pulsante "Like". Qui è disponibile una dimostrazione: DEMO . Ed ecco il codice completo:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
 <head>
  <title>DEMO</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 </head>
 <body>

  <div id="fb-root"><!-- contenitore utilizzato da Facebook --></div>
  <script type="text/javascript">
   window.fbAsyncInit = function() {
    // Inizializza script Facebook
    FB.init({ status: true, cookie: true, xfbml: true});
    // Aggiorna contatore
    updateFbLikeCounter();
    // Inizializzazione dell'evento "Like"
    FB.Event.subscribe('edge.create', function(href, widget) {
     updateFbLikeCounter();
    });
   };
   // Download degli script Facebook
   (function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = 'http://connect.facebook.net/en_US/all.js#&amp;xfbml=1';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
   }());

   /**
   * Aggiornamento del contatore
   */
   function updateFbLikeCounter(){
    $('#waiting').html('Aggiornamento dati in corso...');
    // Richiama la pagina http://graph.facebook.com/238926952302
    FB.api('/238926952302', function(response) {
     if(response) {
      // In caso di riposta dal server
      var likes = response.likes;
      $('#waiting').html('Dati ricevuti!');
      $('#FB_page_likes').html(likes);
     } else {
      // Errore durante la ricezione dei dati
      $('#waiting').html('Si è verificato un errore durante il download dei dati');
     }
    });
   }
  </script>

  <div class="FB_like_button_container">
   <!-- Facebook like button - Link FBML -->
   <fb:like href="http://www.facebook.com/pages/TechWaveit/238926952302" send="false" width="450" show_faces="false" font="" locale="en_US"></fb:like>
  </div>

  <!-- Numero di utenti iscritti alla pagina -->
  Likes: <span id="FB_page_likes"></span>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <span id="waiting"></span>

 </body>
</html>

L'inizializzazione del click sul pulsante Like è gestita in questo frammento di codice:


FB.Event.subscribe('edge.create', function(href, widget) {
    //CLICK SUL PULSANTE
});

Allo stesso modo è possibile inizializzare i diversi eventi descritti in questa pagina: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ . Il numero degli utenti iscritti, assieme ad altre utili informazioni, viene ricavato dalla funzione

FB.api('/238926952302', function(response) {
/* ...... */
});

che legge i dati esposti in formato JSON dalla pagina http://graph.facebook.com/238926952302 . Modificando l'id è possibile leggere i dati di altre pagine, gruppi o persone. NOTE: 1) nel tag html della pagina inserire

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

2) per i widgets utilizzare la forma FBML al posto degli iFrame

 

Commenti