Pubblicato il 20/08/11e aggiornato il

Come inserire il Mi Piace della Pagina Fan di Facebook.

Mi è stato fatto notare in un commento che alcuni pulsanti del MI Piace non portano a condividere il post cliccato nella nostra Bacheca su FB ma direttamente alla sottoscrizione della pagina fan del sito. Il sistema per ottenere questo risultato è semplicissimo e si basa sul Plugin Like Button. Si deve selezionare il tipo di bottone che si preferisce, quindi, nello spazio dell'URL, si incolla l'indirizzo della nostra pagina fan.

Si configura tutto il resto cioè larghezza, tipo di bottone (standard, contatore o boxcount), si decide se mostrare anche gli avatar oppure no, si lascia light per blog con sfondo chiaro mentre si sceglie dark per quelli a sfondo scuro.

configurazione-mi-piace-pagina-fan

Infine si clicca su Get Code per ottenere il codice che sarà di due tipi

codice-plugin-facebook

Nella parte alta c'è quello "vecchio" che consiste in un iFrame e in quella bassa quello che prevede l'utilizzo del nuovo linguaggio XFBML. Il secondo è molto più veloce del primo e quindi è da preferire. Il codice si può inserire a piacere in una sidebar o anche nel modello. Se lo vogliamo inserire nel template prima del testo dell'articolo, dobbiamo andare su Design > Modifica HTML, espandere i modelli widget, cercare la riga <data:post.body/> e incollarlo subito sopra. Se optiamo per visualizzarlo alla fine del post, dobbiamo incollarlo subito prima della riga <div class='post-footer'>.

Per visualizzare il bottone solo nei post, dobbiamo aggiungere queste due righe

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Codice bottone facebook per pagina fan
</b:if>

Nel caso in cui avessimo scelto di caricare tutti i plugin di Facebook in modo asincrono (cosa consigliata per aumentare la velocità di caricamento), allora l'ID della applicazione e il javascript si inserisce una sola volta nel modello (prima di </body>) e il codice, per esempio per la pagina fan di questo sito, sarebbe

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=181829258554733&amp;xfbml=1"></script><fb:like href="http://www.facebook.com/ideepercomputeredinternet" send="false" width="250" show_faces="false" action="like" font=""></fb:like>

ma, in virtù del già avvenuto caricamento del javascript, può essere ridotto al seguente

<div id="fb-root"></div><fb:like href="http://www.facebook.com/ideepercomputeredinternet" send="false" width="250" show_faces="false" action="like" font=""></fb:like>

Nel caso in cui non abbiate optato per l'installazione asincrona, ricordate di rendere il codice italiano sostituendo en_US con it_IT. In una sidebar il pulsante potrà avere questo aspetto (caso di accesso a Facebook non effettuato)

mi-piace-facebook

Ho anche postato una Demo online del Mi Piace per una Pagina Fan.





1 commento :

  1. Grazie mille Ernesto per questa spiegazione.
    Non capisco come mai quando cerco di comporre su facebook il bottone, non ci sia l'opzione per farlo come l'hai fatto tu.
    Cioè rimane sempre l'immagine sulla sinistra e non si può togliere.. :S

    RispondiElimina

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.