Facebook: fare click su mi piace per mostrare la pagina

A moltissimi di voi sarà capitato di dover creare una pagina sul vostro sito con del contenuto visibile solo a chi ha fatto “mi piace” su Facebook in una pagina aziendale.

Innanzitutto bisogna creare la propria app in http://developers.facebook.com, perchè, per fare quello che ci serve, abbiamo bisogno di un app ID che Facebook ci deve rilasciare.
Una volta creata la vostra app (usando il tasto Crea Applicazione in alto a destra), vi verrà assegnato un App ID/API Key: è un codice numerico.

Ora quello che ci serve è una pagina .html ed una .php, che useremo per caricare le API di Facebook e indicheremo come gestire la cache al browser.

Create un file e nominatelo facebookapi.php:

 <?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
 ?>
 <script src="//connect.facebook.net/it_IT/all.js"></script>

Ora create un file index.html:

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style type="text/css">
      div#container_notlike, div#container_like {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="fb-root"></div>

    <div id="container_notlike">
      Non hai fatto mi piace sulla mia pagina!
    </div>

    <div id="container_like">
      Ti piace eh?
    </div>

  </body>
</html>

Come potete notare non c’è ancora traccia del codice javascript per gestire gli eventi. Un attimo di pazienza! Abbiamo semplicemente inserito la libreria jQuery ( una versione non nuovissima, a voi le eventuali implementazioni…) e i due div che dovranno apparire a seconda degli eventi del codice per gestire gli eventi su Facebook.
Sono entrambi nascosti, perchè starà al codice javascript mostrare uno piuttosto che un altro. Viene da sp

Ora dobbiamo inserire il codice javascript nell’head, possibilmente dopo che il DOM è pronto per rispondere. Come si fa? Beh, facile…

$(document).ready(function(e){
    //codice...
});

Aggiungiamo ora il codice all’interno del mio document.ready

      window.fbAsyncInit = function() {
        FB.init({
          appId      : '[il vostro APP ID senza le parentesi]',
          channelUrl : 'facebookapi.php',
          status     : true, // controlla lo status su FB
          cookie     : true, // attiva i COOKIES
          xfbml      : true  // fa il parsing XFBML
        });

        FB.getLoginStatus(function(response) {
          var page_id = "[l'id della vostra pagina di Facebook]";
          if (response && response.authResponse) {
            var user_id = response.authResponse.userID;
            var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
            FB.Data.query(fql_query).wait(function(rows) {
              if (rows.length == 1 && rows[0].uid == user_id) {
                //console.log("Ha già fatto LIKE, mostro la pagina");
                $('#container_like').show();
              } else {
                //console.log("Non ha fatto like");
                $('#container_notlike').show();
              }
            });
          } else {
            FB.login(function(response) {
              if (response && response.authResponse) {
                var user_id = response.authResponse.userID;
                var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
                FB.Data.query(fql_query).wait(function(rows) {
                  if (rows.length == 1 && rows[0].uid == user_id) {
                   // console.log("Ha fatto il Like");
                    $('#container_like').show();
                  } else {
                   // console.log("Non ha fatto il Like");
                    $('#container_notlike').show();
                  }
                });
              } else {
                //console.log("Non ha fatto il Like");
                $('#container_notlike').show();
              }
            }, {scope: 'user_likes'});
          }
        });
      };

      // Load the SDK Asynchronously
      (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));

Ora tutto dovrebbe funzionare a dovere.
Chiaramente non sarebbe male implementare la pagina facendo si che, invece di mostrare il div con la scritta “hai fatto like”, venisse caricato del contenuto con una chiamata ajax.
Se non vi funziona, commentate pure esprimendo tutto il vostro disappunto 😉

Facebook: invitare tutti gli amici a fare “Mi piace” su una pagina

Una delle cose che non sopporto assolutamente dell’interfaccia di Facebook è la totale assenza di un aiuto per l’utente nell’evitare di fare un milione di click ogni qual volta ci sia da selezionare gli utenti destinatari di un messaggio o di un invito.

Aspettando una sorta di Facebook Pro, dove, pagando, si possa agire normalmente ed agevolmente tra le amicizie e gli utenti delle pagine, inviando loro messaggi privati e quant’altro in libertà, ora come ora bisogna fare di necessità virtù.

La maggior parte dei siti che offrono automazione sui social non fanno quello che serve a me, come Sproutsocial o SendSocialMedia: l’unica cosa è manipolare gli oggetto di Facebook stesso, piegandoli alle proprie necessità.

Un esempio lampante è l’invito a fare mi piace su una pagina di cui si è amministratori.
La sola idea di fare 5000 click per selezionare 5000 amici è di per se stupida, figurarsi un’interfaccia dove non esiste un semplice bottone che selezioni tutte le checkbox.
Chissà come sono gli stipendi di coloro che si occupano del frontoffice di FB…

Se conoscete javascript e avete dimestichezza con la console di Chrome, il gioco sarà molto più semplice di quello che può sembrare.

Andate su Facebook usando Google Chrome, entrate nella vostra pagina e, in alto, cliccate su: Espandi il pubblico –>  Invita i tuoi amici
Se non conoscete Google Chrome, fatevi vedere da uno bravo.

Una volta apertosi l’elenco degli amici, fate click destro –> Ispeziona elemento su uno degli amici. Vi si aprirà la finestra della console, con la porzione di codice selezionata evidenziata.

Andando a spulciare nel codice html, cercate il primo form che contiene il codice selezionato.  Dovrebbe essere qualcosa del tipo:
<form rel=”async” action=”/ajax/pages/invite/send/” method=”post” onsubmit=”return window.Event &amp;&amp; Event.__inlineSubmit &amp;&amp; Event.__inlineSubmit(this,event)” id=”u9y2dfy31“>

L’id in grassetto è importante, segnatevelo da qualche parte, poichè ci sarà da inserirlo via codice manualmente.

Ora andare nella sezione console, cliccando in alto nella finestra del codice di Chrome.
Non stupitevi se troverete, come nell’immagine, un elenco di errori.

Eliminate il contenuto della console, giusto per non confondervi le idee. Per fare ciò usate il tasto di divieto che trovate in basso a sinistra ( quarta icona ).

Ora siamo pronti per selezionare gli oggetti dal DOM; carichiamo in una variabile il form:

var f = document.getElementById('u7h83jn34'); 

Dopo di che possiamo ciclare tutti gli elementi presenti.
Fate attenzione: sostituite il valore u7h83jn34 con l’id del vostro form.

Eccovi il secondo blocco di codice da eseguire:

var modulo = f.elements;
for (i=0; i {
if(modulo[i].type == "checkbox" && !modulo[i].disabled )
{
modulo[i].checked = !(modulo[i].checked);
}
}

Come vedete, ho caricato in modulo il valore di f.elements ( per comodità ).
Per ogni elemento nel form, controllo che sia una checkbox e che non sia disabilitata da FB, modifico lo stato della checkbox.

Notate che se, nella console, usate il tasto freccia su riproporrete il comando immediatamente precedente. Se rilanciate nuovamente il secondo blocco di codice, noterete che le checkbox si deselezioneranno.

Spero vi sia utile!