Facebook: inserire il bottone “mi piace” senza problemi

Postato da regole-seo, in Social, in data 26/09/2010

Indice articoli - "Bottoni social network"

facebook-bottone-mi-piace

Nonostante gli sforzi di Facebook di realizzare una documentazione completa per l’integrazione dei suoi social gadget i forum pullulano di persone che chiedono aiuto per i problemi più disparati.

Ho deciso allora di realizzare questa mini guida il cui scopo è quello di risolvere i problemi e i dubbi più classici riscontrati durante l’integrazione dei social widgets di Facebook.
La guida descrive passo passo la realizzazione del bottone “mi piace” (o like button) ma le problematiche incontrate sono spesso comuni anche agli altri widgets:

…sono solo alcune delle domande diffuse nei forum e nei blog.

Seguendo attentamente questa breve guida potrete integrare il vostro bottone “mi piace” e risolvere questi noiosi problemi.

E allora si comincia…
…iniziando da dove più o meno tutti cominciano ovvero dalla pagina
http://developers.facebook.com/docs/reference/plugins/like
dove troviamo lo strumento che Facebook mette a disposizione per generare il codice di base del bottone “mi piace”.
In questo modo vedrete un’anteprima di come dovrà comparire il vostro bottone.

Quando siete soddisfatti, premendo il pulsante “Get Code” verrà visualizzato il codice del bottone “mi piace” in due versioni.
Nel nostro esempio useremo la versione XFBML. Il codice che avrete ottenuto sarà simile al seguente:

<fb:like layout="button_count" show_faces="false"></fb:like>

Chiaramente potrete avere dei parametri differenti dalla versione qui rappresentata in base alle opzioni da voi selezionate.
Copiate questo codice nel punto della vostra pagina in cui desiderate visualizzare il bottone “mi piace”.
Vi consiglio, come nel nostro esempio, di non usare il parametro opzionale href all’interno del tag <fb:like>. In tal modo il “mi piace” si riferirà di default alla pagina in cui viene visualizzato il bottone.

Poichè utilizziamo la versione XFBML, al codice ottenuto dovremo aggiungere anche il codice della JavaScript SDK ottenendo infine il codice seguente:


<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

<fb:like layout="button_count" show_faces="false"></fb:like>

Lo “your app id” che ho evidenziato in rosso può essere usato dalla JavaScript SDK nel caso abbiate realizzato un’applicazione Facebook. Visto che non si tratta del nostro caso potete lasciare il codice esattamente come lo vedete qui sopra.

Aggiungiamo ora qualche informazione in più tramite l’utilizzo dei meta tag “open graph di Facebook da inserire all’interno del tag <head> della vostra pagina.
Nonostante la documentazione di Facebook dica che nell’uso di open graph alcuni meta tag sono obbligatori, io ho riscontrato che tutto funziona regolarmente anche se non compaiono tutti i meta-tag da loro citati.
Se vi interessa, trovate una breve descrizione dei principali meta tag open graph sempre nella pagina relativa al like button: http://developers.facebook.com/docs/reference/plugins/like.
Il mio consiglio è quello di utilizzare almeno i seguenti:

<meta property="og:image" content="http://www.mioDominio.it/immagine.png"/>

<meta property="fb:admins" content="idUtenteFacebook"/>

Il primo farà si che quando un utente cliccherà sul bottone “mi piace” e inserirà un commento, questo sarà visualizzato sul suo profilo affiancato all’immagine che avete indicato nella porzione evidenziata in rosso (con più probabilità di attirare l’attenzione di altri utenti). Senza questa immagine, molto probabilmente ne verrebbe inserita un’altra tra quelle presenti nella pagina ma non è detto che la cosa sia di vostro gradimento.
Colgo l’occasione per farvi notare che grazie alla recente possibilità di aggiungere un commento personalizzato da parte dell’utente che cliccherà il bottone “mi piace”, il vecchio pulsante condividi di Facebook diventa di fatto obsoleto.

Il secondo è utilizzato per indicare l’amministratore della pagina e personalmente ho deciso di inserirlo.
Ora, recuperare il proprio id utente Facebook non è sempre così semplice soprattutto se, come ho fatto io, avete personalizzato il nome della vostra pagina del profilo con questo strumento: http://www.facebook.com/username/

Ho però scoperto un truccheto niente male che vi permetterà di recuperare il vostro id facebook in un batter d’occhio:

Anche se tutto sembra concluso esiste ancora un’insidia che non è stata presa in considerazione e potrebbe far si che il bottone “mi piace” o qualche altro widget di Facebook non venga visualizzato su alcuni browser.
Infatti abbiamo utilizzato i tag speciali di Facebook senza dichiarare il loro “namespace“.
Per superare anche questo ostacolo vi basta inserire nel tag <html> del vostro sito le dichiarazioni dei nuovi namespace usati come vedete in rosso nel codice sottostante:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">

