Come inserire in modo semplice il pulsante Mi Piace di Facebook.

Come installare il pulsante Mi Piace di Facebook su Blogger senza dover creare una applicazione o usare Open Graph e Metadati.

Da qualche mese Facebook ha modificato le API che riguardano i suoi celebri social plugin con il risultato che i bottoni del Mi Piace che erano stati installati e che non sono stati toccati continuano a funzionare ma che non era più possibile installare un qualsiasi plugin senza aver prima creato una applicazione per ciascun sito in cui inserirlo.

Da qualche ora Facebook ha rilasciato una nuova funzionalità che ci permette di incorporare un post pubblico in una qualsiasi pagina web. Ho pensato che si poteva utilizzare lo script relativo che non prevede applicazioni per installare anche qualcuno degli altri plugin evitando complicazioni con Open Graph e Metatag non troppo amati dai blogger.

Gli utenti di Blogger che vogliono installare il pulsante del Mi Piace con contatore dovranno semplicemente andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il codice

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><div class='fb-like' data-layout='box_count' action='like' colorscheme='light' data-send='false' data-show-faces='false'  data-height='62' data-width='62'  expr:href='data:post.canonicalUrl'/></div>

Il bottone avrà questo aspetto

che potrà comunque essere personalizzato come vedremo. Quando si aprirà un articolo il contatore mostrerà il numero dei Mi Piace che sono stati ricevuti e se qualcuno ci cliccherà sopra potrà condividere il post con una miniatura di una immagine, se fosse presente, e inserendo anche un commento.

I parametri in rosso possono essere modificati in questo modo

Aspetto	Query	Valore	Larghezza e Altezza
	data-layout	standard	width 300px height 60px con gli avatar width 300px height 35px senza le facce
	data-layout	button_count	width 90px height 20px
	data-layout	box_count	width 62px height 65px
	colorscheme	dark	Indipendenti da questo parametro
	action	recommend	Indipendenti da questo parametro

Con data-show-faces='true' verranno mostrati anche gli avatar di chi ha cliccato Mi Piace e con data-send='true' verrà invece mostrato anche il bottone Invia in questo modo

Questo script carica i pulsanti in modo asincrono vale a dire si dovrà aspettare l'apertura di tutti gli altri elementi del blog per poterlo visualizzare. Questo è importante anche per non peggiorare la velocità di caricamento del sito che è un fattore SEO di una certa importanza.