Facebook Fan Box

Avete presente quella finestrina presente in alcuni siti con il loghetto di Facebook e tante faccine? Bene. Quello si chiama fan box ed è uno strumento offerto da Facebook per permettere di esporre nel proprio siti le persone che si sono iscritte alla vostra Facebook pagine o semplicemente fan page. Metterlo era semplicissimo, bastava accedere alla propria pagina e un linkettino mandava alle istruzioni per installarlo. Ora però non c'è più: come fare?

Beh se volete potete papparvi la pagina del sito Facebook Developer, oppure potete seguire le indicazioni che vi do io: vi fidate?

Installare il fan box

Niente di più facile amici miei, l'unica difficoltà è quella di sapere dove metterlo nell'html del vostro sito. Se avete un blog potete scegliere se metterlo nel template oppure in un widget di tipo "testo html", che va bene sia per Blogger sia per Wordpress. Il codice da inserire è il seguente:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/it_IT" type="text/javascript"></script>
<script type="text/javascript">FB.init("{la tua api key }");</script>
<fb:fan connections="{numero di avatar}" width="{larghezza del box}" height="{altezza del box}" profile_id="{id della vostra pagina facebook}" stream="{mostra i messaggi in stream, 0 per no, 1 per si}" css="{url file CSS di personalizzazione}"></fb:fan>
<!-- opzionale -->
<div class="boxTxt"><a href="{indirizzo pagina}">{etichetta link}</a></div>

L'unica cosa in più da fare è sostituire i valori che ho scritto in rosso. Più facile ancora è recuperare lo script corretto in una pagina dedicata di facebook, senza diventare matti alla ricerca della API KEY: crea il tuo fanbox.

Personalizzare il fan box

Una delle cose che non è spiegata bete invece è come personalizzare bene quel box, ovvero colore-dimensioni-posizioni interne. Nelle istruzioni ufficiali (reference) segnalano come è possibile comunicare al box – che viene renderizzato come iframe, quindi pagina esterna al vostro sito / server incastrata nella vostra pagina – di usare un particolare foglio di stile.

Nota tecnica: finchè fate le prove ricordatevi che Facebook mette in cache il file di stile personalizzato che gli segnalate. Per aggirare questo problema è sufficiente che all'url del foglio di stile aggiungiate un parametro sempre nuovo (almeno in fase di debug). Ecco esempio come:

http://<miosito>/<miofogliodistileperfacebookfanbox>.css?t=<numerocasuale>

Io al posto di numero casuale ho fatto iniettare data e ora.

In Ricette 2.0 ho usato proprio questo sistema per modificare banalmente la dimensione delle icone. Qui amici dovete avere un minimo di conoscenza di come funzionano i CSS e come analizzare il DOM (document objects model), ovvero la struttura dell'html del box. Ad esempio questo è il codice di ogni icona presente nel Facebook Fanbox:

<div class="grid_item">
   <a href="http://www.facebook.com/profile.php?id=1130926759" target="_blank">
      <img src="http://profile.ak.fbcdn.net/v230/1176/111/q1130926759_2422.jpg">
      <div class="name">Federico</div>
   </a>
</div>

Mi permetto di sottolineare l'animalata di mettere un DIV dentro a un tag A… comunque sono finezze che lasciano lo spazio che trovano. Quello importante è analizzare la struttura. L'icona è dentro a un DIV di classe "grid_item". All'interno c'è un link (A). Dentro al link una immagine e un altro DIV classificato come "name".

Volete modificare lo style dell'immagine? Dovete andare a ridefinire lo stile delle immagini all'interno di elementi di classe grid_item. Come?

<style type="text/css">
.grid_item img{
  width: 30px;
  height: 30px;
}
</style>

Nei css, quando definite qualcosa con lo spazio in mezzo (.grid_item spazio img) andate a dire di impostare lo stile di tutti gli elementi figli di quello che lo precede: in questo caso ridefiniamo lo stile di tutte le img, dentro a un elemento di classe .grid_item.

Volete nascondere le etichette con i nomi dei fan? Semplicemente in questo modo:

.grid_item .name{
   display:none;
}

Attenzione però. Ci sono alcuni settaggi a livello di .grid_item che non sono riuscito ad impostare, tipo la sua dimensione. Sto però verificando assieme agli amici del forum ufficiale e a capobecchino, la fattibilità della cosa. Come al solito Capobecchino è riuscito a stupirmi e ha trovato il problema: l'elemento ereditava dalla pagina madre un attributo min-height. Ecco il CSS usato per ricette 2.0 (potrebbe cambiare nel tempo).

.grid_item{
min-width:0px;
max-width:35px;
}
.grid_item img{
height: 35px;
width: 35px;
margin: 0px;
padding: 0px;
}
.grid_item div.name{
font-size: 6px;
font-family: Trebuchet MS, Tahoma, Arial;
text-transform: uppercase;
color: #aaa;
text-align: left;
padding: 0;
margin: 0;
min-height: 0px;
line-height: 6px;
/*display: none;*/
}

Grazie ancora a Capobecchino, grande amico e programmatore.

Come analizzare il box

L'HTML è l'HTML. I requisiti necessari per svolgere un'analisi sono: un editor testuale e il sorgente. Ma dobbiamo sempre essere masochisti? Il nostro buon dio (minuscolo perchè parlo di Google) ci ha fornito Chrome, e con Chrome lo strumento posiziona elemento. Non vi resta che andare su qualsiasi elemento di una pagina (compresi dentro a un iframe), tasto destro > ispeziona elemento, et voilà: vi appare l'html dell'elemento su cui avete richiesta l'aiuto divino e pure la possibilità di fare modifiche di test per vedere come viene.

Piccola pillola, spero che non me la mettano negli #sbirulinofact: usare strumenti per velocizzare il lavoro non è da polli. E' da polli vivere di quelli strumenti perchè non sappiamo cosa stanno combinando!