Pubblicato il 27/09/14e aggiornato il

Come mostrare il Like Box di Facebook con bordi e ombre.

Come installare su Blogger e su Wordpress il Like Box (o Fan Box) di Facebook con arrotondamenti, ombreggiature e colore di sfondo personalizzati.
In linea di massima per installare i plugin di Facebook nel nostro sito ci vuole una trafila non semplicissima che parte dalla creazione di una applicazione specifica fino all'inserimento nel template dei metatag e di uno script che fanno parte dello strumento denominato Open Graph
I plugin di Facebook però non sono tutti uguali. Mentre il modulo dei commenti è uno dei più complessi da inserire il cosiddetto Fan Box o Like Box di Facebook che mostra gli avatar delle persone che si sono iscritti cliccando sul Mi Piace è decisamente più semplice da installare visto che non ha bisogno di alcuna applicazione ma solo del javascript. In questo post  vediamo come si possa mostrare nel nostro blog di Blogger o di Wordpress con un aspetto un po' particolare con bordi arrotondati e ombreggiature.

Il codice da utilizzare è il seguente

<div align='center'>
<div style="-moz-box-shadow: 0px 15px 20px 0px #777; -webkit-box-shadow: 0px 15px 20px 0px #888; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCC; box-shadow: 0px 15px 20px 0px #666; height: 280px; margin: 5px; padding: 10px 0 10px 10px; width: 280px;"><div style="height: 280px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/ideepercomputeredinternet&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
</div>

dove si possono modificare i parametri ma soprattutto va sostituito l'URL della pagina Facebook di questo blog colorato di viola con l'URL della vostra pagina. Le dimensioni del widget hanno più occorrenze nel codice quindi se si pensa di cambiarle va fatto non con una soltanto. Si possono adattare anche il raggio di curvatura degli arrotondamenti e i codici dei colori di sfondo e ombreggiature.

Per installare il Like Box su Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice in Sezione del sito. Si salva e si posiziona. Il widget avrà questo aspetto

like-box-facebook

Con Wordpress invece si va su Aspetto > Widget e si trascina  Testo in una sidebar o nel footer

wordpress-like-box

Si incolla il codice precedente e si va su Salva quindi su Chiudi.

likebox-wordpress

Il widget avrà nei siti Wordpress lo stesso aspetto che ha su Blogger.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.