Il tuo sito nelle pagine Facebook

Ciao a tutti, da qualche giorno le cose su Facebook sono cambiate. E’ cambiata la gestione relativa alle pagine di Facebook, quelle che vengono chiamate pagine FAN.

Per approfondire le novità introdotte da Facebook sulle nuove pagine Facebook vi rimando a questo link sul blog di Bigthink.

La novità che reputo più interessante è la possibilità di importare in una pagina il vostro sito tramite un iFrame. Gli utenti di Facebook si sentono a casa quando sono dentro a Facebook, mentre su siti esterni sono più prudenti e prevenuti.

Cosa c’è di meglio quindi che importare il proprio sito all’interno di Facebook e integrarlo alla perfezione?

In questo articolo vi spiegherò come ho fatto con poche righe di codice e un nuovo CSS a integrare un sito all’interno di una pagina Facebook.

Per farvi cosa potrete fare leggendo questa guida vi ho inserito qui sotto una fotografia che indica il sito originale e il sito importato nella pagina in Facebook. L’unica differenza è il CSS!

Step 1 – Creare un’applicazione Facebook

Andate a questo indirizzo http://www.facebook.com/developers/createapp.php e inserite il nome della vostra applicazione.

Aggiungete una descrizione alla vostra applicazione, inserite un’icona e un logo per abbellirla e selezionate la lingua italiana.

