Qualche tempo fa ti ho spiegato come inserire il pulsante “Mi piace” all’interno degli articoli del tuo blog WordPress. Abbiamo però visto che ci sono due tipi di pulsanti Like:
- Il pulsante in versione IFRAME, che permette la funzione base di apprezzamento.
- Il pulsante in versione XFBML, che implementa anche la possibilità di condividere il post in bacheca.
Se per il primo tipo è sufficiente un copia e incolla del codice, per il secondo la questione è un poco più complicata. D’altra parte, il pulsante XFBML ha un vantaggio non da poco: integra in un unico strumento il pulsante Like + il pulsante Share.
Su richiesta di Alessandro Sportelli, ho deciso di scrivere questa breve guida che ti spiegherà, passo per passo, come inserire il pulsante XFBML sul tuo sito.
Innanzitutto c’è da fare una premessa: se sul tuo sito hai implementato il vecchio Facebook Connect, dovrai accontentarti della versione IFRAME con la funzionalità di base, in quanto la “versione Plus” richiede l’inserimento di un Javascript che va ad interferire con esso.
In caso contrario, puoi partire!
1. Crea l’Applicazione
- Vai alla pagina per la creazione automatica dell’applicazione.
- Inserisci il nome del tuo sito, l’indirizzo, la lingua e procedi.
- Prendi bene nota del valore dell’ID applicazione.
Avrai così creato l’Applicazione Facebook collegata al tuo sito web.
Nota bene: per modificare l’Applicazione o prender nota degli altri valori, devi andare alla pagina degli Sviluppatori.
2. Inserisci il codice Javascript
Come ho detto al’inizio, per poter visualizzare correttamente il tag XFBML, è necessario inserire la nuova Javascript SDK.
Apri allora la pagina dove vuoi inserire il pulsante “Mi piace” e inserisci in fondo alla pagina, appena prima del tag </body>:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'TUO_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/it_IT/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Ovviamente al posto di TUO_APP_ID dovrai inserire l’ID applicazione che hai annotato prima.
3. Inserisci il pulsante Mi piace
Bene, ora non resta che inserire il pulsante dove preferisci:
Come valore di href dovrai inserire l’indirizzo della pagina corrente. In base al CMS e al linguaggio di programmazione che usi, sono sicuro che troverai il modo di rendere automatica l’impostazione dell’URL.
Congratulazioni! Ora i tuoi utenti potranno semplicemente mostrare il loro apprezzamento o, se lo desiderano, condividere la pagina sulla loro Bacheca. Tutto con un solo pulsante!
E’ l’ora della pensione per il vecchio pulsante Condividi.
ciao vediamo se riesci ad aiutarmi…
ho una spece di e-commerce, quindi più pulsanti mi piace su una pagina che mi identificano i vari articoli… una volta cliccato su un pulsante mi piace, alcuni pulsanti mi piace vengono disabilitati (in genere quelli sotto al pulsante cliccato)
dimmi che sai lasoluzione per piacere?
I try to get some app ID
Ciao, bel tutorial, ma non riesco a farlo funzionare…
Ho inserito tutto sembra correttamente, ma quando clicco mi piace ottengo il seguente errore:
È necessario specificare un URL all’interno del widget o dell’API.
Il codice che uso per il pulsante è <fb:like href="”>
Sono su WordPress, come avrai intuito.
Quale può essere il problema?
non prende il codice…
vabbè cmq è quello che va messo dentro alla stringa iniziale html se leggi questo post magari mettilo tu da amministratore.
ti sei scordato di dire che all’inizio della pagina va messo:
ciao ciao. :>
Ciao Daniele e utenti di BigThink,
da giorni provo ad integrare la Javascript SDK con wordpress senza successo.
L’unico modo per far apparire il pulsante “mi piace” è utilizzando l’iframe.
Ho provato ad inserire il codice nel footer prima del tag come suggerisci, ma non va.
Il vero problema però non è il pulsante “mi piace”, appunto perchè è possibile inserirlo anche con iframe senza particolari problemi.
Il problema si presenta con il comment box (http://developers.facebook.com/docs/reference/plugins/comments) che può essere inserito solo attraverso codice XFBML, utilizzando la libreria Javascript SDK.
Dopo varie prove, l’unica soluzione che ho trovato è utilizzare il plugin FConnect (http://www.sociable.es/facebook-connect/) che vedo anche tu usi qui su bigthink.
Arriviamo al problema: questo plugin mostra il comment box solo in lingua inglese…dovrebbe capire la lingua che l’utente ha impostato su Facebook è usarla nel box ma non funziona.
Dunque, c’è un modo per integrare la libreria SDK su WordPress senza usare plugin?
Grazie in anticipo per qualsiasi aiuto!
Ciao Ghido, lascio questo commento per coloro che come me si stanno imbattendo nello scoglio duro degli errori Facebook
Quando vado a creare l’applicazione, dopo aver inserito l’url (come dice Alex inserendo uno slash / alla fine), nome e lingua, do l’ok e Facebook mi genera una pagina di errore, dicendo che provvederà a risolvere presto la situazione. In realtà sono parecchi giorni che è presente questo disservizio.
La cosa importante (me ne sono accorta solo oggi) è che, nonostante l’errore l’applicazione viene creata lo stesso. Basta andare nella pagina di gestione delle app che hai linkato subito dopo e appariranno tutte le applicazione che abbiamo creato (nonostante l’errore) e sarà così possibile reperire l’ID applicazione.
Hello and sorry for my english .. i seem to have the same problem as alex by triying to implement an earlier facebook connect with sociable though (1.2)… my website is http://www.pbellis.com and i become as alex mentioned
catchable fatal error: Object of class WP_Error could not be converted to string in /home/ghido/public_html/wp-content/plugins/fbconnect/fbConnectLogic.php on line 291
any help would be greatly appreciated
Ciao, ottima guida ma non riesco a capire perchè su alcuni post si vede il tasto del “mi piaci” e permette anche di condividere ovviamente in XFBML mentre in altri non appare…
Da cosa può dipendere?
Grazie mille
Ciao Ghido, ho integrato Facebook SDK da Aprile in tutti i siti e sono davvero soddisfatto, funziona alla grande e porta tante visite. C’è ancora una cosa che non riesco a capire: funziona a dovere con il plugin WP Super-Cache di WordPress? All’inizio mi ha dato problemi e da allora l’ho tenuto quasi sempre disattivato. Se lo riattivo a volte trovo che la “nuvoletta” del Mi Piace non funziona, eppure i codici non sembrano essere in conflitto. Qualcuno ha esperienze a riguardo?
Ciao, mi sembra molto strano. Wp Super Cache agisce a livello di server, mentre la Facebook SDK lavora lato client con javascript, quindi non dovrebbe esserci alcun conflitto…
ciao,
al primo step anche a me da errore “invalid_url”. Mi sai spiegare il perchè? come posso fare?
grazie
Ciao Daniele, intanto come sempre ottima guida!
Mi chiedo: in wordpress inserendo il javascript in footer.php prima di di fatto il codice poi è presente in tutte le pagine del blog, anche se poi viene richiamato solo inserendo l’ulteriore codice in single.php
Non può questo rallentare il caricamento delle pagine rispetto all’altro pulsante like, che invece non richiede di inserire alcun javascript in tutte le pagine?
A presto
Paolo Leonardi
Ciao Paolo, la tua osservazione è corretta.
Con l’altro pulsante hai un semplice IFRAME che viene richiamato dal server di Facebook, in questo caso hai invece un javascript che si carica in tutte le pagine e che va a interpretare il codice XHTML.
Sicuramente questo pulsante like è meno performante dell’altro, ma non mi pare che rallenti eccessivamente. Devi solo valutare pro e contro, per poi decidere quale preferisci.
Sono bloccato anche io al primo step, mi dice sempre “Invalid URL”.
Ho provato a inserire l’indirizzo in tre modalità:
- http://www.nomesito.it
- http://www.nomesito.it
- nomesito.it
Sono bloccato anche io al primo step, mi dice sempre “Invalid URL”.
Ho provato a inserire l’indirizzo in tre modalità:
- http://www. nomesito. it
- www. nomesito .it
- nomesito .it
Cosa posso fare?
Prova a creare la tua applicazione partendo da qui, saltando la composizione guidata.
anche a me non riconosceva l’url, poi ho inserito uno slash alla fine dell’url
in questo modo: http:www.nomedelsito.it/
ed ora funziona.
@Ghido, ho provato a commentate con Facebook Connect, ma una volta connesso no vedo più la pagina:
Catchable fatal error: Object of class WP_Error could not be converted to string in /home/ghido/public_html/wp-content/plugins/fbconnect/fbConnectLogic.php on line 291
Grazie per la guida, mi è stata molto utile!
Ciao Daniele,
ho inserito il codice nel mio blog e funziona tutto. L’unica cosa che non capisco è perchè quando condivido il post su fb, invece di condividermi il post specifico, mi condivide il blog intero (nel senso, dopo aver condiviso, su fb appare che ho condiviso il link a colognonews.blogspot.com e non direttamente al post).
Secondo te?
Grazie e complimenti
Ciao, è presto detto: come valore di “href” hai inserito l’indirizzo del tuo blog, invece devi inserire una funzione dinamica che permetta di recuperare l’url del post corrente.
Non conosco blogger, quindi non saprei dirti come fare.
Ok, inizio la ricerca… anche se non ne capisco molto
Grazie mille, se ti capita di scoprire qualcosa fammelo sapere.
Ciao!
Scusa se ti disturbo l’ultima volta… ma che forma ha l’espressione dinamica, cioè più o meno come è fatta?
Prova così:
<fb:like expr:href='data:post.url'></fb:like>Funziona!!!
Gerazie mille!!
Grazie per questa utilissima guida! Ho subito provato l’uso del Like Button XFBML al posto di quello iframe che già utilizzavo.
Noto però che funziona la sola parte “Like”, mentre la parte “Share” non viene attivata.
Ho provato anche a creare una pagina che contiene nell’HTML il solo ed il richiamo al Javascript SDK ma non funziona neanche in questo caso.
Da cosa può dipendere?
Anche io ho fatto un test con solo l’HTML e funziona (vedi link).
Hai impostato correttamente l’applicazione? Hai inserito l’APP_ID? Questi sono solitamente i motivi per cui non funziona lo share, ma solo il like.
Avevo già creato l’applicazione ed inserito l’APP_ID. Ho però ora provato a rimuoverla e crearne una nuova, usando il nuovo APP_ID. Con questo funziona tutto correttamente.
Ottimo! Misteri di Facebook..
Grazie Daniele, ho provato ma mi restituisce errore nella pagina del prodotto…
Grazie per il regalo!
Sarebbe stata un’altra mia domanda!
Più che altro avevo letto in un tuo vecchio post che ,con le versioni precedenti dei vari social plugin , la lingua dipendeva dallla ”nazionalita” dell’account con cui si accedeva!
In quei casi sì. Stavolta invece si può impostare direttamente
Risolto, adesso mi tocca fare la parte più difficile inserirlo sotto ogni scheda prodotto del mio ecommerce, consigli? Grazie
Bè, per ottenere l’url della pagina corrente puoi utilizzare questo metodo, ad esempio: http://www.htdocs.it/php-individuare-la-url-corrente/
Ciao Daniele, ottimo post!!
La mia domanda è questa sto provando lo step 1 creando l’applicazione, ma mi dice url non corretto, da cosa può dipendere.
Grazie
Che url inserisci?
a me continua a dare “invalid url”.
ma ci va l’indirizzo di ogni pagina in cui devo inserire il bottone, o l’indirizzo principale del sito?
No no, devi inserire l’url principale del tuo sito.
continua a darmi invalid url.
il formato è http://www.miosito.it
devo togliere l’http? o sono i soliti problemi di facebook?
Ottimo articolo!
Un pulsante del genere aumenterà di sicuro le condivisioni!
Tuttavia non riesco a capire come mai non funziona sul mio blog!
Ho fatto tutto alla lettera (anche perchè sono 2 passaggi di copia e incolla)
Ma non viene visualizzato nulla!
Quando hai tempo, come al solito, avrei bisogno di una mano!
Grazie in anticipo!
Probabilmente va ad interferire con i “Like Box”. Prova a toglierli per un attimo e vedi se funziona.
Si era così grazie!! il codice per avere l’url del post in wordpress invece com’è??
Per WordPress è: <?php the_permalink(); ?>
Grazie mille! sempre gentilissimo!
é stata un ottima scoperta il tuo blog!
E ti regalo un ultimo consiglio: ho modificato il codice Javascript. Invece di “en_US” metti “it_IT” così da avere il pulsante in italiano
Finalmente! Per chi non ne capisce di codice è una vera manna l’articolo.
grazie. Adesso pare facile. Io comunque ho installato il plugin per wordpress facebook like button.