Iscriviti al mio Feed RSS

Non ti perdere i miei prossimi articoli!
Resta aggiornato iscrivendoti al mio Feed RSS!
Feed RSS via Mail di Enea Moro Feed RSS di Enea Moro

Come aggiungere “Mi Piace” di Facebook con XFBML

come inserire mi piace di facebookQuesto tutorial nasce dalle domande del suo predecessore: Come inserire “Mi Piace” di Facebook su siti dinamici

Ho deciso di riprendere in mano la guida e dargli una spolverata. L’iframe seguito su quella guida ormai è obsoleto, ed ho deciso quindi di rinfrescarla spiegandoti come fare la stessa cosa tramite XFBML. Questa via offre la soluzione senza giri di PHP, quindi più affidabile e diretta.

È un metodo meno pesante per il tuo sito web. Utilizzando XFBML, lo script sarà più fluido e inciderà meno sul caricamento delle pagine del tuo sito.

Mi Piace in XFBML

facebook xfbml mi piaceNel sito per sviluppatori di Facebook, vai alla pagina per la creazione del bottone Mi Piace.

Da questa pagina puoi impostare il bottone nel modo che meglio si confà alle tue esigenze. “URL to like” lascialo vuoto, il parametro href del codice XFBML è già puntato sulla pagina che è in visualizzazione.

Quando hai impostato il tuo stile, clicca su “Get Code“, ti si aprirà una finestra contenente 3 possibilità:

bottone facebook mi piace

Scegli XFBML. Al di sotto trovi i tre passi con i codici che vanno inseriti nel tuo sito.

1. Includi il JavaScript SDK subito dopo l’apertura del codice <body>. Collega una delle tue applicazione (crea una applicazione apposita giusto per avere l’id da aggiungere, potrà servirti per monitorare il funzionamento del tuo bottone)

<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&appId=tuo_app_id_qui“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

2. Devi modificare il tag <html> del tuo sito ed aggiungere il valore xmlns:fb.
ATTENZIONE, il tag quasi sempre contiene altre informazioni, quindi aggiungi il valore alla fine di quelli già presenti, e non sostituire tutto il tag <html> con quello che ti dà Facebook!

<html xmlns:fb=”http://ogp.me/ns/fb#”>

3. Inserisci, dove meglio credi, il codice che mostrerà il tuo pulsante Mi Piace di Facebook.

<fb:like send=”true” width=”450″ show_faces=”true”></fb:like>

Funziona! Mi Piace!

Se hai problemi ad usare il metodo XFBML, consulta la vecchia guida scegliendo di inserire il Mi Piace tramite iframe.

5 febbraio 2012

Facebook

Il prossimo articolo?

Ricevilo via mail o leggilo tramite Feed RSS
Abbonati!

Ricevi il prossimo articolo sul tuo indirizzo Email Leggi il mio prossimo articolo tramite Feed RSS



8 Risposte per “Come aggiungere “Mi Piace” di Facebook con XFBML”

  1. Snowglobemania scrive:

    L'articolo precedente era buono, questo è addirittura ottimo!
    Un tutorial semplice da capire e implementare, non ho avuto alcuna difficoltà a inserire il codice nel sito.

  2. Alessandro scrive:

    Ho provato in tutti i modi esistenti dichiarati e no… non funziona minimamente, dreamweaver non mi fa vedere nulla… caricata la pagina di prova dal mio Mac non succede assolutamente nulla…
    HELP

  3. Enea Moro scrive:

    Grazie Snowglobemania per i complimenti.

    Alessandro, penso che il problema stia nella pagina di prova di DW. Una volta che pubblichi il codice su uno spazio ftp, il codice assume le URL come dovrebbe.

    SPero che nel frattempo hai risolto, mi scuso per la tardiva risposta :)

  4. Giuseppe scrive:

    Ho eseguito lo step 2 di “Like” che si trova su Facebook.
    Quando clicco su “Mi piace”, sul sito compare la finestra per aggiungere un commento da pubblicare su Facebook, ma i dati riportati sono quelli delle meta tag di indicizzazione del sito e non quelle da me scelte per Facebook.

    Ho provato anche l’opzione “Send botton”, ma non funziona, genera un errore e quindi l’ho disattivata.

    Puoi aiutarmi?

    Grazie.
    Buona giornata.

  5. Eugene scrive:

    Buonasera.
    Ho trovato questo tutorial molto utile, finalmente sono riuscito ad inserire senza problemi questo benedetto “like button” in un sito con pagine dinamiche.
    L’unica cosa che mi rimane poco chiara è la questione relativa alla creazione di una applicazione facebook al fine di ottenere un ID. Mi sono registrato come sviluppatore ma sono più confuso di prima.
    Si potrebbero avere delle indicazioni più chiare a riguardo, magari un link a qualche articolo che tratta questo argomento?

    Grazie

  6. giancarlo scrive:

    Buongiorno Enea,
    ho un CMS sviluppato qualche anno fà in ASP e continuo ad utilizzarlo e ad integrarlo con nuove funzioni. Sto inserendo il plugin Like di Facebook nelle pagine interne che sono generate secondo questo standard: http://www.miosito.it/Content-Info.asp?IDLingua=ITA&IDWebChannel=719#prettyPhoto.
    Ho un problema. Il Like inserito nella pagina con l’opzione URL automatica, prende solamente la prima parte dell’URL, ovvero http://www.miosito.it/.
    Dopo moltissimi tentativi l’ultimo codice che sto utilizzando è il seguente:

    (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’));

    Ti sarei grato se tu potessi aiutarmi a risolvere il problema.
    In attesa di una tua risposta, invio i migliori saluti.
    Giancarlo

  7. giancarlo scrive:

    posto di nuovo il codice che sto utilizzando, a quello precedente manca una parte:

    (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’));

    Giancarlo

  8. giancarlo scrive:

    posto di nuovo il codice che sto utilizzando, a quello di prima manca una parte:

    <!–
    (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’));

    –>

    Giancarlo

Lascia una risposta