Sul
repository ufficiale di
Wordpress esistono decine di plugin che permettono l'integrazione di Facebook con il nostro blog. Aggiungere la condivisione dei contenuti o integrare la registrazione degli utenti con l'account del social network richiede ormai solo qualche minuto.
Tra le tante possibilità di integrazione a disposizione, la più diffusa (oltre che semplice da implementare) è probabilmente quella del bottone "
Mi piace". Tra l'altro il "Mi piace" è stato difatto accorpato al "Consiglia": entrambe le funzionalità vengono rese con lo stesso codice ma con parametri diversi.
Il bottone "Mi piace" offre il
massimo dei vantaggi se inserito insieme ai metatag del protocollo
Open Graph.
Se volete il massimo controllo sul codice del vostro tema Wordpress potete utilizzare due semplici funzioni per integrare quanto appena discusso senza l'ausilio di alcun plugin. Il bottone "Mi piace" verrà inserito con l'ausilio dell'iframe non con il codice XFBML; questa scelta richiederà meno lavoro perchè non è necessario includere il
Javascript SDK di Facebook.
Nulla però vi vieta di modificare la funzione per utilizzare la sintassi XFBML... a voi la scelta.
Vediamo i semplici passaggi da effettuare.
Modificare il file functions.php
Aprite il file
functions.php e, in un punto qualsiasi, aggiungete queste variabili:
// valori di default
$og_default_page_id = '';
$og_default_app_id = '';
$og_default_admin_id = ''; // richiesto
$og_default_img = ''; // richiesto
$og_default_author = '';
A questo punto aggiungete queste due funzioni:
/* ------------------------------------------------------------------------------ */
/* metatag open graph
/* ------------------------------------------------------------------------------ */
function s_fb_metatag($og_page_id = '',$og_app_id = '',$og_admin_id = '', $og_img = '', $og_author = '') {
global $post, $og_default_page_id, $og_default_app_id, $og_default_admin_id, $og_default_img, $og_default_author;
if (trim($og_page_id) == '') $og_page_id = $og_default_page_id;
if (trim($og_app_id) == '') $og_app_id = $og_default_app_id;
if (trim($og_admin_id) == '') $og_admin_id = $og_default_admin_id;
if (trim($og_img) == '') $og_img = $og_default_img;
if (trim($og_author) == '') $og_author = $og_default_author;
if ($og_author == '') {
// parte relativa all'autore
$og_author = get_the_author_meta('first_name', $post->post_author). ' ' .get_the_author_meta('last_name', $post->post_author);
if (trim($og_author) == '')
$og_author = get_the_author_meta('nickname', $post->post_author);
}
$og_sname = get_bloginfo('name');
$og_title = (is_single() || is_page()) ? single_post_title('', false) : get_bloginfo('name');
$og_url = (is_single() || is_page()) ? get_permalink() : get_option('home');
$og_author = (is_single() || is_page()) ? $og_author : '';
$og_type = (is_single() || is_page()) ? 'article' : 'blog';
$og_desc = (is_single()) ? substr(preg_replace( '/\s+/',' ',strip_tags($post->post_content)),0,500) : get_bloginfo('blogname');
echo <<
\n
DATI;
if (trim($og_author) != '')
echo "\t" . '' . "\n";
if (trim($og_page_id) != '')
echo "\t" . '' . "\n";
if (trim($og_app_id) != '')
echo "\t" . '' . "\n";
}
/* ------------------------------------------------------------------------------ */
/* condivisione facebook
/* ------------------------------------------------------------------------------ */
function s_fb_likebutton($sfb_ref='none',$sfb_layout='button_count',$sfb_faces='false',$sfb_width='100',$sfb_verb='',$sfb_color='') {
// layout: standard, button_count, box_count
$layout = '';
$width = '';
$verb = '';
$color = '';
if (trim($sfb_layout) != 'standard')
$layout = ' layout=\"' .$sfb_layout. '\" ';
if (trim($sfb_width) != '')
$width = ' width=\"' .$sfb_width. '\" ';
if (trim($sfb_verb) != '')
$verb = ' action=\"recommend\" ';
if (trim($sfb_color) != '')
$color = ' colorscheme=\"dark\" ';
if (trim($sfb_send) != '')
$send = ' send=\"' .$sfb_send. '\" ';
echo '';
}
L'unica personalizzazione da compiere riguarda le 5 variabili di default inserite all'inizio. Vediamole nel dettaglio:
- $og_default_page_id: ID della pagina fan del vostro sito
- $og_default_app_id: ID dell'applicazione relativa al vostro sito
- $og_default_admin_id *: ID della vostra utenza impostata come admin (è possibile inserire più ID separati da virgola)
- $og_default_img *: immagine di default del vostro sito (url completo: http://www.sito.it/immagine.png)
- $og_default_author: se siete l'unico autore del blog potete inserire direttamente il vostro nome altrimenti lasciate vuoto
Le variabili con l'asterisco (*) sono richieste e non possono essere lasciate vuote. Potranno comunque essere sovrascritte quando chiameremo la funzione.
Modificare il file header.php
Per utilizzare i metatag del
protocollo Open Graph è necessario modificare il tag html del vostro tema.
É necessario cambiare:
in
Fatto questo possiamo finalmente richiamare le due funzioni.
Inserimento delle funzioni
La prima va messa tra i tag <head> del tema. É possibile richiamarla senza parametri (verrano presi come default i valori delle 5 variabili viste in precedenza):
La funzione così chiamata stamperà i seguenti metatag:
Questo è il set minimo per attivare le funzionalità Open Graph. Ovviamente "titolo", "url", "descrizione" e "autore" saranno personalizzati quando viene caricata una pagina singola o un post; saranno generici invece per la index, le sezioni di archivio o di categoria.
Come accennato prima, è possibile personalizzare la funzione passando alcuni parametri che sovrascriveranno quelli generici:
- $og_default_page_id
- $og_default_app_id
- $og_default_admin_id
- $og_default_img
- $og_default_author
Se abbiamo tutti i parametri disponibili potremmo chiamare la funzione in questo modo:
e questo sarebbe il risultato:
Attenzione! Anche se impostato correttamente l'autore verrà visualizzato come dato solo nelle pagine singole e nei post.
Bottone mi piace
Con i metatag abbiamo finito. Passiamo all'inserimento del bottone "Mi piace".
Anche in questo caso abbiamo due opzioni: inserire la chiamata a funzione senza aggiungere oppure passare alcuni parametri che ne permettono la personalizzazione.
Nel primo caso, nel punto che più preferito del vostro tema, potete mettere questo codice: