Facebook Open graph e Thesis Theme: una guida per ottimizzare Like sotto wordpress

by Published On: Giugno 24th, 2010Categorie: Facebook: articoli storici dal 2007 al 2016

La guida di oggi spiega come integrare Open Graph con il tema Thesis di WordPress. Ho già parlato sia dei vantaggi del pulsante Like/Mi piace con il protocollo Open Graph, e ho anche creato un mini howto per integrare Open Graph sotto WordPress.

Thesis è un Framework di WordPress SEO ready, che consente di effettuare moltissime modifiche in modo potente, facile e veloce, soprattutto per chi non è un esperto di programmazione.

Con questa guida spiego come integrare il protocollo Open Graph per chi usa il tema Thesis.

Se cerchi una guida specifica per il tema Thesis WordPress Theme sei nel posto giusto. In questa guida opereremo esclusivamente su un unico file e precisamente custom_functions.php contenuto nella cartella function di thesis.

Se invece sei entrato cercando una guida per inserire il pulsante like di Facebook in WordPress e integrare un tema generico in Open Graph, clicca qui: questa guida vale per ogni tema di WordPress.

Procediamo per step:

Preambolo: prepariamo il nostro blog all’installazione di Open Graph

Come per la guida su WordPress, consiglio di fare sempre una copia di backup preventiva in modo tale da poter tornare indietro in caso di problemi.

Modifichiamo  l’elemento <html> tramite i filtri di Thesis

modifichiamo il tag di apertura dell’elemento in modo tale da consentire il corretto funzionamento di Open Graph in ogni browser, facendo in modo che si aggiunga al tag il seguente attributo: xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml

I filtri di Thesis ci consentono di farlo in un attimo. Basta aggiungere questo codice dentro il file custom_functions.php.

add_filter(‘language_attributes’, ‘add_fb_xml_ns’);
function add_fb_xml_ns($content) {
return ‘xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml” ‘ . $content;
}

Ora aprite qualsiasi pagina del vostro blog, guardate il codice sorgente e vi accorgerete che il tag di apertura <html> contiene le stringhe del filtro.

Facebook Like

Facebook Like

Inseriamo ora i meta data di Open Graph

Inseriamo ora i meta data di OpenGraph facendo in modo che siano popolati in modo automatico dai post del nostro blog. Sfruttiamo gli Hook di Thesis.

Tramite il seguente hook, saremo in grado di produrre gli adeguati metadata per ogni post, per ogni categoria e per l’homepage del vostro blog.

Aggiungiamo il seguente Hook all’interno del file custom_functions.php di Thesis:

//THESIS METADATA OPEN GRAPH
function custom_header_meta() {
?>
<meta property=”fb:admins” content=”id-dello-amministratore”/>
<meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>” />
<meta property=”og:country-name” content=”vostra-nazione“/>
<meta property=”og:email” content=”[email protected]“/>
<meta property=”og:url” content=”<?php
if(is_single()){
the_permalink(); } else {echo(‘http://www.example.com‘); }; ?>”/>
<?php if (is_single()) { global $post;
$post_image = get_post_meta($post->ID, ‘thesis_post_image’,$single=true); ?>
<meta property=”og:title” content=”<?php single_post_title(”); ?>” />
<meta property=”og:description” content=”<?php
$desc_bzs = strip_tags(stripslashes(get_post_meta($post->ID, ‘thesis_description’, true)));
if (!empty($desc_bzs))
echo $desc_bzs;
else
echo get_the_excerpt();
?>” />
<meta property=”og:image” content=”<?php bloginfo(‘template_url’); ?>/lib/scripts/thumb.php?src=<?php echo $post_image ?>&amp;w=50&amp;h=50&amp;zc=0&amp;q=100″/>
<link rel=”image_src” href=”<?php bloginfo(‘template_url’); ?>/lib/scripts/thumb.php?src=<?php echo $post_image ?>&amp;w=50&amp;h=50&amp;zc=0&amp;q=100″/>
<meta property=”og:type” content=”article” />
<?php } else { ?>
<meta property=”og:description” content=”<?php bloginfo(‘description’); ?>” />
<meta property=”og:type” content=”blog” />
<meta property=”og:image” content=”<?php bloginfo(‘template_url’); ?>/custom/images/logo-del-blog.png“/>
<meta property=”og:title” content=”<?php bloginfo(‘name’); ?>” />
<?php }
}
add_action(‘wp_head’, ‘custom_header_meta’);

Facciamo ora le personalizzazioni

  1. Id-dello-amministratore. si tratta del tuo ID di Facebook o di chi amministrerà il blog e vedrà le statistiche. Può essere più di una persona. Per ricavarlo è sufficiente:
    1. entrare nel proprio profilo
    2. fare click sulla foto del proprio profilo
    3. nell’url trovare la parte che inizia come &id=123456789
    4. Quel numero di 9 cifre è il profilo di Facebook
  2. Nazione: Dove c’è la vostra nazione, inserite la nazione in cui risiedete (nel mio caso in Italia). Nonè obbligatorio, ma se volete un po’ di Geotagging, aiuta.
  3. indirizzo-email: qui ci mettete il vostro indirizzo email.
  4. www.example.com: al posto di www.example.com mettete l’indirizzo del blog.
  5. logo-del-blog.png Mettete il logo del vostro blog

Ora Thesis è pronto per il protocollo Open Graph. Per verificare se tutto funziona in modo corretto, aprite il vostro blog e puntatelo rispettivamente verso:

  • L’homepage
  • Un post senza immagine predefinita
  • Un post con immagine predefinita
  • una categoria

Per ogni pagina controllate che nel codice sorgente vi siano i meta tag: per testare Open Graph è sufficiente utilizzare Facebook Url Linter, il  servizio di Facebook che vi consente di validare il vostro codice Open Graph e capire se i meta tag inseriti nelle pagine del nostro blog dialogano in modo corretto con Facebook e gli altri Social Network.

Inserite ora i vostri Social Plugins di Facebook

Ora che Open Graph è inserito, potete se non l’avete già fatto, inserire i vostri social plugins di Facebook. Li trovate qui.

Ottimizzazione di Open Graph

In fondo alla guida sull’ottimizzazione di Facebook Like attraverso Open Graph nei blog di WordPress, ho inserito alcuni consigli e link sui meta data di Open Graph e altre cose. Vi consiglio di guardarla.

Se ci sono cose non chiare, suggerimenti, modifiche, parliamone nei commenti. :-D

Pubblicazioni

Enrico Giubertoni, I social nella Cosmesi, Tecniche Nuove Editore

Categories

Collaborazioni istituzionali

Mentore Mib Master in International Business at Università Cattolica del Sacro Cuore di Gesù