Author:
Loghi Facebook Open Graph Protocol e Joomla!
Integrare Facebook Open Graph Protocol in un sito Joomla!
Extrowebsite Logo

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 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?

è 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, le 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.

Illustrazione Social Graph con nodi e relazioni tra di essi
Social Graph

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.

Articolo pagina Facebook con Facebook Open Graph Protocol
  • 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:

  1. file index.php del template in uso
  2. 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:

EstensioniTemplateLista 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, Google+ ecc...

Buona condivisione.