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!

Loading Facebook Comments ...

17 pensieri su “Facebook Fan Box

  1. Pingback: Facebook Login » Facebook Fan Box

  2. Pingback: Tweets that mention Facebook Fan Box -- Topsy.com

  3. Merlinox Autore articolo

    Joomla o non joomla l’unica cosa da fare è passare nell’oggetto di facebook la corretta location del file CSS (l’hai verificata?) quindi sovrascrivere le definizioni degli stili come scritto nel post.
    Hai verificato con l’ispeziona elementi di chrome che nel tuo box ci siano gli elementi con .grid_item etc?
    Magari se ci dai qualche info di più possiamo provare ad aiutarti!

    Rispondi
  4. Agriturism Campania

    Salve.. ho un problema.
    Ho inserito nel mio sito il FUN BOX.
    Su Firefox si vedono le persone che hanno cliccato “mi piace” (vedi immagine qui http://yfrog.com/mtimmagineafirefoxj)
    mentre in Internet Explorer 8 non si vedono le persone (vedi l’immagine qui http://yfrog.com/f1immaginebinternetexplorj).
    Come mai?
    Come posso risolvere??
    Non ho capito perchè tutti i browser vedono tranquillamente la fun box mentre Explorer 8 non permette di visualizzarla!
    Aspetto notizie. Grazie

    Rispondi
    1. Merlinox Autore articolo

      Purtroppo in casa Microsoft hanno il vizietto di mettere sempre qualche cosa di divertente per farci impazzire. E qui parliamo di fanbox di facebook, pensati quando si parla di web app serie… comunque sono sempre chiacchiere. Verifica che dentro al tuo HEAD ci sia:
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

      Rispondi
  5. Daniela

    Ciao Merlinox

    Vista la tua competenza in materia (a differenza mia) provo a sottoporti il mio problema. Ho creato una pagina fan per il sito gourmetdaniela.com Ho utilizzato un plugin che mi consente di inserire il like box come widget, ma poco importa perchè se uso la pagina ufficiale di facebook per generare il codice ho lo stesso problema.

    Mi succede che non tutte le persone che diventano fan vengono visualizzate, o meglio, ci sono due casistiche:

    1) Non sono connessa a facebook
    Non vedo tutte le persone e il box mi riporta il numero corretto di fans (es.: 13). Le persone che non vengono visualizzate sono però conteggiate come fan e ricevono regolarmente i post sulla loro bacheca

    2) Sono connessa a facebook (sia con il mio profilo collegato alla pagina che con un altro profilo indipendente)
    Vedo tutte le persone ma quasi tutte doppie. Il numero dei fans è maggiorato di 1 (es.: 14)

    Inoltre, ieri sera provavo con il profilo di mio marito (uno di quelli che non viene visualizzato) e non riuscivo a fare like su un articolo postato sulla sua bacheca in automatico dalla fan page. Succedeva che al click il contatore aumentava, appena ricaricavo la pagina con un banale F5 il like spariva dal conteggio (nessuno lo vedeva) e mi veniva ridata la possibilita di farlo. Stamattina magicamente era presente in via definitiva e visibile a tutti.

    Any idea?

    grazie,
    Daniela

    Rispondi
    1. Merlinox Autore articolo

      Purtroppo non sono così ferrato sull’argomento anche se così al volo sembra un problema di sincronizzazione nelle chiamate asincrone o di cache. Cmq vedo di girare la palla a qualche amico esperto.

      Rispondi
    1. Davide

      Ciao Daniela,
      il plugin mi pare installato correttamente. Personalmente io attenderei di avere un numero cospicuo di fan di modo che Facebook stesso possa proporre sempre un numero alternato di persone senza doppioni (considera che lui, se loggata, ti propone i tuoi amici. Se non ce ne sono troppi, potrebbe proporre doppioni piuttosto che sconosciuti).
      Per i like non conteggiati io sarei un attimo più paziente con facebook e attenderei il suo aggiornamento 😉 Dalle pagine che gestisco vedo spesso refreshando cambiare il numero di fan di qualche unità, nel caso sia di pagina piccole che peggio in pagine che gestisco con decine di migliaia di utenti. Spero di esserti stato utile. A presto e da piccolo cuoco in cucina, complimenti!

      Rispondi
  6. Lio

    Ciao, vorrei capire una cosa…. Se uso i plugins di WordPress per mettere il Fanbox non riesco a farlo xe’ non riesco ad avere l’applicazione e il codice API (mi dice che debbo dare o la carta di credito o il numero di cellulare per essere utente identificato), se invece lo faccio direttamente da FB developers me lo crea perfettamente ma a quel punto non so come inserirlo nella sidebar del mio blog e nelle pagine del sito. Mi puoi spiegare come debbo fare? (avevo provato ad inserirlo in uno widget text ma non va bene).
    E un’altra domanda…. se voglio mettere il bottone “Like” e “share” piccolo in pagine XHTML come debbo fare?
    Thanks in advance from an old ma’am

    Rispondi
  7. Pingback: Personalizzare la Like Box / Fan Box di Facebook | Videeco

  8. Salvolatin

    Salve a tutti vi espongo il mio problema.dopo aver creato la mia pagina e settato tutto sulla mia widget mi esce la mia pagina fan con doppie faccine.potete consigliarmi su quello che potrei fare a risolvere il problema.grazie

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *