Il CMS Joomla! non prevede, di default, la presenza dei meta tag Open Graph, che per esteso diventa Facebook Open Graph Protocol. Esistono tante estensioni, gratis ed a pagamento, in Joomla Extensions Directory che assolvono a tale compito.
Lo scopo dell'articolo odierno, invece, è quello di aggiungere Facebook Open Graph Protocol in un sito realizzato con Joomla!, senza avvalersi di nessun plugin. Il tutto verrà realizzato attraverso l'override dei files del core di Joomla!
Cosa vuol dire Social Graph e Open Graph
Prima di entrare nel vivo dell'articolo, è importante capire cosa si intende per Social Graph e Open Graph e perchè è necessario che un sito web, sia esso aziendale o personale, oppure un blog, ne faccia parte.
Ogni giorno siamo bombardati da termini quali social, plugin di Facebook, bottoni sociali ecc...
Conosciamo il vero significato? Sappiamo cosa accade realmente quando condividiamo un articolo, mettiamo un like su un profilo di un nostro amico su Facebook o qualsiasi altra piattaforma social?
Il significato di Social Graph
Social Graph, tradotto in italiano, sta per Grafo Sociale. Facendo un passo indietro, vediamo cosa si intende per Grafo.
Un grafo è una struttura matematica formata da un insieme di punti (vertici o nodi) e un insieme di linee (archi) che uniscono coppie di nodi. In altri termini, il grafo è un insieme in cui è definita una relazione di qualunque tipo tra differenti entità e gruppi.
Non è molto chiaro, lo so :-)
Applichiamo la spiegazione di grafo alla quotidiana comunicazione sociale.
Cosa avviene quando comunichiamo in un social network? Quali dinamiche scaturiscono?
Un Social Network è una rete sociale di relazioni composte da individui ed organizzazioni che vengono definiti nodi.
Ognuno di questi nodi ha dei legami con altri nodi. E via dicendo.
La connessione tra tutte queste relazioni, vale a dire che un soggetto (nodo) comunica e si scambia informazioni con un altro nodo, prende il nome di Social Graph.
Il significato di Open Graph
Perché Facebook ha inventato un protocollo aperto chiamato Open Graph?
The Open Graph protocol è il protocollo che permette ad ogni singola pagina web di interagire con un social network in maniera bidirezionale.
Grazie ad Open Graph, un Like messo su una pagina web, se questa contiene i pulsanti di Facebook, consente di diventare partner di una conversazione sociale.
Concludiamo questa parte teorica, sperando che sia stata utile ed abbia aiutato a capire i due termini cardine, con una immagine.
Questa immagine mostra i diversi tipi di relazione tra oggetti sociali.
L'utente Eva è amica di Adam e Kate, sebbene Adam e Kate non siano connessi tra di loro.
La foto di Peter ha ricevuto Likes da molti utenti, tra cui Eva. Inoltre, Eva ha ascoltato musica dalla radio Last.fm ed ha guardato video da YouTube.
Delle azioni di Eva, come è facile dedurre, ne sono a conoscenza i suoi contatti.
Come funziona Open Graph
Open Graph è un protocollo che rispecchia la specifica RDF (Resource Description Framework), in quanto include i meta-tag nella pagina. Inoltre consente a ciascuna pagina presente nel web di essere rappresentata come un oggetto, contenente alcune proprietà chiave e di conseguenza viene inclusa nel Grafo Sociale.
Grazie ad Open Graph è possibile fornire informazioni che dovranno apparire su Facebook nel momento in cui la nostra pagina verrà condivisa.
Implementare i nodi di Open Graph
Per fare in modo che una pagina web diventi un oggetto in grado di entrare a far parte del "grafo sociale", è necessario inserire una serie di meta-tag all'interno del tag <head> della pagina stessa, con informazioni specifiche richieste dal protocollo.
I meta-dati possono appartenere a diverse categorie:
- meta-dati di base
- meta-dati opzionali
- meta-dati strutturati
I meta-dati di base
Appartengono a questa categoria i meta-dati obbligatori per qualsiasi tipo di oggetto. Essi sono:
| meta-dato | Descrizione |
|---|---|
| og:title | rappresenta il titolo dell'oggetto all'interno del "grafo sociale" |
| og:type | il tipo di contenuto dell'oggetto nel Social Graph |
| og:image | url dell'immagine che rappresenta l'oggetto. Essa specifica un'immagine per un'anteprima di alta qualità. |
| og:url | URL canonico dell'oggetto (la pagina web) nel Social Graph. Deve essere semplice e non contenere variabili per la sessione, parametri che identificano l'utente o contatori |
Per quanto riguarda i meta-dati obbligatori appena descritti, di seguito viene presentata l'immagine di un articolo del mio sito, così come viene visualizzata nella mia pagina Facebook.
- og:title: definisce il titolo della pagina web che viene condivisa
- og:type: definisce il tipo di oggetto che verrà creato nel Social Graph (sito web, articolo, video, brano musicale, ecc...)
- og:url: indica l'URL canonica della pagina web che viene condivisa (URL canonica: è la URL univoca che identifica solo "quella" risorsa nel web)
- og:image indica la URL assoluta dell'immagine che rappresenterà la pagina specifica nel Social Graph
I meta-dati opzionali
Fanno parte dei meta-dati opzionali, quegli elementi che rendono "più ricco" l'oggetto da condividere nel Social Graph. Essi sono:
| meta-dato | Descrizione |
|---|---|
| og:description | una breve descrizione dei contenuti. Sarà visualizzata sotto il titolo del post su Facebook. |
| og:determiner | l'articolo che appare prima del titolo dell'oggetto in una frase (accetta solo 'a', 'an', 'the', ' "" ', o 'auto') |
| og:locale | la lingua di riferimento dell'oggetto nel Social Graph |
| og:locale:alternate | altre lingue, eventualmente presenti, nella pagina |
| og:site_name | il nome del sito web che contiene l'oggetto Open Graph |
| og:audio | URL di un file audio che rappresenta l'oggetto nel Social Graph |
| og:video | URL di un file video che rappresenta l'oggetto nel Social Graph |
I meta-dati strutturati
Possiamo immaginare i meta-dati strutturati come una descrizione più specifica e dettagliata di un determinato oggetto. Essi si suddividono in ulteriori sottocategorie, appartenenti a:
- Immagini
- Video
- Audio
I meta-dati strutturati per le immagini
| meta-dato | Descrizione |
|---|---|
| og:image:secure_url | URL https:// dell'immagine |
| og:image:type | Tipo MIME dell'immagine. Può essere image/jpeg, image/gif o image/png |
| og:image:width | larghezza dell'immagine in pixel, per garantirne il corretto caricamento durante la prima condivisione |
| og:image:height | altezza dell'immagine in pixel, per garantirne il corretto caricamento durante la prima condivisione |
I meta-dati strutturati per i video
| meta-dato | Descrizione |
|---|---|
| og:video:secure_url | URL protetto del video. E' consigliabile includerlo anche se si imposta l'URL protetto in og:video |
| og:video:type | tipo MIME del video. Può essere application/x-shockwave-flash o video/mp4 |
| og:video:width | larghezza del video in pixel. Questa proprietà è obbligatoria per i video |
| og:video:height | altezza del video in pixel. Questa proprietà è obbligatoria per i video |
I meta-dati strutturati per oggetti di tipo audio
| meta-dato | Descrizione |
|---|---|
| og:audio | URL del file audio. E' consigliabile includerlo anche se si imposta l'URL protetto in og:audio:secure_url |
| og:audio:secure_url | URL protetto del file audio |
| og:audio:type | identifica l'estensione o formato del file |
Dopo questa spiegazione dei più importanti meta dati per la condivisione degli "oggetti" nel Social Graph, vedremo adesso come fare per aggiungere il Facebook Open Graph Protocol in un sito web realizzato con Joomla!.
Va precisato che i files interessati sono due:
- file index.php del template in uso
- file default.php del componente com_content
Aggiungere Facebook Open Graph Protocol nel file index.php del template di Joomla!
Trasferire sul desktop il file index.php, via FTP, dalla cartella templates/Nome_Template_In_Uso, situato nella directory di installazione di Joomla!
Aprirlo con un editor di testo ed individuare, all'inizio del codice, il seguente rigo:
defined('_JEXEC') or die;
Subito dopo devono essere scritte delle variabili che in seguito verranno "richiamate" dai meta-dati di Facebook. Le variabili sono:
$doc = JFactory::getDocument();
$app = JFactory::getApplication();
$sitename = $app->get('sitename');
$page_title = $doc->getTitle();
$description = $doc->getDescription();
$input = JFactory::getApplication()->input;
$view = $input->get('view');
Immediatamente dopo questo blocco di variabili, passiamo ad implementarle nei meta-dati del protocollo Open Graph.
//Add meta-data Facebook Open Graph Protocol
$doc->addCustomTag('
<meta property="og:site_name" content="'.$sitename.'" />
<meta property="og:title" content="'.$page_title.'" />
<meta property="og:url" content="'.JURI::current().'" />
<meta property="og:type" content="'.$view.'"/>
<meta property="og:description" content="'.$description.'" />
<meta property="og:locale" content="it_IT" />
');
Tutti questi meta-dati, anche se sono stati scritti nel file index.php, li ritroveremo anche nel codice HTML dell'articolo vero e proprio.
Si potrebbe obiettare che tra questi che ho scritto manca il meta-dato og:image. Giusto. Ma quel meta-dato lo si dovrà inserire nel file default.php del componente com_content.
Aggiungere Facebook Open Graph Protocol nel file default.php del componente com_content di Joomla!
Chi ha già effettuato l'override di qualche file del core di Joomla!, sicuramente avrà una cartella denominata html al seguente percorso:
/templates/Nome_Template_In_Uso/html
Per chi, invece, è sprovvisto della suddetta cartella, nessun problema. Si procederà con l'override. Operazione che permette di sovrascrivere un file di Joomla!, senza andare ad intaccare l'originale del core del CMS.
Entrare in amministrazione di Joomla! e dal menu amministrativo selezionare:
Estensioni ⇒ Template ⇒ Lista template
Individuare il template in uso e fare clic su: Nome_Template Dettagli e File.
Nella schermata successiva, zona in alto a sinistra, ci sono tre TAB. Selezionare su Crea override.
Nella seconda colonna ⇒ Componenti - fare clic su com_content e poi su article.
Dovrà apparire il messaggio:
Override creato in /templates/Nome_Template_In_Uso/html/com_content/article
Override creato.
Via FTP portarsi in:
/templates/Nome_Template_In_Uso/html/com_content/article
All'interno della cartella article ci saranno due files:
- default.php
- default_links.php
A noi interessa il primo. Se volessimo apportare qualsiasi modifica al file default.php, non intaccheremo minimamente il file omonimo pricipale di installazione.
Trasferire default.php, via FTP, sul nostro desktop.
Subito dopo il codice:
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
sono già presenti le seguenti righe:
$params = $this->item->params;
$images = json_decode($this->item->images);
$urls = json_decode($this->item->urls);
$canEdit = $params->get('access-edit');
$user = JFactory::getUser();
$info = $params->get('info_block_position', 0);
Dovremo fare la stessa operazione come per il file index.php, vale a dire aggiungere delle variabili che ci serviranno per visualizzare i meta-dati per Facebook Open Graph Protocol.
Dopo l'ultimo rigo:
$info = $params->get('info_block_position', 0);
scriveremo:
$doc = JFactory::getDocument();
$config = JFactory::getConfig();
$app = JFactory::getApplication();
$sitename = $app->get('sitename');
prima di:
JHtml::_('behavior.caption');
Subito dopo aggiungeremo i meta-dati per Facebook Open Graph Protocol.
if (isset($images->image_fulltext) && !empty($images->image_fulltext)) {
$OpenGraph .= '<meta property="og:image" content="'.JURI::base().$images->image_fulltext.'" />';
}
if (isset($images->image_fulltext) && !empty($images->image_fulltext)) {
$OpenGraph .= '<meta property="og:image:width" />';
}
if (isset($images->image_fulltext) && !empty($images->image_fulltext)) {
$OpenGraph .= '<meta property="og:image:height" />';
}
$OpenGraph .= '<meta property="article:section" content="'.$this->escape($this->item->category_title).'" />';
$OpenGraph .= '<meta property="article:publisher" content="https://www.facebook.com/Nome_Pagina_Facebook" />';
$doc->addCustomTag($OpenGraph);
Seguendo lo schema appena visto, è semplice aggiungere altri meta-dati Facebook Open Graph Protocol.
Salvare entrambi i files e trasferirli, rispettivamente, in:
/templates/Nome_Template_In_Uso/index.php/templates/Nome_Template_In_Uso/html/com_content/article/default.php
Aggiornare il frontend del sito e, come prova, osservare la pagina di un articolo appartenente alla categoria Blog.
Accertarsi innanzitutto che i meta-dati siano presenti e controllare se sono stati popolati in maniera corretta.
Conclusioni
Aggiungere Facebook Open Graph Protocol in un sito web è fortemente consigliato per chi realizza o gestisce siti aziendali, personali e blog.
Si deve tener presente che questo protocollo non viene "monitorato" solo da Facebook ma anche da altre piattaforme social, quali: Linkedin, Twitter ecc...
Buona condivisione.