BigThink

Facebook: Tutti i segreti del Tab IFRAME e i contenuti riservati

Settimana scorsa ti ho spiegato come creare un Tab IFRAME personalizzato sulla tua Pagina Facebook.

Oggi vediamo come implementare i contenuti riservati solamente ai fan, ovvero l’ormai classico “sistema coupon”: se non sei fan vedi il Landing Tab, se clicchi “Mi piace” potrai accedere al contenuto speciale solo per gli iscritti alla Pagina.

1. Come funziona

Abbiamo visto che nel Tab IFRAME possiamo includere una qualsiasi pagina HTML o PHP presente sul nostro server. Quando Facebook la carica, provvede a passarle alcuni dati codificati e, nello specifico, passa via POST una variabile chiamata signed_request.

Il primo step sarà quello di leggere tale variabile, decodificarla e quindi ottenere un oggetto JSON con tutti i dati che ci servono.

2. La decodifica

Ecco la funzione che Facebook stesso ci mette a disposizione per poter decodificare i dati:

function parse_signed_request($signed_request, $secret) {
  list($encoded_sig, $payload) = explode('.', $signed_request, 2);

  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
    error_log('Unknown algorithm. Expected HMAC-SHA256');
    return null;
  }

  // check sig
  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }

  return $data;
}

function base64_url_decode($input) {
  return base64_decode(strtr($input, '-_', '+/'));
}

A questo punto la decodifica dei dati sarà piuttosto semplice:

$data = parse_signed_request($_REQUEST['signed_request'], 'INSERISCI QUI LA TUA APP SECRET');

Ovviamente dovrai personalizzarla con la tua “Chiave segreta” o “App Secret”.

3. Leggiamo i dati

Bene, ora nella variabile $data avremo un array fatto in questo modo:

Array
(
    [algorithm] => HMAC-SHA256
    [issued_at] => 1302690526
    [page] => Array
        (
            [id] => 33933529842
            [liked] => 1
            [admin] => 1
        )
    [user] => Array
        (
            [country] => it
            [locale] => it_IT
            [age] => Array
            (
                [min] => 21
            )
        )
)

Qui trovi alcuni valori interessanti:

$pageID = $data['page']['id']; // l'ID della Pagina su cui è installato il Tab
$liked = $data['page']['liked']; // Boolean che indica se l'utente corrente è fan della Pagina
$admin= $data['page']['admin']; // Boolean che indica se l'utente corrente è admin della Pagina
$language= $data['user']['locale']; // La lingua dell'utente

Grazie a questi valori potrai, rispettivamente:

  • Mostrare un contenuto specifico a seconda della Pagina su cui viene installato il Tab
  • Mostrare un contenuto riservato per chi è fan della Pagina
  • Mostrare ad esempio un link per amministrare l’Applicazione
  • Mostrare un contenuto diverso per ogni lingua.

4. Mostrare un contenuto riservato per chi è fan della Pagina

Dopo quanto detto finora, è evidente come è possibile mostrare un contenuto riservato solo per chi è fan:

if(!$data['page']['liked']){
    // contenuto per chi NON è fan
}else{
    // contenuto riservato per i fan
}

Piuttosto semplice, no? Ora puoi sbizzarrirti come vuoi, creando coupon o contenuti visibili solamente ai fan.

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Sei uno sviluppatore Facebook o un aspirante tale?

Sei uno sviluppatore Facebook o un aspirante tale?

Sei uno sviluppatore di Applicazioni Facebook o stai studiando per diventarlo? Ti invito allora a diventare fan di questa Pagina che ho creato su Facebook: [fanbox id="242766447165" stream="0" conn="0"] Troverai risorse, guide e idee per sviluppare le tue Applicazioni, incontrerai altri Developers a cui chiedere consigli e con cui confrontarti. L'idea è quella di creare un punto ...
Facebook: come creare un Landing Tab sulla tua Pagina Fan

Facebook: come creare un Landing Tab sulla tua Pagina Fan

Un paio di settimane fa ho raccolto una carrellata di quelle Pagine Fan che usano una Call to Action per invitare gli utenti ad iscriversi, ma non ti ho spiegato come realizzare una pagina simile. Questa tecnica si divide in due passaggi: Per prima cosa bisogna creare un Tab personalizzato. In secondo luogo tale Tab va ...
VideoVirali.com: scopri i video più condivisi su Facebook!

