Nello scorso articolo ti ho spiegato i pro e i contro del Like Button. Se ti sei convinto e ora vuoi installarlo su ogni post del tuo blog WordPress, ora vedremo come fare.
In molti hanno avuto problemi, quindi ti spiegherò nel dettaglio sia come inserirlo manualmente, che con i plugin appositi.
Pronti, via!
Inserire il Mi Piace con i Plugin
Innanzitutto vediamo il metodo più comodo, per i più pigri: i plugin.
Il plugin più completo che inserisce tutti i Social Plugin di Facebook ed oltre, l’abbiamo già visto: Facebook Connector. Sconsigliato nel caso vogliate inserire solamente il Like Button.
Ecco invece alcuni nuovi plugin che dovrebbero compiere il lavoro correttamente (non li ho testati personalmente):
- Kouguu FB Like Button Plugin for WordPress
Permette di usare sia la versione iFrame che quella XFBML, di inserire gli Open Graph metatag e di personalizzare i pulsanti. - Facebook Like Button For WordPress
Permette di decidere se farlo comparire su post, pagine e in home, di personalizzarne l’aspetto e lo stile. - Facebook Like Button Plugin
Altamente personalizzabile, ha tutte le caratteristiche precedenti e permette di assegnare l’ID dell’applicazione e dell’amministratore a cui collegare le “pagine fantasma”.
Poi comunque basta una ricerca per scoprire che ci sono decine di plugin simili tra cui andare a scegliere.
Inserire il Mi Piace alla fine di ogni post
Se non ti fidi dei plugin e preferisci avere un controllo diretto sul codice, puoi inserirlo a mano.
Personalmente ho scelto la versione iFrame, più leggera e compatibile. Il codice base lo trovi qui, però poi va modificato in modo da prendere dinamicamente l’url della pagina corrente.
Apri allora il file functions.php del tuo tema WordPress ed inserisci il codice seguente:
global $post;
if(is_single()){
$content .= '<iframe src="http://www.facebook.com/plugins/like.php?href=' . urlencode(get_permalink($post->ID)) .
'&layout=standard&show_faces=true&width=408&action=like&font=verdana&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:408px; height:80px"></iframe>';
}
return $content;
}
add_filter('the_content', 'aggiungi_like');
In questo modo alla fine di tutti i tuoi post comparirà il pulsante Like. Per inserirlo anche sulla home e sulle pagine interne, puoi modificare la terza riga in:
Se invece preferisci la versione XHTML e vuoi implementare anche il nuovo Send Button, questo è il codice alternativo al precedente:
global $post;
if(is_single()){
$content .= '<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>' .
'<fb:like href="' . get_permalink($post->ID) . '" send="true" width="450" show_faces="true"></fb:like>';
}
return $content;
}
add_filter('the_content', 'aggiungi_like');
Impostare i Meta Tag
Per ottimizzare l’esperienza del like, è bene aggiungere alcuni meta tag alle nostre pagine. Sempre nel file functions.php, inserisci questo codice:
global $wp_query;
$post = $wp_query->get_queried_object();
// Genero la descrizione della pagina
$desc = "<DESCRIZIONE DI DEFAULT>"; // sostituisci con la tua descrizione
if(is_single() || is_page()){
$desc = cut($post->post_content, 25);
}elseif(is_category()){
$desc = strip_tags(category_description());
}
$desc = str_replace(array("\n","\r","\t"), " ", $desc);
$desc = str_replace('"', "'", $desc);
$desc = trim($desc);
// Genero il titolo della pagina
$title = "<NOME DEL TUO BLOG>"; // sostituisci col nome del tuo blog
if(is_single() || is_page()){
$title = str_replace('"', "'", $post->post_title);
}
// Genero l'immagine di anteprima
$thumb = "<URL DI DEFAULT>"; // sostituisci con l'url della tua thumb di default
if(function_exists("str_img_src") && is_single()){
$thumb = str_img_src($post->post_content);
}
echo '<meta property="og:site_name" content="<NOME DEL TUO BLOG>" />' . "\n";
echo '<meta property="og:type" content="blog" />' . "\n";
echo '<meta property="fb:admins" content="<ID DEL TUO PROFILO FACEBOOK>" />' . "\n";
echo '<meta property="og:title" content="' . $title . '" />' . "\n";
echo '<meta property="og:description" content="' . $desc . '" />' . "\n";
echo '<meta property="og:image" content="'. $thumb . '" />' . "\n";
}
add_action('wp_head', 'add_meta_tag');
La prima parte serve per recuperare descrizione, titolo ed immagine della pagina. Fai attenzione che la funzione str_img_src() non è nativa di WordPress, ma devi copiarla ed incollarla nel tuo file functions.php. La trovi definita in questo articolo.
Invece la funzione cut() la trovi definita in ques’altro post. Copiala nel file functions.php, altimenti il codice precedente ti darà errore.
La seconda parte del codice, invece, stampa i meta tag:
og:site_namedefinisce il nome del tuo blog.og:typedefinisce il tipo sito in questione (Vedi qua gli altri possibili valori).fb:adminsassegna la “Pagina fantasma” agli utenti specificati (inserisci l’ID numerico del tuo Profilo Facebook).og:titleè il titolo della pagina corrente.og:descriptionè la descrizione della pagina corrente.og:imageè l’immagine relativa alla pagina corrente.
Attenzione: per poter inserire questi meta tag speciali è necessario modificare manualmente il tag <html> delle tue pagine, in questo modo:
Le “Pagine Fantasma”
Il meta tag fb:admins è quello necessario affinchè vengano create quelle che ho chiamato “Pagine Fantasma”.
Il primo utente che clicca sul Like relativo ad un tuo articolo farà in modo che si crei una Pagina Fan collegata al post stesso. Di tale pagina diventeranno fan (se ancora così si possono chiamare) tutti coloro che cliccheranno sul pulsante “Mi Piace”, ma non sarà visibile ai normali utenti, nè la vedranno listata nel proprio profilo.
Invece, gli utenti i cui ID sono specificati nel meta tag fb:admins diventeranno Amministratori della pagina, potranno visualizzarla normalmente tra le loro pagine e — dulcis in fundo — potranno inviare aggiornamenti sullo Stream a tutti coloro che sono collegati ad essa.
Infine, vedranno l’elenco di tutti coloro a cui piace il post (cosa altrimenti non possibile agli utenti normali) e potranno accedere alle normali statistiche Insights.
Un modo diretto per accedere alle Pagine Fantasma è andare sul post stesso e trovare il link “Amministra Pagina” accanto al pulsante Like.
Inviare aggiornamenti tramite Applicazione
L’unico problema di questo sistema è che il povero amministratore si ritroverà centinaia se non migliaia di Pagine Fan da poche decine di utenti. Se hai un blog con 1000 articoli, ti ritroverai con 1000 Pagine da amministrare! Pensa se volessi mandare un aggiornamento sullo Stream a tutti… La cosa diventa ingestibile.
Per fortuna Facebook ha pensato anche a questo e ti permette di inviare aggiornamenti tramite Applicazione Facebook, che ovviamente dovrai svilupparti tu.
Per prima cosa bisogna inserire un ulteriore meta tag che specifichi quale applicazione può accedere alla Pagina:
A questo punto devi invece recuperare l’ID della Pagina su cui vuoi pubblicare. Per fare ciò, basta usare la nuova Graph API:
https://graph.facebook.com/?ids=<URL DEL TUO POST>
Ad esempio, prova ad andare qui: https://graph.facebook.com/?ids=http://www.bigthink.it/facebook-like-button-vs-share-button/.
Ora hai tutto ciò di cui hai bisogno, puoi creare la tua applicazione e pubblicare sullo Stream come se fosse una normale pagina, con il classico metodo Stream.publish o quello nuovo della Graph API.
Ovviamente anche la parte di reperimento dell’ID può essere fatta da codice, così come postare in automatico su tutte le pagine in un colpo solo. Chissà che non svilupperò qualcosa di simile io stesso. ^^
Per domande o problemi, commentate.
ciao, ho un problema, quando metto mi piace non mi fa vedere la descrizione:
anche se c’è questo:
mi mette soltanto un “No” sotto al titolo del post sulla bacheca.Grazie
Ciao, ho letto la guida per inserire il bottone manualemte e anche i commenti e c’è una cosa che vorrei capire prima di lanciarmi nell’implementazione del codice: c’è un modo che mi permette di scegliere dove inserire il bottone? Cioè posso inserirlo nel modo concesso da alcuni plugin che danno sia un codice PHP sia uno short code?
Grazie;-)
Posso usare gli open graph tag anche con ‘iframe’?
Ciao Ghido, ti porgo una domanda su questo argomento, magari rispondere a questa cosa che mi turba da giorni
l’altra volta ho visto un blog, nel quale ogni qualvolta l’utente passava da un articolo all’altro o da una pagina all’altra, si apriva una piccola finestrina che ti diceva “premi mi piace” altrimenti aspetta 9 secondi, e partiva il countdown. Volevo sapere se magari conoscevi il nome di tale plugin 
Gracias
Ciao Ghido, il tasto like mi compare e funziona ma quando ci clicco:
- Nella finestra di anteprima non compare l’immagine del post e l’anteprima dell’alrticolo.
- sulla pagina di facebook non condivide il testo dell’articolo ma quello dei commenti ad esso relativi…
Dove sbaglio?
Grazie!
Ciao Daniele, ho installato Kouguu FB Like Button Plugin for WordPress e funziona. Non riesco però a inserire il bottone nella sidebar. Ho provato con lo short code, ma non funziona (il bottone non appare; ottengo la scritta dello shot code).
p.s. Lo shot code nei post funziona.
Ciao, grazie per la guida. Solo una domanda:
come posso fare a stampare il “mi piace” in un punto diverso da quello indicato nel tuo post. Se avessi bisogno di stamparlo subito dopo il titolo del post e non alla fine.
grazie ancora
Ciao Ghido trovo molto interessante quello che hai scritto, complimenti per la guida completa.
A me stamani è successo una cosa strana, adesso quando clicco sul pulsante “mi piace” mi appare un tasto di conferma e ricliccando sul tasto “conferma” mi appare un pop-up che mi richiedere se sono sicuro di cliccare. Quindi tutti i miei utenti devono cliccare ben 3 volte.
Sai da cosa dipende questo problema e come fare a risolverlo?
Ciao , io ho un problema con il tasto mi piace.
Come può vedere gli articolo sul mio blog hanno il tasto mi piace.
Esempio:
http://blog.danielevotta.it/2011/05/raccolta-di-30-bellissimi-monitor-trasparenti/
Però quando vado a pubblicare quell’articolo sulla mia pagina fan, i “mi piace” non vengono caricati.
Nel blog il tasto mi piace è fatto così:
Forse dovrei mettere nell’href del tasto, l’indirizzo dell’articolo sulla pagina fan. Per fare in modo che i mi piace del blog e della pagina fan corrispondano sempre.
Domanda:
Come faccio a recuperare l’url del post sulla pagina fan?
Quello che in poche parole voglio ottenere è che se un utente mette mi piace su un articolo del blog, quel mi piace deve comparire anche nel post (di quell’articolo) nella pagina fan..
Spero di essermi spiegato.
Grazie
Ghido vista la nuova implementazione di Facebook con il tasto Send/Invia c’è da aggiornare il codice per l’inserimento del Mi Piace alla fine di ogni post
Ciao! Bè, se si vuole inserire anche il Send Button, basta aggiungere un send=true. Niente di troppo complicato
Non dare per scontato certe cose, noi sappiamo farlo… ma non tutti masticano queste cose
Hai ragione. Ho aggiunto il nuovo codice per completezza!
Un ottimo articolo veramente interessante… complimenti
Per dirla al caso nostro… mi piace…
Ciao Ghido,
volevo chiederti se sai come risolvere questa peculiare situazione in cui mi sono trovato: avevo trovato un codice di prova che prendeva come elemento da condividere il film “The Rocks” da personalizzare con i miei dati.
Nella fretta l’ho buttato su così per vedere se funzionava e funzionava: cliccando mi piace sul mio sito, sul mio profilo si vedeva che mi piaceva “The Rocks”.
Bene: ho modificato tutto il codice a mio piacimento, verificato, ri-verificato, riuploadato: ma facebook sembra che non aggiorni più le mie informazioni, per lui la mia pagina rimane THE ROCKS !!! solo l’url si è aggiornato! Però ad esempio nel sito vedo che la mia pagina piace a 6000 persone (non è ancora stato lanciato il sito !!!) che guardacaso son quelle di THe Rocks.
TI assicuro che nel codice (sia quello nell’head, sia quello nella pagina del like) non è rimasto nulla che riguardi quel film. Eppure per facebook ormai è così.
Any suggestion???
ciao sono un po’ confuso, ho letto tante cose a proposito ma forse questo articolo mi indirizza sulla giusta strada.
secondo te è possibile avere il tasto “like” ma che si diventi fan nella pagina vera, quella ufficiale relativa al blog?
ciao io ho provato ad inserire il codice che indicate qui sulla function.php di wordpress per far comparire il mi piace alla fine di ogni post, ma non funziona. cosa sbaglio? ora sul mio function c’e’ questo, devo levarlo?
gran post! ma volevo togliermi un dubbio prima di passare ad implementare il codice…
è inevitabile la creazione di centinaia di “pagine fantasma” ognuna collegata ad un diverso post?
Non è che giocando con gli Object types posso in qualche modo far creare un’unica pagina fantasma dove confluiscono in generale tutti gli utenti che cliccano mi piace su vari post?
(chiesto questo perchè se possiedi vari blog… la gestione delle pagine sarebbe quanto meno complicata)
Grazie mille, ottima guida dettagliatissima, ora implemento tutto sul mio blog!!!
Ottimo … ci provo anche io…se poi non funziona ti chiderò qualcosa!
Grazie
Salve voglio mettere il pulsante ‘mi piace’ a fine di ogni post..io uso blogspot e nn so come fare..dove inserire il codice in modo che poi automaticamente dopo ogni post c’è il mi piace >.< heelp
Scusami, ma ho seguito le tue indicazioni e messo il plugin.Prima avevo troppo spazio bianco, adesso l’ho ridotto, ma mi sorge un dubbio: non è che a google non piace che il MI PIACE è troppo vicino al banner?
Non credo che sia un problema, in verità.
Molte grazie, trovo molto interessanti i tuoi post sull’implementazione di queste funzioni, specie per wordpress.
Per la funzione str_img_src() serve tutto il codice presente nell’articolo segnalato? o solo la seconda parte – quella in cui è definita function str_img_src($html) – ?
Basta solo il codice della funzione str_img_src(), la seconda parte.
ciao, prima di istallare vorrei capire alcune cose:
. Come faccio ad inserire il button all’inizio di ogni post?
. L’inserimento dei meta tag in che modo di preciso migliora lo script? è essenziale?
grassie.
Ciao!
Dove devo mettere il seguente codice?
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" >
Cioé non ho capito come faccio a metterlo nelle pagine
grazie
Ciao, va inserito nel file header.php del tuo tema, al posto del semplice tag <html>
Grazie per la guida. Io ho inserito il pulsante mi piace con l’iframe preso da facebook direttamente nel template. Poi ho inserito tutte le funzioni richieste per la creazione di pagine fantasma ma non succede niente… Come mai?
Edit: inserendo le funzioni per la creazione delle pagine fantasma mi fa amministrare le pagine create ma non mi fa vedere tutti gli iscritti ad essa, ma solo gli iscritti amici. E’ normale che sia cosi?
Ciao, tutto funziona correttamente, ma ho una bela differenza tra il numero di persone che hanno cliccato “Mi piace” che appare sulla pagina e quello riportato nell Fan Page fantasma.
Ad esempio su una pagina ho “a 54 persone piace..”. Poi clicco su “amministra pagina”, vado sulla fan page fantasma, e vedo solo 10 fan. Succede anche a voi?
molto utile, ora provo a inserirlo sul mio blog
Scusate per il doppio post, non aggiornava la pagina
molto utile, ora provo a inserirlo sul mio EmmeCi Blog
veramente un’ottima guida, chiara e precisa!
ho inserito il “mi piace” su un portale che gestisco, vediamo che risultati si ottengono
Mi da errore inserendo questo:
function add_meta_tag(){
global $wp_query;
$post = $wp_query->get_queried_object();
// Genero la descrizione della pagina
$desc = “Vivere nell’era digitale..”; // descrizione
if(is_single() || is_page()){
$desc = cut($post->post_content, 25);
}elseif(is_category()){
$desc = strip_tags(category_description());
}
$desc = str_replace(array(“\n”,”\r”,”\t”), ” “, $desc);
$desc = str_replace(‘”‘, “‘”, $desc);
$desc = trim($desc);
// Genero il titolo della pagina
$title = “jasonfweb”; // nome del tuo blog
if(is_single() || is_page()){
$title = str_replace(‘”‘, “‘”, $post->post_title);
}
// Genero l’immagine di anteprima
$thumb = “http://www.jasonfweb.com/wordpress/wp-content/themes/lightword/images/header-image.png”; // thumb
if(function_exists(“str_img_src”) && is_single()){
$thumb = str_img_src($post->post_content);
}
echo ” . “\n”;
echo ” . “\n”;
echo ” . “\n”;
echo ” . “\n”;
echo ” . “\n”;
echo ” . “\n”;
}
add_action(‘wp_head’, ‘add_meta_tag’);
funzione cut non definita, quando visualizzo i post
Si, in effetti la funzione non è definita.
Per fare un semplice test di funzionamento prova a sostituire…
$desc = cut($post->post_content, 25);
con…
$desc = substr($desc,0,25);
Poi potrai affinare la cosa andando a “tagliare” la stringa in corrispondenza di uno spazio per non segare qualche parola della descrizione a metà
Ooops! Sorry… sostitusci con $desc = substr($post->post_content,0,25);
Altra dimenticanza mia… Devo stare più attento quando scrivo queste guide!
La funzione cut è definita in questo articolo, fate copia e incolla. Magari appena ho tempo faccio un file con tutto lo script completo, da scaricare sotto forma di plugin!
Ciao, bellissimo articolo!
Sto testando il tutto sul mio trascuratissimo blog…
se non ho sbagliato qualcosa l’ultima riga della funzione add_meta_tag() non dovrebbe essere add_action(‘wp_head’, ‘add_meta_tag’)?
Grazie e alla prossima.
Opsss! Giustissima osservazione, mi ero dimenticato un pezzo! Ho corretto, chiedo scusa ^^
Ciao, io ho utilizzato un plugin per WordPress! Funziona tutto tranne la possibilità di visualizzare le pagine fantasma tra le pagine di cui sono amministratore! Il plugin usato è Facebook like button di Jonsson dove c’è anche uno spazio per l’inserimento dell’Admin. Ho usato la modalità iFrame forse è questo il problema?
Incredibile. Neanche il tempo di porre la domanda che hanno localizzato il tutto, in automatico.
Ehehe, guarda che era già tutto localizzato fin dall’inizio. Infatti se vedi l’immagine che ho inserito all’interno dell’articolo c’è scrito “Mi piace”.
scusate ma io lo vedo in inglese
sbaglio qualcosa?
ho inserito la funzione aggiungi_like nel file function.php e alla fine del post il seguente codice:
dove sbaglio?
Prova a guardare la risposta che ho scritto a Giulio….
Ma quando sarà possibile averlo in italiano? Quindi “mi piace” invece di “like”?
How do I display the Like button in different languages?
If you are using the XFBML version include the language code when you instantiate the library. Replace ‘en_US’ in this line with the correct locale code:
‘//connect.facebook.net/en_US/all.js’;
If you are using the Iframe version include a locale parameter with the proper country code in the src URL. Example:
src=”http://www.facebook.com/widgets/like.php?locale=fr_FR&…”
You may need to adjust the width of the Like button to accommodate different languages.
Ti riporto ciò che dice facebook a riguardo
magari potrebbe essere utile
continuo a non capire!!!
Ottimo articolo, complimenti. Come riesci a far “convivere” i social plugins con XFBML con il facebook connect di plugin per i commenti, come ad esempio Intense Debate?
Ciau!
Semplicemente non li faccio convivere: ho Facebook Connect, ma uso la versione IFRAME dei Social Plugins, non XFBML.
Intensa Debate non l’ho mai usato, non saprei dirti…
grazie per l’articolo molto chiaro. ho inserito il button. vediamo se rimane o se mi stufo dopo un po’.
Ottimo!