Sous la version actuelle de Joomla! (3.4.8) les articles n'intègrent pas de meta properties pour Open Graph (facebook) et Twitter Cards à moins d'installer un des nombreux plugins tiers disponibles. Ces éléments importants permettent de mieux contrôler les partages sur les 2 réseaux sociaux. L'ajout de ces propriétés n'est pas bien compliqué, donc je préfère faire cela manuellement plutôt que d'installer un plugin.
Il y a un seul fichier à éditer : components/com_content/views/article/tmpl/default.php.
Mais pour ne pas avoir à ré-écrire cette modification à chaque mise à jour de Joomla!, je commence par copier default.php dans templates/matemplate/html/com_content/article/. C'est une bonne habitude à adopter quand on veut modifier des fichiers core (content, modules, plugins) tout en gardant la possibilité de mettre à jour le système.
Le code à ajouter tient en quelques lignes. On édite bien default.php, mais les lignes $document->addCustomTag($opengraph); et $document->addCustomTag($twittercards); se chargent d'ajouter les éléments à la balise <head>.
// Facebook OpenGrap et Twitter Cards
$document = JFactory::getDocument();
// Facebook OpenGrap
// a tester avec : https://developers.facebook.com/tools/debug/
$opengraph = '<meta property="og:type" content="article">' ."\n";
$opengraph .= '<meta property="og:title" content="'.$this->item->title.'"/>' ."\n";
$opengraph .= '<meta property="og:description" content="'.substr(strip_tags($this->item->text), 0, 250).'...">' ."\n";
$opengraph .= '<meta property="og:locale" content="fr_FR">' ."\n";
$opengraph .= '<meta property="og:site_name" content="Le nom du site">' ."\n";
$opengraph .= '<meta property="og:image" content="'.JURI::base().$images->image_fulltext.'">' ."\n";
$opengraph .= '<meta property="og:url" content="http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'].'"/>'."\n";
// On ajoute les elements a la balise head
$document->addCustomTag($opengraph);
// Twitter Cards
// A valider avec : https://cards-dev.twitter.com/validator
$twittercards = '<meta property="twitter:card" content="summary_large_image">' ."\n";
$twittercards .= '<meta property="twitter:site" content="Le nom du site">' ."\n";
$twittercards .= '<meta property="twitter:title" content="'.$this->item->title.'">' ."\n";
$twittercards .= '<meta property="twitter:image:src" content="'.JURI::base().$images->image_fulltext.'">' ."\n";
$twittercards .= '<meta property="twitter:creator" content="@VotrePseudoTwitter">' ."\n";
// On ajoute les elements a la balise head
$document->addCustomTag($twittercards);
// Facebook OpenGrap et Twitter Cards
Il est à noter que pour og:description, qui contrôle le texte d'introduction de l'article, j'utilise strip_tags pour me débarrasser des éléments html et livrer un texte propre, et substr pour couper le texte. La coupe est gérée par 0, 250 pour prendre 250 caractères à partir du début.
Pour les sites multilingues, on peut aussi dynamiser la propriété og:locale en changeant :
$opengraph .= '<meta property="og:locale" content="fr_FR">' ."\n";
Par :
$opengraph .= '<meta property="og:locale" content="'.$lang->getTag().'">' ."\n";
Après l'intégration, on peut tester et valider avec l'outil de debug facebook et l'outil de validation Twitter.
BLOG COMMENTS POWERED BY DISQUS
