Pubblicato il 19/08/10 - aggiornato il  | 4 commenti :

Come inserire il bottone aggiornato del Mi Piace di Facebook in un blog su Blogger.

Il team di Facebook ha apportato alcune modifiche al bottone Mi Piace che ho presentato alla fine di Aprile. Le migliorie non sono molte ma permettono una maggiore personalizzazione e riprendono alcune funzionalità inserite con il bottone ufficiale di Twitter. Il codice come al solito va inserito andando su Design > Modifica HTML > espandi i modelli widget, cercando la riga <data:post.body/> e incollandolo al di sotto. Per tutte le tematiche relative alla posizione vi rimando all'articolo precedente. Ecco il codice da incollare

<!--FACEBOOK MI PIACE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px;'/>
</b:if>
<!--FACEBOOK MI PIACE FINE-->

L'aspetto del bottone dovrebbe essere simile a questo:

bottone-facebook

Alcune precisazioni e possibili personalizzazioni:

  1. Le due righe di commento ( <!--FACEBOOK MI PIACE INIZIO-->) con cui inizia e finisce il  codice servono per individuare più facilmente il bottone in caso di modifiche successive ed è sempre meglio inserirle
  2. Le due righe evidenziate di rosso servono per mostrare il pulsante solo nei post, se si vuole vederlo ovunque è sufficiente toglierle. Ricordo che le icone possono essere viste solo dagli amici.
  3. Con questo codice si vedono anche gli avatar di chi ha cliccato su Mi Piace. Se non si vogliono mostrare si sostituisce true con false in show_faces
  4. La famiglia di caratteri può essere cambiata inserendo dopo font il nome di un'altra famiglia al posto di arial tra: lucida+grande, segoe+ui, tahoma, tahoma o verdana.
  5. Le dimensioni dell'iFrame possono essere variate in funzione delle esigenze. Soprattutto l'altezza (height) deve essere di 60 pixel se si vogliono mostrare anche le icone mentre si può ridurre a 30 pixel nel caso in cui non si volessero visualizzare
  6. Il colore del pulsante e del testo può essere personalizzato a seconda dello sfondo del nostro blog. In colorscheme si può sostituire dark a light se si ha un blog con sfondo scuro. Un'altra opzione è evil che non ho testato
  7. Al posto di action=like si può sostituire action=recommend per visualizzare Consiglia al posto di Mi Piace come testo del bottone.
  8. Infine si può cambiare completamente aspetto al bottone facendolo diventare simile a quello di Twitter sostituendo layout=standard con layout=button_count. Ecco come si presenta il bottone in questo caso

bottone-facebook-contatore

Una particolarità di questo nuovo pulsante è la comparsa del collegamento "Non mi piace più" a destra del testo che comunque è stato configurato anche per il vecchio pulsante

pulsante-mi-piace-facebook

Rispetto alla precedente versione manca la possibilità di inserire un commento quando si clicca su Mi Piace ma sarà certamente una carenza momentanea

mi-piace-facebook-vecchia-versione

è per questo che per adesso ho lasciato la vecchia versione.

Fonte | Blogger Plugins -



4 commenti :

  1. Ciao Parsifal, come va?
    Hai visto la novità del pulsante MI PIACE? Ho appena visitato developer.facebook e hanno aggiunto il pulsante INVIA (o SEND) accanto al mipiace.

    L'unico problema che riscontro è l'impossibilità di collegare il pulsante all'articolo unico.
    E' possibile solo inserire l'url del blog ma non del singolo articolo.

    Inserendo "data:post.url" non va bene!

    Non so se son stata chiarissima nella mia esposizione. Perdonami.

    E' una novità carina..

    RispondiElimina
  2. @Sara
    Mi sto accorgendo che tu non mi segui assiduamente ahahahah
    Ho già pubblicato un articolo in merito
    http://www.ideepercomputeredinternet.com/2011/04/installare-il-pulsante-invia-o-send-in.html
    Volendo si possono inserire tutti i plugin di Facebook con questo metodo
    http://www.ideepercomputeredinternet.com/2011/06/come-installare-tutti-i-plugin-di.html
    In questo secondo caso basta inserire send="true" per vedere anche il pulsante Invia come è spiegato nel post.
    Ciao.
    P.S. Fa sempre piacere risentirti :)

    RispondiElimina
  3. @Ernesto: vari problemini/oni personali e aumento di torte non previste mi tengono lontana dal tuo blog e dalla rete in generale.

    Ho cercato le parole sbagliate nel tuo motore di ricerca e ho commentato pensando ti fosse sfuggita la novità.

    Che donna di poca fede (nel suo guru)!
    Tzè -_-'


    ;-) un abbraccio.

    RispondiElimina
  4. @Sara
    Contraccambio l'abbraccio. Era un "rimprovero" molto scherzoso naturalmente ^^

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy