Come personalizzare il like box di Facebook

Pochi lo sanno, ma è possibile personalizzare il like box di Facebook. Oltre alle impostazioni classiche che è impossibile assegnare attraverso la pagina del social plugin vi propongo di fare qualcosa in più. Oggi vediamo come sia possibile assegnare un’immagine di sfondo al box. Di seguito l’esempio.

Come realizzare l’immagine

Dopo aver scelto la dimensione dell’iframe visualizziamo la pagina con l’iframe realizzato in un browser e premiamo Stamp sulla tastiera. Questo tasto permette di salvare tutto quello che appare sul vostro schermo.

Creiamo ora un file con un programma di grafica con le dimensioni che abbiamo assegnato al like box ed incolliamo l’immagine che abbiamo stampato e posizioniamola in modo che il box coincida perfettamente con le dimensioni del vostro file (senza ridimensionarlo). In tal modo potremo vedere dove applicare le nostre immagini facendole interagire con i contenuti del like box (ad es. abbiamo fatto sì che il logo di robadagrafici uscisse dalla linea, quindi come se fosse posizionato dietro) o facendo in modo che non copra i contenuti di Facebook. Esportiamo la nostra immagine, ovviamente dopo aver cancellato l’immagine stampata dell’iframe.

Ora andiamo a modificare il codice del like box aggiungendo la proprietà background-image. Vediamo dove, analizzando il codice.

<iframe ... style="border:none; overflow:hidden; width:575px; height:338px;
background-image:url(IL PERCORSO DELLA TUA IMMAGINE)" allowTransparency="true">
</iframe>

Niente di più semplice.

Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.