Pubblicato il 22/08/13e aggiornato il

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='falsedata-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

pulsante-invia-facebook

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.




6 commenti :

  1. Bello .. è possibile "incollare" in automatico sotto ogni singolo post questo codice HTML?

    Grazie

    RispondiElimina
    Risposte
    1. Al momento non più anche se chi i bottoni ce li ha messi da mesi nel modello continuano a funzionare. Se troverò una soluzione ci farò un post
      @#

      Elimina
  2. Ciao Ernesto, scrivo qui, perché non ho trovato dove altro collocare la domanda. Qui parli di Mi Piace. Ma nel caso contrario? Mi spiego. Recentemente i miei post su FB - che rimandano naturalmente al blog - sono stati segnalati come spam da un utente che si è divertita a segnalare i post di altri utenti (dunque non solo i miei) come spam. Questo perché la signora si è risentita di essere stata più volte ripresa dall'amministratore del gruppo di cucito che seguo, perché il suo comportamento non era consono al regolamento del gruppo stesso (in pratica questa faceva pubblicità in modo pesante alle merci della sua merceria, disturbando gli altri utenti e tentando di vendere, cosa che non è naturalmente permessa). In sostanza un puro dispetto. Alla fine questa si è allontanata dal gruppo, ma gli effetti sono rimasti. Ogni volta che qualcuno tenta di accedere ad un mio post, passando da Fb, viene allertato con questo avviso "Facebook thinks this site might be unsafe. If you are not familiar with it, please provide feedback by marking it as spam (you will be brought back to Facebook).". Sotto ci sono i due pulsanti per decidere se è spam o se non lo è. La cosa è seccante, perché - al di là del comportamento di questa pazza che si commenta da solo - sono in molti che chiedono lumi e ogni volta devo star lì a raccontare tutta la storiella, con la conseguente perdita di tempo. Ma poi, giustamente, non tutti si fidano ad aprire la pagina, anche se ovviamente non c'è alcun pericolo. Mi hanno detto che dopo un po' la cosa rientra. Ma è vero? Se sì, dopo quanto? E, in caso contrario, come si può intervenire? Grazie.

    RispondiElimina
    Risposte
    1. È la prima volta che sento parlare di un problema simile. Non ti so dire quanto possa durare. Puoi provare a vedere se sia possibile contattare Facebook per risolvere
      https://www.facebook.com/help/
      @#

      Elimina
  3. ciao! purtroppo il like va a finire in fondo.. alla pagina.. non è possibile metterlo subito sotto agli articoli? come fare? grazie

    http://img24.imageshack.us/img24/7908/269i.png

    RispondiElimina
    Risposte
    1. Per metterlo sotto agli articoli il codice va incollato nel modello
      http://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger-template.html
      Alcuni script e metatag sono gli stessi di altri plugin di Facebook e basta metterli una sola volta
      @#

      Elimina

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.