26
Facebook: inserire il bottone “mi piace” senza problemi
Postato da regole-seo, in Social, in data 26/09/2010
- Bottoni social network for dummies
- Facebook: inserire il bottone “mi piace” senza problemi
- Twitter: inserire il retweet button senza spiacevoli sorprese
- Google buzz button: inserirlo è semplice e conviene
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:
- Come mai non compare nulla anche se ho inserito il codice nel modo corretto?
- Dove trovo il mio id utente Facebook se ho personalizzato il nome della mia pagina?
- Dove devo posizionare il codice della JavaScript SDK?
- Cosa devo inserire al posto di “your app id” nel codice della JavaScript SDK?
- Come faccio a far si che quando un utente condivide qualcosa con il bottone “mi piace” venga inserita anche un’immagine?
…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:
- Collegatevi a questa pagina www.facebook.com/topic.php?uid=27817827944&topic=13276 creata appositamente per recuperare il proprio identificativo utente su Facebook dopo avere fatto il login su Facebook:
- inserite anche voi un messaggio a caso
- posizionate il puntatore sul vostro nome utente a fianco del messaggio appena inserito e vedrete, nella barra inferiore del vostro browser, comparire una url che termina con il vostro id utente Facebook
- Non vi resta che inserire questo identificativo al posto di “idUtenteFacebook” evidenziato in rosso nel codice riportato precedentemente.
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!
Ciao Alessandro, per favore lascia il link alla tua pagina. I problemi che segnali possono dipendere da vari motivi.
Preferisco lasciarti Link privatamente. Se mi lasci gentilmente un contatto.
Alessandro
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?
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.