Dans cet article, nous allons discuter de la façon d'ajouter des cartes Facebook Open Graph et Twitter à Joomla sans plugin ou module.
Si vous n'avez pas vécu sous un rocher au cours de la dernière décennie, vous aurez probablement très souvent vu des gens partager des articles sur Facebook avec une belle image et un titre, et une chose similaire sur Twitter avec de grandes jolies cartes montrant un grand image.
La meilleure façon de contrôler cela est d'implémenter ce que l'on appelle le Graphe ouvert protocole. Il s'agit d'un ensemble de balises qui donnent des indices à Twitter, Facebook et autres robots d'exploration sur le contenu à utiliser.
Vous pouvez facilement le faire dans Joomla sans installer une extension tierce en créant un remplacement de modèle.
Voici comment procéder:
Cartes Twitter Joomla
Lors de la mise en œuvre de cartes Twitter à l'aide de balises graphiques ouvertes Joomla - plutôt que d'afficher une image au hasard, ou aucune image du tout, votre article Joomla suggérera la meilleure image à utiliser.
Voir l'exemple ci-dessous de la CollectiveRay fil Twitter.
Exemple de Facebook Open Graph
D'autre part - sur Facebook, en utilisant les balises Joomla Open Graph, vos publications, une fois partagées, ressembleront à celles ci-dessous.
Comment activer les balises Joomla Open Graph
1. Créer un remplacement de modèle pour les articles
Extensions> Modèles> Modèles> Détails et fichiers (votre modèle)> Créer des remplacements> Composants> com_content> article
Une fois que vous avez créé le remplacement de modèle d'article, vous pouvez ajouter les métadonnées au remplacement qui seront utilisées pour afficher votre article. Essentiellement, vous devrez ajouter le contenu suivant à l'article afin que les métadonnées soient extraites de votre article.
2. Ajoutez les métadonnées pour Facebook / Twitter Open Graph
Allez dans Extensions> Modèles> Modèles> (votre modèle) Détails et fichiers> Editeur> html> com_content> articles> default.php
Ajoutez le code ci-dessous en haut entre les balises php: - faites attention à l'endroit où l'ajouter, vous pourriez casser temporairement votre modèle si vous l'ajoutez au mauvais endroit ... alors faites une sauvegarde complète du fichier, avant d'effectuer l'une de ces modifications
if (isset($images->image_intro) and !empty($images->image_intro)){ $timage= htmlspecialchars(JURI::root().$images->image_intro); } elseif (isset($images->image_fulltext) and !empty($images->image_fulltext)){ $timage= htmlspecialchars(JURI::root().$images->image_fulltext);}else{ $timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';}$doc =& JFactory::getDocument();$doc->addCustomTag( ' <meta name="twitter:title" content="'.$this->escape($this->item->title).'"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations"> <meta name="twitter:url" content="'.str_replace('" ','"',JURI::current()).'" <meta name="twitter:description" content="'.strip_tags($this->item->introtext).'"> <meta name="twitter:image" content="'.$timage.'"> <meta property="og:title" content="'.$this->escape($this->item->title).'"/> <meta property="og:type" content="article"/> <meta property="og:email" content="info@dart-creations.com";/> <meta property="og:url" content="'.str_replace('" ','"',juri::current()).'" <meta property="og:image" content="'.$timage.'"/> <meta property="og:site_name" content="DARTCreations"/> <meta property="fb:admins" content="xxxxxxxxxxx"/> <meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>');
3. Personnalisez les balises Open Graph selon vos valeurs
Le code ci-dessus est personnalisé pour CollectiveRay, modifiez donc évidemment les valeurs des éléments que vous souhaitez pour votre propre site.
Voici les lignes que vous devez modifier:
$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
Cela doit être l'emplacement de l'image par défaut, si votre article ne contient pas d'image d'introduction ou d'image en texte intégral.
<meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations">
La valeur @ ci-dessus doit être modifiée pour refléter votre nom d'utilisateur Twitter.
<meta property="og:email" content="info@dart-creations.com";/>
L'adresse e-mail ci-dessus doit être mise à jour avec votre propre adresse e-mail.
Ce qui précède doit être mis à jour avec le nom de votre site.
À la place du xxxxxxxxxxx de la balise fb: admins, vous devrez entrer l'ID numérique de l'utilisateur Facebook qui effectuera des tâches telles que Page Insights. Pour trouver le numéro, vous voudrez peut-être consulter un outil tel que cet outil - trouver mon identifiant Facebook.
Suggestion de lecteur:
Eddie a suggéré que vous puissiez limiter la longueur de la description à un nombre spécifié de caractères si vous utilisez le code ci-dessous:
Vous voudrez peut-être limiter la longueur de la description à c.45 caractères en utilisant mb_strimwidth ou substr comme ceci:
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags ($ this-> item-> introtext), 0,45). '"/>
or
Ed a également fait une deuxième suggestion qui vous permet en fait de choisir les données de la méta description de l'article, ce qui est une très bonne suggestion.
J'ai légèrement modifié le code et j'ai les éléments suivants:
.
Ceci est produit par ce code (la note ">" est supprimée):
<meta property="og:description" content="'.mb_strimwidth(strip_tags ($ doc-> getMetaData ('description')), 0,45, "..."). '"=" "/>
Vous pouvez voir que j'obtiens la méta description, limitée à 45 caractères, et j'ajoute des points de suspension si la description est tronquée. De cette façon, je peux "cliquer sur appât" ma description pour un meilleur CTR tout en gardant mon texte d'introduction lisible en accord avec le "style" ou la "voix" de mon site Web. En utilisant la méta description, je peux également ajouter une partie de ce code à un remplacement pour les catégories aussi!
Un autre lecteur: Thomas Meredith a commenté ci-dessous que le code
était vulnérable aux vulnérabilités XSS et le code correct devrait être:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
Nous avons mis à jour le code avec cette correction et vous devriez faire de même.
Laissez-nous vous aider à mieux gérer votre Joomla
Plus de mises à jour de nos visiteurs
Si vous suivez la conversation ci-dessous, vous constaterez que même si le code ci-dessus fonctionne dans la plupart des situations, il existe des cas spécifiques où le code ne fonctionne pas. Michael de N8 Solutions, a pris sur lui de faire trouver une solution pour les cas où cela ne fonctionnait pas.
Dans l'esprit de la communauté open-source Joomla, ils ont partagé le code avec le reste des visiteurs dans les commentaires ci-dessous. Je reproduis le code et les commentaires de Michael textuellement, pour plus de clarté:
J'ai pu résoudre le problème non seulement pour la page "Contact" mais aussi pour les pages d'élément de menu "Blog" et "En vedette".
Tout d'abord, ce que j'ai écrit ci-dessus pour la page de contact, pour saisir le "nom", le contact est enregistré comme cela fonctionnera. Les "twitter: title" et "og: title" devraient ressembler à ceci si vous souhaitez utiliser le nom enregistré du contact.
<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />
Cependant, si vous souhaitez utiliser les informations du menu, vous pouvez le faire avec ce nouveau code qui fonctionnera également pour les pages d'élément de menu "Blog" et "En vedette".
Vous pouvez choisir d'utiliser le "Titre du menu", "Titre de la page du navigateur" ou "En-tête de page". Je préfère utiliser l'en-tête de page et configurer le menu pour ne pas afficher l'en-tête de page. De cette façon, je peux utiliser l'en-tête de page pour Open Graph comme je le souhaite car il n'apparaîtra nulle part ailleurs contrairement au titre du menu ou au titre de la page du navigateur qui le seront.
Pour ce faire, vous devez ajouter le code ci-dessous entre "$ timage" et au-dessus de "$ doc".
$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');
Ensuite, vous devez remplacer le code pour «twitter: title» et «og: title» par ce code ci-dessous afin d'utiliser le «titre de page».
<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />
Si à la place, vous souhaitez utiliser le "Titre du menu" ou le "Titre de la page du navigateur", dans le code, vous remplacez "$ pageheading" par "$ title" pour utiliser le titre du menu ou "$ browserpagetitle" pour utiliser le navigateur Titre de la page.
Vous pouvez créer les remplacements ici:
Créer des remplacements> Composants> com_content> catégorie
Créer des remplacements> Composants> com_content> en vedette
Créer des remplacements> Composants> com_contact> contact
Ensuite, modifiez les remplacements, en ajoutant le code ci-dessus, dans leurs emplacements respectifs:
Editeur> html> com_content> catégorie> blog.php
Éditeur> html> com_content> en vedette> default.php
Editeur> html> com_contact> contact> default.php
J'ai également supprimé l'instruction "if" pour l'image Open Graph en ne laissant que la ligne de base:
$timage= 'https://www.domain.com/custom-open-graph-image.jpg';
J'ai fait cela parce que l'instruction "si" n'est pas nécessaire pour ces pages car il n'y a pas d'image d'introduction ou d'image de texte intégral.
Une autre chose importante concernant les "Descriptions".
Pour les CONTACTS:
Dans le code de la page de contact pour "twitter: description" & "og: description", le "introtexte" doit être remplacé par "metadesc" afin de saisir la méta-description définie pour le contact. Si vous ne définissez pas de description pour le contact, rien ne sera affiché pour les balises de description de graphique ouvertes.
Pour les articles BLOG et EN VEDETTE:
Tout comme ci-dessus pour les contacts, le "twitter: description" et "og: description" le "introtexte" doit être remplacé par le code d'Eddie ci-dessus afin de récupérer la méta-description qui est définie pour l'élément de menu Blog ou Article en vedette. Encore une fois, si vous n'y définissez pas de description, rien ne sera affiché. Vous n'avez donc pas à le chercher, voici le code fourni par Eddie ci-dessus et à quoi devraient ressembler les lignes de description.
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
Je préfère changer la longueur des caractères de 45 à 160 car je ne suis pas intéressé par les visiteurs potentiels du site "Bait Clicking".
J'espère que cela sera utile aux autres!
4. Test contre le validateur Twitter et le Facebook Linter
Vérifiez l'article sur votre site Web par rapport au validateur Twitter: https://cards-dev.twitter.com/validator
les nouveautés
Linter Facebook : https://developers.facebook.com/tools/debug/
Et c'est ainsi que vous ajoutez des métadonnées Open Graph à vos articles Joomla :)
Questions Fréquentes
Qu'est-ce que le protocole Open Graph?
Le protocole Open Graph est un moyen de permettre aux sites Web de contrôler le contenu affiché lorsque le contenu de leur site Web est partagé sur Facebook, Twitter ou d'autres plates-formes compatibles avec Open Graph. Si votre site Web n'utilise pas ces balises, la plate-forme peut décider de l'image à afficher et affichera probablement une image sans rapport.
Google utilise-t-il Open Graph?
Non Google n'utilise pas le protocole Open Graph pour les pages de résultats des moteurs de recherche. Au lieu de cela, il utilise Données structurées, qui est une autre méthode permettant aux robots d'exploration de mieux comprendre le contenu de votre site Web. Même si Google n'utilise pas de balises OG en soi, le trafic vers votre site Web est un signal de classement, il sera donc probablement avantageux pour votre classement organique d'avoir un site Web convivial pour les médias sociaux.
Comment définir les balises Open Graph dans Joomla?
Pour définir des balises graphiques ouvertes dans Joomla, vous pouvez utiliser un remplacement de modèle et remplir les balises à partir du contenu de vos articles comme nous l'avons décrit dans l'article ci-dessus. Vous pouvez également installer un plugin capable de générer ces balises automatiquement à partir du contenu de votre site Web.
Comment vérifiez-vous les balises Open Graph?
Pour vérifier les balises Open Graph, vous pouvez soit utiliser Facebook Linter ou Sharing Debugger, soit utiliser le validateur de carte Twitter.
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!
Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.
et beaucoup plus ...