Guida: integrare il tuo blog sotto WordPress in Facebook integrando le potenzialità offerte da Open Graph

Questa guida insegna ad inserire i post del tuo blog su piattaforma WordPress nel Social Graph, aumentando in questo modo le funzionalità di Facebook, tramite il protocollo Open Graph.

Implementare il protocollo Open Graph ti consente di trasformare le tue pagine web in oggetti che consentono una interazione con i social media ed in particolare Facebook.

Tramite Open Graph, sarai inoltre in grado di vedere le statistiche di utilizzo delle interazioni sociali (le pressioni del pulsante Mi piace/Like, le condivisioni, i commenti, altro …) tramite le nuove statistiche di Facebook, chiamate Facebook insights.

Se vuoi saperne di più sui vantaggi offerti dal Protocollo Open Graph, dal Social Graph, ti consiglio di leggere questo post dal mio blog.

Integrare Open Graph nel tuo blog è semplicissimo dato che

questo protocollo  si basa su semplicissimi meta data che consentono delle operazioni aggiuntive (come un migliore inserimento all’interno di Facebook) al pulsante Like in particolare e più in generale ai Social plugins di Facebook.

Per rendere sociale il tuo blog facendolo diventare tramite il protocollo di Open Graph, parte del Social Graph,  hai quindi bisogno di due requisiti:

  1. La presenza del pulsante “mi piace” alias Like e più in generale dei Social plugins di Facebook
  2. La presenza di alcuni Metadata da inserire nell’elemento <head> … </head> del template del tuo blog sotto piattaforma WordPress.

Per chi vuole fare le cose molto velocemente, esiste un plugin realizzato da Sociable.es che consente l’integrazione di Facebook nel proprio blog. Ma, se vuoi avere un controllo maggiore, puoi integrare OpenGraph e Facebook a mano, con queste semplici operazioni.

Integrare Like in Facebook tramite Open Graph

Integrare Like in Facebook tramite Open Graph

Preambolo: operazioni preliminari all’inserimento di Open Graph.

Per inserire Open Graph nel tuo blog è necessario  fare un bel backup preventivo dei tuoi file, del tuo database e in particolare del tuo template. In questo modo, se qualcosa va male, potrai immediatamente tornare indietro allo stato originale.

Ti consiglio inoltre di lavorare su un server di prova sul tuo PC (tramite XAMPP o altro) prima di uscire in produzione:

Il codice qui di seguito riportato è stato da me testato su WordPress ver 2.9 e controllato su WordPress 3.0.: questo codice potrebbe contenere degli errori e imperfezioni, ricordati quindi che l’implementazione in toto o in parte di questo codice viene fatta sotto la tua totale responsabilità e nulla può essere imputato al sottoscritto.

Visto che questa è una guida condivisa sotto licenza CC ed è un lavoro collettivo, se segnali errori e/o migliorie nei commenti o nella rete, sarò felice di incrementare e correggere. In fondo, condividendo ci guadagnamo tutti :-D

Modifichiamo  l’elemento <html>

Per prima cosa modifichiamo il tag di apertura dell’elemento <html> in modo tale da consentire il corretto funzionamento di Open Graph in ogni browser.

  • Modifichiamo il file che contiene il tag <html>. Generalmente è contenuto nel file header.php contenuto nel  percorso wp-content/themes/nome del tuo tema/header.php
  • Individuiamo il tag <html <?php language_attributes(); ?> >
    Potrebbe essere differente a seconda del tema: l’importante è che ci sia un tag di apertura dell’elemento <html>
  • prima della chiusura del tag, inseriamo questo codice xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml
  • Otterremo grosso modo il seguente risultato

<html <?php language_attributes(); ?>  xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”>

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.

Sempre all’interno del file header.php individuiamo l’elemento <title>…</title> al di sotto di questo (dopo il tag title di chiusura) inseriamo questo codice:

<meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>” />
<meta property=”og:country-name” content=”Italy”/>
<meta property=”og:email” content=”[email protected]“/>
<meta property=”og:image” content=”<?php bloginfo(‘stylesheet_directory’); ?>/custom/images/immagine-del-tuo-logo.png“/>
<meta property=”og:url” content=”<?php
if(is_single()){
the_permalink(); }
else { echo get_option(‘home’);  }; ?>”/>
<?php if (is_single()) { ?>
<meta property=”og:title” content=”<?php single_post_title(); ?>” />
<meta property=”og:description” content=”<?php echo substr(strip_tags($post->post_content), 0, 140).’

[…]’;?> ” />
<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:title” content=”<?php bloginfo(‘name’); ?>” />
<?php }; ?>

Nota Bene: Dobbiamo sostituire alla voce /custom/images/immagine-del-tuo-logo.png, il percorso al logo del nostro blog.

Allo stesso modo dobbiamo sostituire all’indirizzo [email protected], il nostro indirizzo email. Se non vogliamo un indirizzo email, basta cancellare quel meta tag

Con questo codice, otterremo i metatag indispensabili per inserire le nostre pagine in Open Graph.

Inseriamo il pulsante Mi Piace alias Like

Ecco la parte più semplice del gioco. Per inserire il pulsante mi piace prelevateli dalla pagina di Facebook dedicata al pulsante Like e ai social plugins per ottenere il codice che incollerete in uno qualsiasi dei vostri Widget.

Testiamo il tutto

Per testare Open Graph è sufficiente utilizzare Facebook Url Linter.

Facebook Url Linter è un 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

Se tutto va bene, avrete ottenuto i vantaggi di Open Graph ovvero:

  • La vostre pagine saranno inserita in modo più efficcace attraverso un riquadro all’interno di Facebook
  • Potrete vedere le interazioni che accadono all’interno del vostro sito tramite Facebook Insights
  • Potrete anche mandare dei messaggi alle persone che hanno gradito il vostro blog.

Io ho inserito i metadata più comuni per un blog sotto wordpress. Ma Open Graph è un protocollo che serve ogni tipologia di sito e che consente la geolocalizzazione di post, articoli, negozi, pagine web e molto altro.

Segnalo quindi i seguenti link secondo me molto utili:

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ù