Dopodichè andate sul tab Sito Web e  inserite l’URL del vostro sito e il dominio (per esempio: http://blog.zanna86.com come URL e zanna86.com dome dominio).

Cliccate sul tab Integrazione Facebook. Su Page Canvas inserite un nome identificativo della vostra applicazione (per esempio: sito_zanna86).

Alla voce Canvas URL inserite l’url del sito che volete integrare in Facebook (lo stesso che avete inserito precedentemente, nel mio esempio http://blog.zanna86.com).

Impostate la voce Canvas Type e la voce Page Tab Type su Iframe.

Cliccate sul pulsante Salva modifiche.

Ora siete nella pagina di riepilogo della vostra applicazione. Annotatevi su un pezzo di carta, nella clipboard o dove volete voi l’ ID applicazione e la Chiave segreta.

La vostra applicazione è pronta!


Step 2 – Aggiungere l’applicazione alla vostra pagina

Dalla pagina di riepilogo della vostra applicazione cliccate su Pagina del profilo dell’applicazione e poi cliccate su Aggiungi alla mia pagina.

Ora andate sulla pagina a cui avete aggiunto la vostra applicazione, cliccando sull’applicazione appena creata dovrebbe apparirvi all’interno della pagina Facebook il vostro sito! Se non è così ricontrollate tutti i passaggi.

Step 3 – Preparare il vostro sito per mostrare una grafica diversa all’interno di Facebook

Quando il vostro sito verrà richiamato da una pagina Facebook, Facebook passerà alla vostra pagina dei parametri. Noi tramite php dovremo leggere questi parametri e decidere quale CSS caricare.

Ora qui entra in gioco la vostra abilità, io non posso sapere come funziona e come è strutturato il vostro sito. Dovete individuare il file che genera l’header delle pagine del vostro sito, ovvero quello che genera l’ <head> della pagina e richiama il css. Per esempio per chi usa WordPress il file in questione è l’header.php del vostro tema.

Ora dovremo preparare l’ambiente di sviluppo per Facebook.

Scaricate questo archivio e caricate via FTP la cartella facebook nel vostro sito. Un ringraziamento a BigThink.

Ora aprite il file che gestisce l’header delle pagine del vostro sito e aggiungete del codice PHP simile a questo qui sotto. Quello che vi riporto è semplicemente un codice di esempio. Io utilizzo questo codice su un sito costruito con Presta Shop. Il tuo sito potrebbe non essere compatibile con questo codice, ma partendo da quest’esempio potrai facilmente adattare il codice alle tue esigenze e al tuo sito.

session_start();

//se la sessione è già impostata non tiro più in ballo facebook, so già che dovrò usare il css di fb!
if ($_SESSION['page_id']!="291390529015"){

	require 'facebook/facebook.php';

	// Inserire il vostro ID applicazione e la vostra chiave segreta
	$facebook = new Facebook(array(
	  'appId'  => '',
	  'secret' => '',
	  'cookie' => true,
	));

	$signed_request = $facebook->getSignedRequest();

	//print_r ($signed_request); comando per visualizzare tutti i parametri passati da Facebook

	//metto le variabili che mi interessano nelle sessioni
	$_SESSION['page_id'] = $signed_request["page"]["id"];
	$_SESSION['like_status'] = $signed_request["page"]["liked"];
}

if ($_SESSION['page_id']=="291390529015"){
	$css_files[_THEME_CSS_DIR_.'style_fb.css'] = 'all'; //carico il css modificato per facebook
}else{
	$css_files[_THEME_CSS_DIR_.'style.css'] = 'all'; //carico il css normale
}

Analizziamolo insieme.

Innanzitutto non vado ogni volta a includere il file facebook.php e a controllare i parametri passati da Facebook. Questi controlli vengono fatti solo la prima volta dopodichè creerò delle sessioni salvando in esse le variabili. In questo modo solo la prima pagina richiesta si occuperà di recuperare questi parametri da Facebook. Le pagine successive si caricheranno in modo più veloce.

La session_start(); serve per i motivi sopra esposti. Nel caso la sessione page_id non sia settata uguale all’ID della mia pagina Facebook allora procediamo col codice PHP per effettuare l’autenticazione e fare la richiesta dei parametri a Facebook. Per far tutto ciò è necessario includere il file facebook.php e settare correttamente i valori AppId e secret che sono rispettivamente l’ID applicazione e la Chiave segreta che vi siete salvati da qualche parte durante lo Step 1.

Poi viene eseguita la richiesta a Facebook tramite la funzione $facebook->getSignedRequest() che salva i parametri all’interno dell’array $signed_request.

Successivamente vado a creare delle sessioni con i parametri che più mi interessano, ovvero l’ID della pagina e il liked che indica se un utente ha cliccato mi piace sulla mia pagina oppure no.

Come già detto prima, tutte queste operazioni vengono fatte solo la prima volta quando la sessione $_SESSION[‘page_id’] non è ancora stata settata.

Vediamo poi la struttura IF che sceglie quale CSS caricare. Se la sessione page_id è settata correttamente allora significa che il nostro sito è stato richiamato in una pagina Facebook e quindi dovremo caricare il CSS modificato per l’integrazione con Facebook. Altrimenti carichiamo il normale CSS.

Step 4 – Create il vostro CSS

Ora non vi resta che creare il vostro CSS per integrare il vostro sito all’interno di Facebook. L’area che Facebook mette a disposizione nelle pagine per la vostro applicazione è di 520px. Se il vostro sito necessita di scrollbar allora Facebook inserirà automaticamente la scrollbar ma vi ruberà 20px. Vi consiglio quindi di creare il vostro CSS impostando una larghezza massima pari a 500px!

Per testare la grafica e tutto quanto vi consiglio Firefox e il plugin Firebug.

Step 5 – Conclusioni

So bene che questa non è una guida passo passo ma richiede da parte vostra una certa abilità nel destreggiarvi con il PHP, CSS e quant’altro. Se c’è qualcosa di poco chiaro vi aspetto nei commenti. Agli smanettoni i piccoli passaggi che ho omesso dovrebbero risultare ovvi!

Intanto, se ti è piaciuto l’articolo clicca su Mi Piace qui sotto!

Scritto da in Facebook



10 commenti to “Il tuo sito nelle pagine Facebook”

  1. nino ha detto:

    Ho provato ad utilizzare il tuo codice ma nn mi funziona il richiamo del css.Quale potrebbe essere il problema?

  2. zanna86 ha detto:

    Il mio codice richiama il css per PrestaShop. Se il tuo sito gira su un altro CMS o l’hai scritto tu devi richiamarlo in altro modo…devi cambiare le righe dove ho commentato con “//carico il css modificato per facebook” e “//carico il css normale”

    Ciao

  3. nino ha detto:

    Ciao grazie per la risposta approfitto per dirti che col css ho risolto così:
    ho inserito nel php echo ”
    “;

    ma mi carica sempre lo stesso, probabilmente perchè come page_id ho inserito l’app_id della app di facebook.
    Sapresti dirmi come ricavare il page_id?
    grazie

  4. zanna86 ha detto:

    Se decommenti la riga “//print_r ($signed_request);” potrai vedere tutti i parametri che facebook passa alla tua pagina!

    Io ho usato il page_id, ma può funzionare anche con l’app_id!

    Volendo puoi debuggare riga per riga inserendo echo la_variabile_che_ti_interessa seguita da un exit().

    Ciao

  5. nino ha detto:

    Ciao ho provato con print_r ($signed_request); ma mi stampa solo il testo e non il page_id…per utilizzare l’app_id al posto del page_id che sintassi si dovrebbe usare? Grazie in anticipo

  6. zanna86 ha detto:

    Se non ti stampa nulla significa che non viene fatta correttamente la connessione!Togli tutti gli IF e cerca di effettuare correttamente la connessione in modo che con il print_r ti stampi tutti i parametri che facebook passa alla tua pagina.

    Dopodichè puoi prendere spunto dal mio codice per caricare un CSS modificato al posto dell’originale se la pagina è richiamata da Facebook!

    Ciao

  7. nino ha detto:

    Ciao approfitto ancora della tua disponibilità. Ho provato con questo codice ma non ottengo il risultato:

    ‘1571*********’,
    ‘secret’ => ’99c6**************’,
    ‘cookie’ => true,
    ));

    $signed_request = $facebook->getSignedRequest();

    print_r ($signed_request); //comando per visualizzare tutti i parametri passati da Facebook

    //metto le variabili che mi interessano nelle sessioni
    $_SESSION[‘user_id’] = $signed_request[“user”][“id”];
    $_SESSION[‘like_status’] = $signed_request[“page”][“liked”];

    if ($_SESSION[‘user_id’]== “******”){
    echo” “;

    }else{
    echo” “;

    }

    ?>

    Inoltre facendo:

    $signed_request = $facebook->getSignedRequest();

    print_r ($signed_request); //comando per visualizzare tutti i parametri passati da Facebook

    //metto le variabili che mi interessano nelle sessioni
    $_SESSION[‘page_id’] = $signed_request[“page”][“id”];
    $_SESSION[‘like_status’] = $signed_request[“page”][“liked”];

    come ci avevi consigliato tu otteniamo tutti i paramentri tranne propio quello desiderato cioè il page_id.

    Se puoi dare un’occhiata al codice te ne saremmo grati
    Grazie ancora e ciao

  8. zanna86 ha detto:

    Il codice che posti nei commenti non è molto leggibile a causa di WordPress che taglia diversi comandi PHP.

    Mmmh, forse mi sa che sbagli il modo di testare il tutto. Una volta creata l’applicazione su FB devi aggiungerla su una pagina FAN ed eseguirla dalla pagina FAN per vedere correttamente tutti i parametri!

    Se lanci la tua pagina direttamente (es: miosito.it/paginaFB/) oppure se lanci l’applicazione dalla pagina Facebook dell’applicazione non otterrai i parametri che ti servono!

    Per ottenere correttamente tutti i parametri dovrai aggiungere la tua applicazione a una pagina FAN e poi cliccare sull’applicazione in modo da utilizzarla all’interno della pagina FAN!

    Purtroppo ci sono mille giochi di parole ma se leggi attentamente dovrebbe essere tutto chiaro (colpa di Facebook che crea mille tipi di pagine diverse!)

  9. Leerance ha detto:

    Ciao! Hai detto che il codice è per Prestashop? perfwetto è lo stesso che utilizzo io. Qual è il file header che mi serve?

  10. zanna86 ha detto:

    Nella versione di Prestashop che utilizzai io al tempo, il file da modificare era l’header.php che si trova nella root di prestashop.

    Ciao

Lascia un commento