Pubblicato il 22/03/11e aggiornato il

Come inserire e personalizzare il Plugin Mi Piace (Like Button) di Facebook.

Come personalizzare il mi piace di Facebook a seconda dei parametri immessi
L'inserimento del pulsante Mi Piace di Facebook nelle pagine del blog rappresenta una delle novità più importanti del blogging di questi ultimi mesi. Ha portato dei benefici in termini di arrivi da Facebook ma è anche presente il rischio che il "social network" cannibalizzi sempre di più il web a tutto svantaggio dei siti tradizionali. L'installazione del pulsante di Facebook l'ho già trattata in diversi articoli. Cercherò di riassumere con questo post tutte le possibili personalizzazioni che si possono effettuare nell'inserimento di questo bottone.

In base al layout e ai gusti personali c'è chi il bottone lo vuole chiaro e chi scuro, chi vuole mostrare anche gli avatar e chi no. Chi lo vuole in alto, chi in basso, chi a destra chi a sinistra. Si parte comunque sempre dal codice di base del Mi Piace di Facebook che non ho potuto inserire in Windows Live Writer perché mi fa visualizzare direttamente l'iFRame. L'ho comunque postato su Google Documenti e ne riporto lo screenshot

bottone mi piace di facebook

Questo codice, quando sarà installato, mostrerà il bottone classico con gli avatar in tutti i post ma non nelle pagine statiche e in homepage. Ecco una tabella di come viene visualizzato il plugin a seconda dei parametri inseriti

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 90px
height 20px
Layout box_count
width 62px
height 65px
colorscheme dark
Indipendenti da questo
parametro
action recommend
Indipendenti da questo
parametro

Quindi per esempio se sostituiamo layout=standard con layout=button_count avremo un pulsante con l'aspetto della seconda riga. A parte il primo screenshot, che ho preso da questo blog, gli altri derivano dalla pagina del Like Button Plugin e sono in inglese. Ricordo però che il Like sarà visualizzato in italiano come Mi Piace e il Recommend come Consiglia.

Per l'installazione si va su Design > Modifica HTML > Espandi i modelli widget. Per inserire il bottone alla fine del post si cerca la riga


<div class='post-footer'>


e si incolla il codice subito sopra. Se si vuole mettere il Mi Piace all'inizio dell'articolo, si cerca la riga


<data:post.body/>


e si incolla il codice subito sopra. Se si vuole inserire sulla destra si sostituisce float:left; con


float:right;


Se si vuole mostrare il bottone anche nella homepage e nelle pagine di archivio occorre eliminare la seconda e la penultima riga che sono i tag condizionali colorati di rosso. Nel caso in cui si preferisse visualizzare il pulsante Mi Piace di Facebook anche nelle pagine statiche, occorre eliminare la terza e la terzultima riga che sono colorate di blu. Concludo ricordando che colorscheme=dark serve per i blog con sfondo scuro.





