Ci sono centinaia di plugin, moduli e componenti che aggiungono tag opengraph di Facebook ai tuoi articoli, ma è davvero necessario aggiungere un'estensione per il bene di un paio di meta tag?
Ovviamente no, a patto che sai quello che stai facendo, andare a modificare direttamente i file di joomla potrebbe provocare il rischio di compromettere il tuo sito.
Un tempo Facebook ignorava i meta tag standard e voleva uno specifico tag opengraph con il titolo e la descrizione della pagina.
Ora, dopo un pò di prove l'unico tag necessario è il tipo di sito, tutto il resto viene raccolto dai metadati standard.
Diciamo che potrebbe andare bene così, ma non verrà visualizzato correttamente il link (tipo potrebbero essere assenti le immagini di anteprima, la descrizione ecc).
Quindi aggiungeremo alcuni tag così da rendere il link con una visulazzazione molto piu professionale.
I tag standard per qualsiasi elemento grafico sono questi:
- fb:app_id
- og:type
- og:url
- og:title
- og:image.
L'id dell'app non è necessario nel nostro caso e toricamente (!) per quanto riguarda l'URL se viene omesso verrà utilizzato l'URL della pagina, per il titolo, Facebook utilizzerà il titolo della pagina, per l'immagine omessa verrà presa direttamente dalla pagina (comunque nel mio caso non è stato così).
Quindi, l'unico tag per ora indispensabile è il tag type:
<meta property = "og: type" content = "article" />Di seguito i parametri di cui sappiamo o dovremmo già sapere i valori:
- Type sarà impostato come "article" anche se ho visto persone che usano "blog", ma non c'è nessuna documentaione ufficiale e il link viene visualizzato come articolo.
- Il tag dell'autore che richiede un ID di Facebook. Puoi trovare il tuo ID Facebook andando su https://graph.facebook.com/nomeutente. (P.S.: puoi aggiungere più ID separati da virgola)
- Per quanto riguarda la lingua è la lingua del sito joomla (puoi impostarla utilizzando il tag di lingua breve di joomla per i siti multilingue, tipo italiano è it_IT) e
- L'amministratore è di nuovo l'ID di Facebook (ti consentirà di vedere le statistiche sulla pagina in Facebook).
Le altre informazioni le otteniamo in automatico inserendo codice php all'interno del file di layout degli articoli.
Il layout del singolo articolo è in questo path /html/com_content/article/default.php, conviene però fare un override dal template, l'ovverride è in /com_content/views/article/tmpl/default.php in questo file ci metteremo i valori che verranno estratti in automatico:
JHtml :: _ ('date', $ this-> item-> publish_up, JText :: _ ('DATE_FORMAT_LC4'))); // data di pubblicazione nel formato corretto
JHtml :: _ ('data', $ this-> item-> modified, JText :: _ ('DATE_FORMAT_LC4'))); //data modificata
JHtml :: _ ('date', $ this-> item-> publish_down, JText :: _ ('DATE_FORMAT_LC4'))); //data di scadenza
$ this-> escape ($ this-> item-> category_title); //Nome della categoria
$ images-> image_fulltext // immagine in primo pianoDobbiamo utilizzare il formato della data LC4, che genera questo formato: aaaa-mm-gg.
Per utilizzare le date dobbiamo anche fornire una scadenza, quindi mettiamo l'anno 3000 così, tanto per andare sul sicuro.
Come detto prima, useremo le info che ci da joomla per reperire i valori dei metatag $ this-> item-> metakey per usare le meta keywords.
Ora che abbiamo tutto non ci resta che mettere il codice in testa al file default.php.
Attenzione!!! la variabile $images prenderà il valore "$this->item->images" solo dopo l'inizializzazione dell'helper quindi non bisogna incollare il codice proprio nella riga 1, io l'ho messo partendo dalla riga 26, dopo "JHtml::_('behavior.caption');":
.
.
.
$user = JFactory::getUser();
$info = $params->get('info_block_position', 0);
// Check if associations are implemented. If they are, define the parameter.
$assocParam = (JLanguageAssociations::isEnabled() && $params->get('show_associations'));
JHtml::_('behavior.caption');
//<-----------------------qua, sotto il codice:
//add facebook tags
$images = json_decode($this->item->images);
$doc = JFactory::getDocument();
$description = $doc->getDescription();
$fbog = "\n".'<meta property="og:site_name" content="M02 website"/>'."\n";
$fbog .= '<meta property="og:title" content="'.$this->item->title.'"/>'."\n";
$fbog .= '<meta property="og:description" content="'.$description.'"/>'."\n";
$fbog .= '<meta property="og:url" content="https://'.($_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'"/>'."\n";
$fbog .= '<meta property="og:type" content="article"/>'."\n";
$fbog .= '<meta property="og:author" content="12345678901234567890"/>'."\n";
$fbog .= '<meta property="og:locale" content="it_IT"/>'."\n";
if (isset($images->image_fulltext) && !empty($images->image_fulltext)) {
$fbog .= '<meta property="og:image" content="'.JURI::base().$images->image_fulltext.'" />' ."\n";
}
$fbog .= '<meta property="fb:admins" content="12345678901234567890">'."\n";
$fbog .= '<meta property="article:published_time" content="'.JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC4')).'" />'."\n";
$fbog .= '<meta property="article:modified_time" content="'.JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC4')).'" />' ."\n";
if ($this->item->publish_down != '0000-00-00 00:00:00') {
$fbog .= '<meta property="article:expiration_time" content="'.JHtml::_('date', $this->item->publish_down, JText::_('DATE_FORMAT_LC4')).'" />' ."\n";
}else{
$fbog .= '<meta property="article:expiration_time" content="3000-01-01" />' ."\n";
}
$fbog .= '<meta property="article:section" content="'.$this->escape($this->item->category_title).'" />' ."\n";
$doc->addCustomTag($fbog);
//fine add fb
Fatto ciò andiamo ad analizzare la pagina di un articolo a caso in html per verificare se il codice risponde correttamente:
.
.
.
<meta property="og:site_name" content="M02 website"/>
<meta property="og:title" content="Joomla! - Bla bla bla"/>
<meta property="og:description" content="Bla Bla bla"/>
<meta property="og:url" content="https://www.m02.org/howtos/cms/joomla"/>
<meta property="og:type" content="article"/>
<meta property="og:author" content="12345678901234567890"/>
<meta property="fb:admins" content="12345678901234567890"/>
<meta property="og:image" content="https://www.m02.org/immagini/pincopallo.png" />
<meta property="og:locale" content="it_IT"/>
<meta property="article:published_time" content="04-01-2021" />
<meta property="article:modified_time" content="11-01-2021" />
<meta property="article:expiration_time" content="3000-01-01" />
<meta property="article:section" content="Joomla!" />
.
.
.Ok siamo pronti per verificare se facebook visualizza tutto, in caso di errore e di verifica andare sul debugger di fb a questo indirizzo, verrà mostrato tutto ciò che legge fb dal nostro link:
https://developers.facebook.com/tools/debug/