Blog

Rimuovere i bordi dal Like Box

On 5 ago, 2010 By With 3 Comments - 2.976 Letture

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.

Condividi questo post!

    , , , , , , ,

    Sono presenti 3 Commenti

    1. ale scrive:
      4 settembre 2010 at 17:42 -

      Soluzione interessante.
      Manca il “#” davanti likebox-frame.

      L’ho modificato in questo modo, in caso si avesse uno sfondo non uniforme.
      Sembra funzionare.

      #likebox-frame{
      overflow:hidden;
      width:332px; /* solo 2 px in meno della larghezza del iframe */
      }

      #likebox-frame iframe{
      left:-1px;
      overflow:hidden;
      position:relative;
      top:-1px;
      }

      Ciao e grazie della dritta!

    3. Leonardo scrive:
      31 marzo 2011 at 12:48 -

      Ho amato questo post!
      Però nel #likebox-frame iframe mi sono trovato meglio con il top:-3px perchè così copre anche la riga blu in alto

    Leave A Reply