Come inserire il Mi Piace di Facebook nei post di Blogger.

Inserimento e personalizzazione del bottone Mi Piace di Facebook con contatori o senza, con avatar o senza, con l'opzione Invia e l'opzione Consiglia, per i blog a sfondo chiaro e per i blog a sfondo scuro.

Ho già dedicato diversi post a come inserire i plugin di Facebook in un blog su Blogger. Se si ha intenzione di visualizzare nel nostro layout oltre al Mi Piace anche il Like box della Pagina Fan e magari anche il modulo dei commenti allora conviene creare una applicazione per poi utilizzare i codici e i concetti dell'Open Graph di Facebook.

Molti blogger invece desiderano semplicemente inserire il Mi Piace di Facebook e al massimo desiderano modificarne il colore se hanno blog con sfondo scuro. E' proprio a questi lettori che si rivolge questo post. I codici che propongo hanno due tag condizionali che inibiscono la visualizzazione del Mi Piace nelle pagine statiche. Si tratta della prima e dell'ultima riga del codice e volendo possono essere tolte o sostituite da altri tag per imporre condizioni diverse.

Prendo in esame tre possibili opzioni per l'inserimento dei pulsanti:

1. Sotto il titolo del post prima dell'inizio del contenuto dell'articolo
2. Alla fine del post prima dell'intervallo del Read More
3. Alla fine del post dopo l'intervallo del Read More.

In tutti e tre i casi bisogna andare su Modello > Backup/Ripristino e salvare una copia del template. Tornare su Modello > Modifica HTML > Procedi e mettere la flag a Espandi i modelli widget. Il codice del Mi Piace va inserito rispettivamente nelle tre ipotesi

1. Subito sopra la riga <data:post.body/>
2. Subito sotto la riga <data:post.body/>
3. Subito sopra la riga <div class='post-footer'>

Va da sé che in queste posizioni del modello ci possono essere anche altri oggetti e quindi in questo caso è necessario ordinarli secondo le nostre esigenze.

CODICE DEL BOTTONE MI PIACE CON CONTATORE VERTICALE

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=65&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width65px; height:62px;'/>
</b:if>

CODICE DEL BOTTONE MI PIACE CON CONTATORE ORIZZONTALE

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=92&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=22&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:92px; height:22px;'/>
</b:if>

CODICE DEL BOTTONE MI PIACE SENZA CONTATORE

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=430&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:430px; height:35px;'/>
</b:if>

ALTRE PERSONALIZZAZIONI DEL CODICE DI FACEBOOK

Come detto si può modificare il colore dei bottoni per adattarli ai blog scuri modificando il parametro colorscheme=light in colorscheme=dark, si possono visualizzare gli avatar modificando la stringa show_faces=false in show_faces=true e molte cose ancora non ultima quella di configurare il pulsante Mi Piace come Consiglia o come Invia. Riporto una tabella con le modifiche più importanti:

Aspetto	Query	Valore	Larghezza e Altezza
	Layout	standard	width 530px height 60px con gli avatar width 530px height 35px senza le facce
	Layout	button_count	width 92px height 22px
	Layout	box_count	width 65px height 62px
	colorscheme	dark	Indipendenti da questo parametro
	action	recommend	Indipendenti da questo parametro
	send	true	Indipendenti da questo parametro

Non resta altro che modificare i codici precedenti secondo le nostre esigenze. Anche le dimensioni sono puramente indicative e possono essere modificate.