Anche se personalmente non ho riscontrato il problema, qualcuno sostiene che a volte la mancata visualizzazione dei widgets di Facebook in pagina possa essere attribuita alla posizione in cui è stato inserito il codice della JavaScript SDK (codice in verde riportato sopra).
La cosa di per sé ha un senso in quanto in base alla posizione all’interno del codice gli script potrebbero venire caricati al momento sbagliato. Il mio consiglio generale è quello di posizionare il codice della JavaScript SDK sempre precedentemente al codice dei tag fb dei widgets.
Ad ogni modo se vi sembra di avere fatto tutto correttamente ma il pulsante non viene visualizzato provate a spostare il codice della JavaScript SDK in un’altra posizione all’interno del codice della vostra pagina.

A questo punto il vostro bottone “mi piace” dovrebbe funzionare a dovere.
Il risultato ottenuto è stato testato su Firefox 3.6, Exporer 6/7/8, Google Chrome 6.0, Safari 5.0 e iPhone.

Non esitate a farmi sapere come vi è andata!

Commenti (191)

1 5 6 7
  1. regole-seo scrive:

    Ciao Alessandro, per favore lascia il link alla tua pagina. I problemi che segnali possono dipendere da vari motivi.

  2. Alessandro scrive:

    Preferisco lasciarti Link privatamente. Se mi lasci gentilmente un contatto.
    Alessandro

  3. Topografo scrive:

    Non ci riesco… vabbè che ho inserito di tutto in Index.html ma sia su www.ristoranteindianoelefanteblu.tk/ (sto registrando il dominio giusto) che su veronacitysera01.altervista.org/ non mi viene fuori nulla…
    Ne in locale ne quando mando la pagina in rete…
    Puoi aiutarmi dando un occhiata al codice, per favore? Dove sbaglio?

  4. regole-seo scrive:

    x Topografo: stai pasticciano con l’uso dell’iframe. E’ quello il motivo per cui non funziona.
    Aiutati col debugger di facebook (http://developers.facebook.com/tools/debug) per identificare i problemi sia sulla url principale che quella che richiami dall’iframe.
    Ad ogni modo eviterei di usare un iframe per inglobare un dominio esterno.
    Credo che un redirect è quello che fa al caso tuo ;)
    La causa dei tuoi problemi è proprio quell’iframe.

  5. Maria scrive:

    Salve, sto lavorando in locale su un sito wordpress. Non riesco a capire perchè con qualsiasi sociable plugin che testo (wp-socializer, socialize, diggdigg e chi più ne ha più ne metta) non riesco a visualizzare il pulsante mi piace di facebook. Si vedono tutti, tranne quello. Premetto che fino a qualche mese fa funzionava tutto alla grande. Ho anche disattivato tutti i plugin per verificare che non interferissero. Qualche idea?

  6. Elisa scrive:

    Ciao grazie bellissimo articolo, potrei sapere come posso usare il tasto mi piace solo ed esclusivamente come contatore di mi piace? Mi spiego vorrei che il Mi Piace fosse finalizzato come un contenitore di voti. Grazie

  7. Marco scrive:

    Ciao e grazie, vorrei capire come inserire il ‘mi piace’ relativamente alla homepage del sito e contemporaneamente inserire il ‘mi piace’ in un banner presente sulla stessa pagina. In più vorrei le indicazioni per mostrare, come fai tu in questa pagina, il ‘mi piace’ per la pagina ed il ‘mi piace’ dell’homepage sul lato. Grazie ancora.

  8. Alessandro scrive:

    Ahooooooooooo me sto a rincojonì !!!!
    Questo è il codice, non funziona un caizer !!!
    Quando sono collegato con fb, il plug-in “mi piace” una volta cliccato, scompare e mi compare la scritta in rosso “Errore”.
    Qualche idea ?

    Ingenium Logic Srl

    // Load the SDK Asynchronously
    (function(d){
    var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
    js = d.createElement(‘script’); js.id = id; js.async = true;
    js.src = ‘//connect.facebook.net/it_IT/all.js’;
    d.getElementsByTagName(‘head’)[0].appendChild(js);
    }(document));

    <!–
    –>

    Your browser does not support Iframes!

    Lascio a tutti la mia email:
    alessandro_luongo@hotmail.com

  9. Fabrizio scrive:

    Ciao,
    Avrei gentilmente bisogno di capire come inserire il tasto mi piace senza che si apra il popup per postare un commento. Se non è possibile vorrei almeno capire come far aprire il popup in una dimensione definita da me. Siccome non riesce a percepire la fine della pagina mi sfonda il layout e avrei bisogno quindi che si apra verso l’alto (cosa che con il tasto di Google+ si può decidere).
    Grazie per la risposta
    Fabrizio

  10. Piero scrive:

    A chi può interessare, ho modificato il codice in modo che lo puoi mettere in un file esterno es. script.js e richiamarlo dove vuoi. Lo potete vedere in azione nel mio sito nella colonna destra.

    Mettilo nel file esterno, l’unica modifica che devi fare è sostituire il mio url http://gruppoalveo.altervista.org con il tuo

    function facebook() {
    (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’));
    document.write(”);
    document.write(”);
    }

    Richiamalo nel tuo sito dove vuoi:

    facebook();

    Fatemi sapere

  11. Piero scrive:

    Il codice sopra non è visualizzato correttamente perché sono state tolte le parentesi a punta.
    Admin, per favore correggi, io te l’ho inviato completo di tutto.

1 5 6 7

Scrivi un commento