Il Mi Piace di Facebook inserito in un box insieme al collegamento per la pagina fan.

Questa personalizzazione del plugin Mi Piace di Facebook è veramente carina e sono sicuro incontrerà il favore di molti lettori. Si tratta in sostanza di inserire l'iFrame di Facebook all'interno di un box con gli stessi colori del social network e insieme a un collegamento e un invito ai navigatori per sottoscrivere la nostra pagina fan. E' quindi superfluo aggiungere che per poterlo installare occorre avere una pagina ufficiale del blog su Facebook 

Si può personalizzare riguardo alle dimensioni in larghezza e a quelle in altezza con la possibile scelta tra mostrare gli avatar o non mostrargli. Ricordo comunque che si possono vedere solo le immagini di chi ti è amico su Facebook e ha cliccato su Mi Piace. Nel caso in cui si scelga di mostrare anche le foto, per i navigatori, esiste anche la possibilità di condividere il post inserendo anche un commento personale.

che si inserisce nel form che si apre dopo aver cliccato su Mi Piace. Ricordo che una semplice condivisione fa comparire il link solo nella Bacheca di chi ci clicca nella sezione "Attività Recente" mentre se si inserisce un commento sarà visibile nella Home di tutti gli amici come link condiviso.

Cliccando su Diventa Fan si aprirà la pagina della pagina ufficiale del blog su Facebook. Per l'installazione procedete nel modo seguente.

Dopo aver salvato una copia del modello completo, andate su Design > Modifica HTML e cercate questa riga

]]></b:skin>

Immediatamente sopra incollate il codice

/* FACEBOOK BOX */
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:600px;
}
.fb_like_top {padding:0;margin:0 0 5px;width:349px;height:24px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_Hawil8r1O1fsozTF97DdfG8TTBoiz32u4Pg4yhs1KN5uDRMnp2l2aStI2NkiUx3HFa9CL7IIJZxCQpmbxCzCO2hmV0UY6BpIsXrOupoPl1qI6LXeLa-2t0t6MMu3K5jTAGykd_LnYY/") no-repeat scroll left top transparent;}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOG2sA2uCg1jmoQ13fzF0kVkaZz1KUWI6kS-zNYKtb3JdIAuZTef0dcf1VjPE8Mi8Z8Z-lrsk_mQMbKY97vB6joXmmrGqMGsefgxWUd9-cAMnI6sP4cItjiA17aBFXYefVZNnqmKpR7Ts/") no-repeat scroll left top transparent;
display:block;
margin-left:485px;
text-indent:-5000px;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:575px;
height:72px;
}

Questo è per un box di una larghezza di 600px e mostra anche gli avatar. Se si preferisce un'altra larghezza dobbiamo cambiare i dati scritti in rosso. Per esempio per una

• Larghezza di 530 pixel diventeranno width:530px;  margin-left:415px; e width:505px;
• Larghezza di 500 pixel diventeranno width:500px; margin-left:385px; e width:475px;
• Nel caso di una larghezza totalmente personalizzata fate una interpolazione tra questi valori

Se non si vogliono mostrare gli avatar occorre sostituire height:72px; con height:42px;

Adesso andate alla riga

<data:post.body/>

e subito sotto incollate il seguente codice

<!--Facebook Like Box Inizio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'>
<a href='http://www.facebook.com/ideepercomputeredinternet' rel='nofollow' target='_new' title='Diventa Fan'>Diventa un Fan</a>
</div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>
</div>
</div>
</b:if>
<!--Facebook Like Box Fine-->

Dove occorre sostituire l'indirizzo della mia pagina fan, evidenziato di rosso, con quello della vostra. Se non si vogliono mostrare gli avatar bisogna inserire false al posto di true in show-faces. In questo caso va diminuita l'altezza dell'iFrame da 60px a 30px. in entrambe le occorrenze.

Se si hanno dei blog con sfondo scuro si sostituisce dark a light in colorscheme. Non resta che salvare il modello.

Considerazioni finali

1. Se avete inserito anche il bottone ufficiale di Twitter, incollate il codice del box di Facebook subito sotto per mostrarli uno di fianco all'altro. Se avete altre cose in quella zona del template, come per esempio la pubblicità o del testo inserito in automatico, questo box di Facebook va incollato considerando le altre presenze nella posizione in cui vogliamo che appaia.
2. Essendo piuttosto pesante, questo box appare solo nei post. E' possibile visualizzarlo ovunque eliminando le due righe evidenziate di verde nell'ultimo codice.
3. Si possono personalizzare anche molte altre dimensioni, i margini e il padding dei vari elementi.

Questo articolo è una rielaborazione informatica, linguistica e grafica di un lavoro di Blogger Plugins.