35 commenti :

  1. Ennesimo grazie per avermi aiutato ad aggiungere il tasto mi piace anche nella home page perchè prima si visualizzava solo nei singoli post dopo aperti ;)

    RispondiElimina
  2. Che tu sappia è possibile visualizzare il numero esatti di voti anche nei button/box-count?

    (con il mio monitor ris 1024*768 il tuo blog viene spezzattato nascondendo degli elementi)

    RispondiElimina
  3. @AUTOdiMERDA Conoscevo già questo problema di visione del blog con basse risoluzioni, grazie comunque. I voti dovrebbero visualizzarsi esattamente in tutte le versioni del bottone però siamo sempre nelle mani di FB. Non è che vada sempre tutto liscio; ogni tanto ci sono delle magagne :)

    RispondiElimina
  4. io l'ho messo anche in home page
    ma all'inizio cliccando si vede "piace a 1 persona" e pensi che la cosa sia finita lì .. poi se ripassi da quelle parti trovi scritto "conferma" e solo allora ti si apre una finestra con la quale termini
    accettando e lo trovi sul tuo profilo FB
    deve lavorare così?? perchè allora temo che molti "piacioni" non si accorgeranno e tireranno dritti non appena letto il post
    cosa ne pensi??

    RispondiElimina
  5. @Tex Willer Questi passaggi vengono gestiti dai server di FB. Comunque con questo codice, se inserisci anche gli avatar, si apre un campo in cui scrivere un commento e, se lo fai, in quel caso non ti chiede conferma. Forse hanno inserito questa lungaggine perché adesso con un click, il post è visibile nel Profilo come link condiviso.

    RispondiElimina
  6. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  7. Ciao!
    Seguo sempre il tuo blog, che è stato fondamentale per realizzare praticamente tutti i plug-in attivi al momento sul mio blog: http://vivendolapuglia.blogspot.com/
    Ti vorrei chiedere un piccolo, ma fondamentale, aiutino...
    Da ieri il mio pulsante "Mi Piace", che ho inserito usando il tuo efficacissimo codice, chiede a tutti gli utenti che vi cliccano sopra di dare "conferma". (Nel caso ti chiedo di fare una prova sul mio blog)
    Hai qualche idea del perché faccia così e soprattutto di come poter risolvere il problema???

    Grazie Mille, Federica

    RispondiElimina
  8. @FedericadB Sì, lo fa a tutti. E' una cosa che dipende dai server di FB. In fondo sono loro che hanno in mano le redini della procedura :P
    Forse lo fanno per evitare troppi link condivisi che potrebbero intasare i loro server.

    RispondiElimina
  9. @Ernesto T.

    Grazie per il celere interessamento, credo di aver trovato una possibile motivazione su questo link:

    http://thebulldogestate.blogspot.com/2011/03/facebooks-new-confirm-feature-for.html

    In pratica fb considera il mio blog come un sito che ha un sistema di "LIKE JACKING" forse perché ho ricevuto moltissimi like al mio ultimo post... Il fatto è che non ho alcun finto pulsant Like sul blog... sono tutti Mi Piace reali!!!

    Cosa mi consigli di fare per far capire a Facebook che ha sbagliato?

    RispondiElimina
  10. @FedericadB Grazie del link interessante che offre una spiegazione plausibile. Facebook è basato su un algoritmo, non credo che si possa fargli cambiare idea. Speriamo che i parametri che hanno inserito in chiave antispam siano in seguito alleggeriti.

    RispondiElimina
  11. @Ernesto T.
    Ho postato questo pomeriggio una richiesta un bugzilla... speriamo che gli sviluppatori di facebook possano fare qualcosa!!

    Cambiando argomento, hai per caso un post relativo all'inserimento del meta tag admin su piattaforma blogger? Ne ho letto su fb developers (in inglese però...) e su Big think ma non ci ho capito molto: si parla di poter visualizzare pagine fantasma e relative statistiche d'accesso... solo tu potresti tradurre tutto in pochi semplici passaggi per piattaforma blogger!!!

    Grazie ancora per la grande professionalità profusa in questo blog, continua così!

    RispondiElimina
  12. @FedericadB Il fatto è che le pagine fantasma, idea di Big Think, sono peculiari del linguaggio PHP di Wordpress. Non mi pare possibile applicare un metodo simile a Blogger. Noi non possiamo accedere al File Manager e anche se potessimo c'è sempre lo scoglio che Blogger ha il template in XML :)

    RispondiElimina
  13. @Ernesto T. Capisco... dunque è un problema di tipologia di linguaggio usato per la programmazione... non c'è molto da fare allora!

    Per il mio problema con il pulsante "Mi piace", ho riflettuto sul fatto che ieri ho acquistato tramite blogger il dominio www.vivendolapuglia.com proprio tramite blogger e per un breve periodo (parlo di 30 40 min) ho usato il nuovo dominio... tornando poi a .blogspot.com perchè non mi funzionava più nessun plugin... potrebbe essere stato questo a far credere a facebook che il mio fosse un sito Like Jacking in quanto quegli utenti che cliccavano sul mi piace erano rindirizzati su di un dominio ".com" mentre facebook aveva memorizzato il dominio ".blogspot.com" (dunque come se fosse un caso di like jacking, cioè clicco Mi Piace credendo di condividere una cosa X ma in realtà condivido un'altra cosa Y)

    Potrei risolvere il problema passando al dominio .com e creando una nuova applicazione associata?

    RispondiElimina
  14. @FedericadB Ovviamente non conosco l'algoritmo antispam di Facebook ma il redirect del dominio può avere influito

    RispondiElimina
  15. Grandissssimo!!!! Ho trovato il post che mi serviva!!!!!!!!!!!

    RispondiElimina
  16. Ciao Ernesto,
    ultimamente sto avendo problemi con il tasto "mi piace"; se utilizzo Google Chrome, alla pressione del tasto, non succede nulla.

    Se visualizzo lo stesso articolo con un browser diverso da Chrome, il tasto torna a funzionare.

    Potresti aiutarmi ?

    Grazie.

    RispondiElimina
    Risposte
    1. @Nicola
      Mi sopravvaluti, non posso conoscere la ragione. Ti posso consigliare di fare una scannerizzazione antivirus oppure di aggiornare la versione di Chrome o ancora di modificare il codice del mi piace con uno più recente
      http://www.ideepercomputeredinternet.com/2011/12/come-installare-i-plugin-di-facebook.html

      Elimina
  17. Ciao, molto utile questo post, ma non riesco a scaricare il codice da google documenti. Come lo cerco?

    RispondiElimina
    Risposte
    1. @# Il codice non si scarica. Clicca su "postato" poi seleziona e copia il codice nella pagina che si apre

      Elimina
  18. Ciao ho un blog dove mostro tante immagini per ogni singolo post, vorrei mettere il "mi piace" sotto ogniuna di esse, come posso fare? ho cercato tanto ma non ho trovato niente...grazie in anticipo!

    RispondiElimina
    Risposte
    1. In questo momento stanno cambiando moltissimo su Facebook ed è già difficile mettere un bottone per ogni post, almeno nella piattaforma Blogger. Se in futuro venissi a conoscenza di una possibilità come quella che hai cercato ci farei di sicuro un post
      @#

      Elimina
  19. Sul mio blog è ricomparso da qualche mese il bottone Mi piace. Però di dimensioni diverse rispetto a quelle che avevo impostato, e il contatore dei numeri adesso non è ideale per leggere le cifre.
    Avevo inserito il codice nel mio html ma se vado su Modifica html non lo trovo più.
    Che fare?

    RispondiElimina
  20. @GenioMaligno
    Per cercare il codice leggi questo post
    http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
    Il pulsante Facebook è cambiato a tutti. Per reinstallarlo prova con questo
    http://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger.html
    o quest'altro se lo vuoi nel modello
    http://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger-template.html
    @#

    RispondiElimina
  21. Ciao Ernesto. Avevo inserito il pulsante like per il mio blog che contava, fino a pochi giorni fa, 902 like. Da qualche giorno però si è azzerato tutto e se provo a reinserirlo mi risultano solo due like. Quale può essere il problema? Grazie.

    RispondiElimina
    Risposte
    1. Il tuo blog è questo?
      http://riccamente.blogspot.com/
      Vedo i bottoni Mi Piace senza contatore e mostrati anche in homepage senza tag condizionali. Poi sono su uno sfondo dello stesso colore e non si legge nulla. A parte questo Facebook fa quello che vuole e forse ha azzerato per qualche ragione i tuoi Like. Vedo che il tuo blog finisce con blogspot.com invece di blogspot.it come dovrebbe essere se aperto da un browser settato con la lingua italiana. Forse hai inserito uno script per disattivare la localizzazione. In questo modo non vengon o conteggiati i Mi Piace che hai ottenuto come .it.
      Questa prendila solo come una ipotesi. Anche gli URL dei commenti a un post hanno un URL diverso e quindi non conteggiano i Mi Piace.
      @#

      Elimina
    2. Ciao Ernesto. Si, avevo inserito qualcosa per il .com ... avevo letto tempo fa che era meglio così ma non ricordo perché ed ora non saprei nemmeno come fare per toglierlo. Non sono molto brava in queste cose. Il contatore che avevo messo per il blog aveva un codice con riccamente.it .Funzionava bene fino a pochi giorni fa, ora riparte da due.
      Grazie comunque.

      Elimina
    3. Eventualmente come dovrei fare per farlo finire come blogspot.it? Grazie

      Elimina
    4. Poco sopra alla riga </head> hai questo codice

      <script type='text/javascript'>
      if ((window.location.href.toString().indexOf('.it/'))>'1')
      {
      window.location.href = window.location.href.toString().replace('.blogspot.it/','.blogspot.com/ncr/');
      }
      </script>

      che forse hai copiato in questo mio post

      http://www.ideepercomputeredinternet.com/2012/03/domini-gratuiti-di-blogger-come-fare-il.html

      Dopo aver salvato il modello elimina tutto il codice che va da <script... a </script> quindi salva il template, apri il tuo sito e dovresti riavere il .it e tutti i Mi Piace.

      @#

      Elimina
    5. Grazie Ernesto! Ma quando cambio l'indirizzo da .com a .it.,l'url dei post si aggiorna automaticamente? Devo reinviare la site map? Grazie ancora.

      Elimina
    6. L'URL dei post rimane .com. Solo che gli italiani lo vedono .it, i tedschi .de, i francesi .fr, gli spagnoli .es e mi fermo qui. Google sa già che il tuo blog è blogspot.com, non devi fare nulla per la sitemap
      @#

      Elimina
    7. Scusa se ti disturbo ancora Ernesto, ma ho tolto il codice, ho salvato il template e rimane comunque su .com

      Elimina
    8. No. È tornato sul .it
      http://i.imgur.com/f4uj26w.png
      http://i.imgur.com/KtKw1lA.png
      Prova a aprire home o post con una scheda in Incognito. Forse ti rimarranno i cookie per qualche giorno
      @#
      @#

      Elimina
    9. Si grazie Ernesto, è solo dal mio pc che continua ad aprirlo su .com. Ho provato con un altro e lo apre su .it solo che ora, oltre al contatore, risultano azzerati anche tutti i like dei post. Mi sa che lo rimetto come prima inserendo il codice che mi hai postato ieri. Grazie di tutto.

      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.