I social plugins di Facebook sono cosa buona e giusta. Ma come rimuovere quel dannato bordo blu che rovina l’impaginazione del nostro sito? Niente paura, basta usare i Css.

La soluzione è di Adam Breckler, io mi sono limitato a verificarne il funzionamento. Sebbene il codice sia relativo al Like Box, ho provato con altri social plugins e il funzionamento è corretto. In pratica si tratta di “coprire” il bordino blu imposto da Facebook con un bordino bianco, o di qualsiasi colore vi serva.

Questo è il codice per embeddare un Like Box nella nostra pagina. Cambiate l’ id inserendo l’ id della vostra applicazione e le dimensioni che vi interessano.

Nota: in questo post sono dovuto andare a capo per motivi di visibilità, ma tutto il codice seguente inseritelo senza a capo, come fosse un’ unica riga.

<div id=”likebox-frame”>
<iframe src=
“http://www.facebook.com/plugins/likebox.phpid=IDAPP&amp;
width=900&amp;connections=16&amp;stream=false&amp;
header=false&amp;height=190″ scrolling=”no” frameborder=”0″ style=”z-index:9;
border:none !important; overflow:hidden; width:900px; height:190px;”
allowtransparency=”false”></iframe>
 </div>

Come vedete, dovete circondare l’ iframe di Facebook con un nuovo div chiamato in questo esempio likebox-frame.

Ora assegnate le seguenti proprietà di stile a likebox-frame:

#likebox-frame{
border:2px solid #FFFFFF;
width:894px;
z-index:10;
height: 156px;
overflow: hidden;
position:relative;
top:-1px;
left:-2px;
}
#likebox-frame iframe{
  left:-5px;
  overflow:hidden;
  position:relative;
  top:-1px;
}

Nota: la larghezza impostata nel css deve essere di 6 pixel inferiore a quella dell’iframe (nell’esempio vedete che la larghezza dell’ iframe è di 900px e quella del div è di 894px.