VideoVirali.com: scopri i video più condivisi su Facebook!

In questi ultimi giorni sono stato impegnato in un piccolo progetto personale al quale era tanto che volevo dedicarmi: VideoVirali.com. In poche parole si tratta di un sito che raccoglie i video più condivisi su Facebook, in modo del tutto automatico! Diventando fan della rispettiva pagina su Facebook, riceverete ogni giorno sul vostro stream ...
Facebook Open Graph: Tutto il Web in un Grafo

Facebook Open Graph: Tutto il Web in un Grafo

Qual è il vero obiettivo di Facebook? Conquistare il mondo! Facebook, grazie al suo Open Graph, sta letteralmente mappando tutte le connessioni che esistono tra persone, interessi e pagine, creando un grafo sociale unico nel suo genere. Ma Facebook non si limita a rappresentare le sole connessioni presenti all'interno del social network, vuole di ...
Landing Tab Design per la tua Pagina Facebook

Landing Tab Design per la tua Pagina Facebook

Uno dei primi passi per ottimizzare la propria Pagina Facebook è quello di creare un Landing Tab. Non è necessario sviluppare un intero sito interattivo all'interno del Tab, ma è sufficiente un'immagine fatta come si deve e con la dovuta Call to Action. Vediamo oggi i migliori siti dove trovare ispirazione per le nostre ...

