Come inserire il plugin Mi Piace di Facebook nei blog su Blogger.

Nel precedente articolo avevo parlato dei plugin di Facebook messi a disposizione degli sviluppatori. Segnatamente avevo parlato della possibilità di inserire un link per poter condividere un post con un "Mi Piace" che ha preso recentemente il posto di "Diventa fan". Il plugin funzionava però solo su Wordpress e non su Blogger.
La soluzione è stata trovata da DevFuel che ha utilizzato il linguaggio Javascript all'interno di un iFrame. Al codice originale ho fatto le seguenti modifiche

1. Ci sono due opzioni di inserimento dell'altezza dell'iFrame: 60px o 30px. Nel primo caso si vedranno anche le icone degli amici che hanno cliccato su Mi Piace mentre con 30px se ne vedrà solo il nome
2. Ho inserito due righe di codice per rendere visibile il plugin solo nei post e non nella homepage, nelle pagine di archivio e nelle pagine statiche
3. Ho inserito due tag <center> per centrare il plugin nel layout della pagina 

Vediamo in dettaglio cosa fare per inserire questo plugin nel nostro blog. Per prima cosa andate su Layout > Modifica HML, salvate il modello completo e espandete i modelli widget.
Dovrete incollare il seguente codice nella posizione che credete più opportuna. In seguito vi darò delle possibili opzioni

<!--FACEBOOK MI PIACE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><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'/></center>
</b:if>
<!-- FACEBOOK MI PIACE FINE - http://www.ideepercomputeredinternet.com -->

Se il plugin ci piace allineato a sinistra possiamo togliere i due tag center evidenziati di rosso, così come possiamo modificare le dimensioni dell'iFrame specie in altezza come illustrato al punto 1).
Personalmente credo che la posizione migliore di inserimento sia alla fine del post visto che per manifestare il gradimento su un articolo questo deve prima necessariamente essere letto. Bisogna quindi cercare la riga

<div class='post-footer'>

e incollarlo subito sopra. Bisogna considerare che quella è una zona del template molto "trafficata". Ci possono essere anche la pubblicità, i bottoni di voto sui social network o altre cose. Il codice relativo a Facebook va quindi inserito anche in relazione a queste eventuali presenze.
Può anche essere incollato subito sotto alla riga di codice

<data:post.body/>

Se state utilizzando la possibilità offerta dal read more per pubblicare gli articoli in forma sintetica, questo codice può essere inserito anche subito dopo, cioè dopo il codice

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

Ecco lo screenshot dell'inserimento relativo a questo blog

Se invece volete inserire l'iFrame all'inizio del post ne potete incollare il codice subito sopra alla riga  

<data:post.body/>

oppure subito sotto a

<div class='post-header-line-1'/>

Anche in questo caso bisogna fare i conti con altre presenze quali la pubblicità, bottoni, widget, ecc.
Se ancora nessun tuo amico di Facebook ha cliccato sul pulsante Mi Piace si visualizzerà la seguente scritta

con l'invito a essere il primo dei tuoi amici a dire che ti piace questo elemento. Se invece qualche tuo amico ci ha già cliccato sopra se ne vedrà solo il nome se hai messo 30 pixel di altezza

Se ne visualizzeranno anche le icone con relativo collegamento al profilo se si è optato per un'altezza di 60 pixel

L'elemento condiviso finirà nel Profilo di Facebook e potrà essere visto da tutti coloro che ne hanno l'accesso. Considerata l'enorme penetrazione di Facebook può diventare veramente un must per tutti i blog su qualsiasi piattaforma. Credo sia inutile sottolineare che questo iFrame apparirà in tutti gli articoli che avete già scritto dando la possibilità ai vostri lettori di condividere su Facebook anche quelli già datati. Sono orgoglioso di essere stato il primo a proporlo in Italia per gli utenti di Blogger.
Se volete visualizzare l'iFrame di Facebook ovunque, consultate il post "Come visualizzare il plugin di Facebook in tutte le pagine". Se avete problemi di visibilità dell'iFrame per il background del vostro sito, è possibile anche acquisire il codice del Mi Piace di Facebook per i blog scuri.