Ogni tanto, quando si smanetta col codice del proprio sito/blog, capita di imbattersi in problemi abbastanza diffusi, ma la cui soluzione si trova (se si trova) nascosta tra i meandri del web. Dato che Recensopoli è un blog che ruba ai poveri per dare ai ricchi, ho deciso di inaugurare questa estemporanea rubrichetta, dove parlerò di quelle robe utili, ma poco note, che ogni tanto scopro quando mi prende la scimmia di cambiare qualcosa nel codice del blog.

Partiamo con un grattacapo in cui sicuramente si sarà imbattuto chiunque abbia un sito dai colori scuri ed abbia provato a infilarci dentro il Like Box di Facebook (alias il robo nella colonna qui a destra con le facce dei pregiatissimi fan del blog - se non l'avete ancora fatto, cliccate sul "mi piace" SUBITO!).

Il problema è che il codice ufficiale, che si può ricavare da qui, dà come risultato un box con lo sfondo trasparente - a meno che non si scelga la vomitevole versione "dark". Per questo, se non si usa uno sfondo bianco o comunque molto chiaro, l'effetto sarà piuttosto orrido - segue immagine d'esempio presa durante la nottata di lacrime e sangue che ha portato al super restyling del blog.

Recensopoli ci tiene alla privacy, mica come Zuckerberg
Durante la suddetta nottata sono stato molte volte tentato dall'arrendermi ad un pallido template bianco latte, ma ormai m'ero affezionato allo sfondo lisergico che avevo scelto, per cui mi sono messo a cercare e, dopo un po' (un po' molto) mi sono imbattuto in un sito dove ho finalmente trovato la soluzione al problema.

In pratica il trucco consiste nel sostituire il tag <fb:like-box> con il tag <fb:fan> (di cui tra parentesi non si trova traccia cercando nell'help ufficiale di Facebook). L'unica cosa che cambia è che il <fb:fan> vuole tassativamente l'id numerico della pagina Facebook a cui farà riferimento: il normale URL non basta (a differenza che con il <fb:like-box>).

In pratica, un codice del genere:
<fb:like-box href="http://www.facebook.com/recensopoli" stream="false" width="292"></fb:like-box>
va cambiato così:
<fb:fan profile_id="123456789012345" stream="false" width="292"></fb:fan>
Per trovare l'id della vostra pagina, potete cliccare sul link Modifica informazioni nella pagina stessa:
Eccolo qua, preso da una pagina a caso
Una volta cliccatovicisi, troverete l'id nell'URL di destinazione, che sarà simile a questo:
https://www.facebook.com/pages/edit/?id=123456789012345&sk=basic
Anche il Like Box generato dal tag <fb:fan> è però trasparente: per fargli fare il bravo, il trucco sta nell'associargli un foglio di stile (da caricare da qualche parte sul web - io ad esempio l'ho messo nella cartella pubblica di Dropbox) dove specificare il colore dello sfondo (che di default è impostato su transparent). In termini pratici, possiamo creare un file pippo.css con il blocco note e scriverci dentro questo:
body.plugin{background: white}
dopodiché carichiamo pippo.css su un server qualunque (mettiamo caso su www.pippo.info) e lo diamo in pasto al <fb:fan> tramite la proprietà css (che non è supportata dal tag <fb:like>). Il codice diventerà dunque così:
<fb:fan profile_id="123456789012345" stream="false" width="292" css="http://www.pippo.info/pippo.css?1"></fb:fan>
Notate il "?1" alla fine dell'URL: in caso modificassimo il file .css, dovremo sostituirlo con un "?2" o con un qualsiasi altro numero, perché altrimenti Facebook penserà che sia lo stesso file e non starà a riscaricarselo.

A questo punto, se tutto è andato bene, avrete il vostro Like Box bello perfettino, e potrete metterlo dove vi pare, senza essere forzati a scegliere un template con lo sfondo bianco.
Scovate le differenze
In realtà il risultato non è perfettamente sovrapponibile a quello che si ottiene usando il tag <fb:like-box>: alcune proprietà supportate da quest'ultimo non funzionano con il tag <fb:fan> e viceversa, e anche il box stesso (che tecnicamente non è un Like Box, ma un Fan Box) è diverso in qualche minimo dettaglio grafico. In ogni caso, se volete approfondire, potete partire da qui e da qui.

BONUS COME HO FATTO A NON PENSARCI PRIMA EDITION:
In realtà c'è una maniera molto più semplice per avere quello stracaz di sfondo bianco: basta rinchiudere il codice generato per il Like Box in un banalissimo tag <div> impostato per avere lo sfondo bianco - ovvero, riprendendo l'esempio di prima:
<div style="background-color: white;"><fb:like-box href="http://www.facebook.com/recensopoli" stream="false" width="292"></fb:like-box></div>
In ogni caso con la versione <fb:fan> si ha un controllo più fine sui vari elementi del box, grazie al CSS (seee, la scusa...).