94 Commenti

  1. Giovanni

    Ciao,
    a proposito di contenuti riservati credevo che non fosse possibile reperire l’id di un utente Facebook che atterra sulla mia pagina ufficiale (fanpage). Questo almeno finchè quest’ultimo non avesse autorizzato l’eventuale applicazione contenuta in iFrame.

    Mi sono imbattuto invece in una pagina che mi riconosce e mi da il benvenuto indicando il mio nome e cognome e mi invita a diventare fan.

    Come è possibile? Nell’oggetto JSON passato da Facebook non c’è quest’informazione…

    18 novembre 2011, 12:49
  2. Sendi

    Scusate ma io non ho capito:(
    Mi potete rispiegare per favore in un altro modo?
    Non sono riuscita nemmeno a mettere il link sul quale i fan cliccandoci semplicemente sopra diventano direttamente fan:(
    Grazie 😀

    7 novembre 2011, 18:01
  3. stefano

    A me continua a darmi l’errore: PHP Parse error: syntax error, unexpected ‘[‘, expecting ‘)’ in C:\inetpub\wwwroot\indexphp.php on line 31 che per la cronaca è la riga: [algorithm] => HMAC-SHA256
    Cosa può essere?

    21 ottobre 2011, 19:28
  4. Leo

    scusate la domanda forse sciocca ma dal 1° ottobre il codice fornito funzionerà ancora oppure va sostituito?

    30 settembre 2011, 19:07
  5. Stefano

    Ciao VV,
    devi creare prima l’applicazione su Facebook, inserire il codice segreto sulla tua pagina PHP (te la fornisce FB) e caricare la pagina in uno spazio https (FB da pochi giorni vuole che sia uno spazio “sicuro”). Fatti questi 3 passaggi “punti” l’applicazione alla pagina.

    Il codice è identico a quello descritto in questo post, ma se mi dai la e-mail ti invio direttamente la pagina php.

    19 settembre 2011, 09:25
  6. VV

    Ciao Stefano, potresti postare cortesemente il codice che a te funziona e stai utilizzando?

    In sostanza ho capito che bisogna creare una pagina php ( da mettere in ftp su proprio spazio web) ..in questa paga ci va il codice….

    ma prima bisogna creare una applicazione in fb? e poi segnalare dove è la pagina php?

    ho capito bene?

    grazie anticipatamente

    15 settembre 2011, 22:36
  7. Stefano

    Ho provato il codice e funziona alla grande! Ora ho un cliente che usa un server Windows in https e non vuole installarci php. C’è un codice asp .net che fa la stessa cosa?

    13 settembre 2011, 19:24
  8. Gianluca

    Ciao, è possibile quando l’utente nn è fan (intendo nell’if) puntare alla landing page senza “restrizioni” va bene un location href?

    13 settembre 2011, 17:45
  9. Miss

    che manicomio… ma non potevi caricare anche un allegato con il file bello e pronto? Io non so proprio dove inserire questi codici anche perchè non reperisco la guida precedente di cui tu parli nel primo commento!

    29 agosto 2011, 17:26
  10. Miss

    bene ma… tutti questi codici dove devono essere inseriti? Si deve creare una pagina php e caricarla nella cartella dove si trova la pagina dell’applicazione? Com si fa…?

    29 agosto 2011, 17:05
  11. lucy

    ciao a tutti
    anche io ho provato copiando esattamente il codice fornito sopra.
    Funzionerebbe tutto solo che la funzione JSON è disponibile solo per php5 e maggiori

    Putroppo ho l’hosting su ARUBA con php 4.9.9, così ho scaricato la funzione JSON
    http://blog.silviasoft.com/2009/11/19/fatal-error-call-to-undefined-function-json_decode-php-version/
    e l’ho inlcusa nel mio file php.

    Però mancava ancora la funzione hash_hmac così ho trovato questo link
    http://pecl.php.net/package/hash
    dove però a parte scaricare il pacchetto non ho capito bene cos’altro fare…

    Poi ho trovato la funzione custom_hmac sul manuale php
    http://php.net/manual/en/function.hash-hmac.php
    L’ho copiata nel mio script e rinominata in hash_hmac ma… ancora manca la sha256 perchè ho quest’errore
    Fatal error: Call to undefined function: sha256()
    a questo punto mi arrendo… qualcuno riesce ad andare avanti?
    Grazie a tutti
    Lucia

    12 agosto 2011, 19:10
    • lucy

      Aggiornamento: per adesso ho risolto commentando la parte che richiama l’has256, ma sicuramente sarebbe meglio di no…

      $expected_sig = ……
      if …..
      return null;

      Spero che qualcuno abbia la soluzione giusta!

      12 agosto 2011, 20:19
  12. marko

    Salve, ho seguito con attenzione il tutorial, sopratutto inserito il codice che consigliava Marco. Attualmente la cosa strana è che sia se mi faccio fan o no appare sempre lo stesso output. Appare sempre “// contenuto per chi NON è fan “.
    Questo sia con questo codice che con un altro.
    Dove puó stare l’errore?

    grazie in anticipo!

    17 luglio 2011, 21:19
    • cassandra

      L’errore sta nel fatto che NON devi lasciare quel testo, ma sostituirlo con il contenuto per chi non è fan 🙂

      10 agosto 2011, 19:42
      • Miss

        #cont_gen {
        display:block;
        width: 520px;
        height: 900px;
        overflow-x:hidden;
        overflow-y:hidden;
        position:relative;
        }

        #non-fan {
        display:block;
        position:relative;
        z-index:1;
        position:absolute;
        top:0;
        left:0;
        }

        #fan {
        display:block;
        background: url(mybackground);
        width:520px;
        height:416px;
        }

        .link {
        display: block;
        width:235px;
        height:140px;
        position:absolute;
        left: 55px;
        top: 174px;
        }

        .link2 {
        display: block;
        width:197px;
        height:150px;
        position:absolute;
        left: 323px;
        top: 247px;
        }

        #like {
        display:block;
        width:236px;
        height:120px;
        position: absolute;
        left: 55px;
        top: 328px;
        }

        Ovviamente al posto di my jpg o my url ci sono quelli esatti… ma continuo solo a vedere il contenuto per chi non è fan della pagina, anche quando lo diventi.

        N.B. sto facendo delle prove con l’account di cui non sono amministratore, è normale diciamo… 😉

        29 agosto 2011, 18:59
  13. marko

    Ciao!Ho trovato quest’articolo molto interessante, stavo facendo una prova ma non capisco perchè non funziona. Questa parte di codice va incollato in un php vuoto o integrato in una parte di codice giá esistente?
    Se incollo questo codice impelementandolo con id e key non funziona, immagino manchi qualcosa peró non capisco cosa.

    Grazie in anticipo!

    14 luglio 2011, 00:34

3 Citazioni