Quelle est l'utilisation d'Open Graph pour les boutons comme. Comment ajouter des balises méta sociales open graph protocol pour facebook dans joomla Ajout du protocole Open Graph dans Joomla

Malheureusement, il existe très peu d'informations sur cette question sur Internet, en particulier sur l'Internet russe. Tout ce que google peut nous offrir pour résoudre le problème de l'insertion d'un protocole graphique ouvert dans joomla ? il existe quelques plugins qui vous permettent d'insérer vos propres balises meta et head. L'un des plus populaires est l'ITP Meta. Le principe de sa version gratuite est étrange, c'est un euphémisme. Après avoir créé un article, vous devez écrire des balises META pour chaque article séparément. Ne voulant pas supporter un travail aussi routinier, je vous suggère d'utiliser ma méthode.

Donc, d'abord, pour qu'il devienne assez clair pourquoi vous devez mettre le protocole Open Graph pour Facebook dans la tête de Joomla. Voici à quoi ressemble le matériau sans notes spéciales.

Et voici à quoi cela ressemble avec toutes les entrées nécessaires. Par essentiel, je veux dire basique. Comme il existe de nombreux enregistrements, certaines des étiquettes de viande répertoriées du protocole Open Graph qui seront dans cet article ne sont pas très nécessaires pour Facebook, mais elles sont nécessaires pour, disons, Pinterest.

Ajout du protocole Open Graph à Joomla

  • Allons ici : / composants / com_content / vues / article / tmpl
  • Ouverture du fichier : par défaut.php
  • Ensuite, nous recherchons la 14ème ligne avec un commentaire : // Crée des raccourcis vers certains paramètres.
  • Ensuite, vous devez définir une variable pour la date de création de l'article. Pour ce faire, ajoutez la ligne suivante n'importe où dans la liste des variables. En conséquence, une nouvelle variable devrait apparaître $ datepublication... Par exemple, voici comment je l'ai.
$ utilisateur = JFactory :: getUser (); $ datepubl = $ this-> item-> created ; $ info = $ params-> get ("info_block_position", 0); if (isset ($ images -> image_intro) and! empty ($ images -> image_intro)) ($ timage = htmlspecialchars (JURI :: root (). $ images -> image_intro);) elseif (isset ($ images -> image_fulltext) et ! vide ($ images -> image_fulltext)) ($ timage = htmlspecialchars (JURI :: root (). $ images -> image_fulltext);) else ($ timage = "http: // komarovdesign. com / images / logo_12x. png ";) $ doc = & JFactory :: getDocument (); $ doc -> addCustomTag (" < meta property = "og:title" content = "". $ this -> escape ($ this -> item -> title). ""/> < meta property = "og:type" content = "article" /> < meta property = "og:url" content = "".JURI:: current()."" /> < meta property = "og:image" content = "".$timage."" /> < meta property = "og:site_name" content = "Blog sur la conception Web, le CSS et le code."/> < meta property = "article:published_time" content = "".$datepubl."" /> < meta property = "article:author" content = "Artem" /> < meta property = "fb:admins" content = "100007059401635" /> ");

Comme vous pouvez le voir, tout est simple. En ce qui concerne les photos, l'ordre suivant va : s'il n'y a pas de photo pour la partie introductive du matériel, une photo du matériel complet est prise, s'il n'y est pas, alors le logo du site est pris. Bien entendu, vous devez le spécifier en le remplaçant par le vôtre dans la ligne "http://komarovdesign.com/images/logo_12x.png"

Ensuite, vous devez également utiliser des stylos pour écrire une description de votre site dans la ligne "og: site_name". Précisez l'auteur de l'article « article : auteur ». Dans la ligne "fb: admins", vous devez enregistrer votre identifiant de profil facebook.

Si vous lisez attentivement, vous avez remarqué qu'il n'y a pas de balise principale "og: description", elle est ajoutée dans un autre fichier.

  • Allons ici : bibliothèques / joomla / document / html / renderer /
  • Ouverture du fichier : tête.php
  • Nous recherchons environ 106 lignes avec un commentaire : // N'ajoutez pas de descriptions vides
  • Et après le principal la description insérez la balise méta du protocole Open Graph. En conséquence, vous devriez obtenir ce qui suit.
($ buffer. = $ tab. " ". $ lnEnd; $ buffer. = $ tab." ". $ lnEnd;)

Open Graph est utile pour Facebook, VKontakte et d'autres réseaux.

Passons à la pratique. Que doit faire exactement un webmaster pour capturer l'image dont vous avez besoin.

Si vous ajoutez un nouveau message à l'aide des boutons définis manuellement sur le site, vous avez déjà remarqué que n'importe quelle vignette peut être publiée avec l'annonce. Y compris un compteur avec des particules au lieu d'un beau dessin spécialement sélectionné. Si vous l'ajoutez manuellement, bien sûr, vous pouvez immédiatement corriger et empêcher les graphiques inappropriés. Mais vous voulez toujours tout faire sans clics inutiles. De plus, l'image ne peut pas être modifiée avec le cross-posting automatique.

Il y a aussi d'autres absurdités avec la sortie des titres, des descriptions, etc., donc des développeurs de réseaux sociaux. les réseaux ont mis au point un balisage spécial]]> Open Graph]]>.

A noter que Yandex propose 5 solutions pour l'installation de micro-balisage.

Pour éviter divers incidents, un webmaster peut ajouter les balises méta Open Graph suivantes entre les balises

Dans la balise ajoutez le chemin vers xmlns, n'oubliez pas de mettre tout le code entre parenthèses :

html xmlns : og = "https://ogp.me/ns#"

Autre exemple de code, mettez le code entre parenthèses :

Html xmlns = "https://www.w3.org/1999/xhtml" xml: lang = "ru-RU" lang = "ru-RU" prefix = "og: https://ogp.me/ns# vidéo : https://ogp.me/ns/video# tu: https://webmaster.yandex.ru/vocabularies/ "

Solutions de moteur prêtes pour l'ajout de balises méta Open Graph

Pour les plugins WordPress :

Méta Facebook OpenGraph- télécharger https://wordpress.org/plugins/facebook-opengraph-meta/

Opengraph et générateur de microdonnées- télécharger https://wordpress.org/plugins/opengraph-and-microdata-generator/

Pour les modules Drupal :

Balises méta Open Graph télécharger pour les versions 6 et 7 à partir du lien https://drupal.org/project/opengraph_meta

Module Balises méta configure les balises méta dans Drupal 7 et certains paramètres du protocole Open Graph. Télécharger https://drupal.org/project/metatag

Plugin pour Joomla

Graphique à ouverture facile publie une petite photo, une courte annonce et un lien vers la section des intérêts de Facebook. Sélectionnez la version de joomla et téléchargez https://extensions.joomla.org/extensions/social-web/facebook-integration/17883

Voir og : balisage lors de la modification d'images, d'en-têtes, etc., vous pouvez utiliser l'outil URL Linter à l'adresse https://developers.facebook.com/tools/debug

Facebook est l'un des principaux outils de retour d'information des visiteurs du site et, bien sûr, un outil de promotion de toute ressource. Boutons "Partager" et "Comme" vital pour votre ressource. Mais le type d'informations que le robot doit capter n'est pas clair. Chaque site est différent dans sa structure et que ferait un robot Facebook n'a pas analysé le matériel au hasard, il existe un protocole Ouvrir graphique... Qu'est-ce que c'est et en quoi cela facilite-t-il la vie des robots et des webmasters ?

Je vais vous montrer un exemple illustratif afin qu'il devienne clair pourquoi vous devez mettre Ouvrir graphique pour Facebook dans la section de tête Joomla... Voici à quoi ressemble le matériel sans entrées spéciales :

Et voici à quoi cela ressemble avec tous les enregistrements de propriétés méta nécessaires. Comme il y a beaucoup d'enregistrements, certaines des balises de protocole de propriété méta répertoriées Ouvrir graphique qui dans cet article ne sera pas très nécessaire pour Facebook mais ils sont requis pour les autres réseaux sociaux.

La structure de la disposition native de la sortie du composant est très simple :

/templates/html/component_name/type_name/display_file_name.php Jetons un coup d'œil à quelques exemples. Si nous voulons écraser le balisage par défaut pour afficher l'article (article), nous devons d'abord copier ce fichier : /components/com_content/views/article/tmpl/default.php à cet emplacement, en créant les répertoires appropriés au cas où ils ne le feraient pas. existent déjà : /templates/template_name/html/com_content/article/default.php Dans le fichier default.php après ce bloc : / ** * @package Joomla.Site * @subpackage com_content * * @copyright Copyright (C) 2005 - 2015 Questions d'Open Source, Inc. Tous les droits sont réservés. * @license GNU General Public License version 2 ou ultérieure ; voir LICENSE.txt */defined ("_ JEXEC") ou die ; JHtml :: addIncludePath (JPATH_COMPONENT. "/ Helpers"); // Crée des raccourcis vers certains paramètres. $ params = $ this-> item-> params ; $ images = json_decode ($ this-> item-> images); $ urls = json_decode ($ this-> item-> urls); $ canEdit = $ params-> get ("access-edit"); $ utilisateur = JFactory :: getUser (); $ info = $ params-> get ("info_block_position", 0); JHtml :: _ ("comportement.caption");

Ajoutez le code suivant :

// OpenGraph start $ datepubl = $ this-> item-> created; if (isset ($ images -> image_intro) and! empty ($ images -> image_intro)) ($ timage = htmlspecialchars (JURI :: root (). $ images -> image_intro);) elseif (isset ($ images -> image_fulltext) et!vide ($ images -> image_fulltext)) ($ timage = htmlspecialchars (JURI :: root(). $ images -> image_fulltext);) else ($ timage = "default_logo.jpg";) $ document = & JFactory :: getDocument (); if ($ this-> item-> metadesc == "") ($ mmd = strip_tags ($ this-> item-> introtext);) else ($ mmd = $ this-> item-> metadesc;) $ document - > addCustomTag ("escape ($ this -> item -> title)." "/>"); // Fin OpenGraph

Comme vous pouvez le voir, tout est simple. Les images sont affichées selon le principe suivant - s'il n'y a pas d'image pour la partie d'introduction du matériel, une image du matériel complet est affichée, si elle n'est pas là, alors la photo par défaut est prise. Il faut le préciser en le remplaçant par le vôtre dans la ligne

$ timage = "default_logo.jpg";

La balise principale « og : description » est générée comme suit : s'il n'y a pas de balises méta description pour l'article, le texte d'introduction du matériel est pris.

Après toutes ces opérations, vous pouvez vérifier si nous avons tout fait correctement, l'outil nous aidera avec cela

Solution de protocole de graphique ouvert for Joomla est un composant Joomla pionnier qui vous donne un contrôle total sur le contenu des sites Joomla, pour toutes sortes de paramètres Open Graph Protocol.

Pour le moment, la version de l'extension permet de travailler avec Joomla 2.5 et 3.6x.

Travailler avec le contenu de divers sites est au premier plan pour tous les propriétaires. Ignorer ce moment ne permettra pas d'augmenter le classement des moteurs de recherche dans divers environnements, ce qui peut affecter négativement le trafic du site, ainsi que l'aspect financier du problème. Si vous souhaitez connaître les problèmes existants de votre site, vous pouvez rechercher des erreurs sur le site afin de les détecter et de les éliminer en temps opportun.

Depuis le début de la croissance du volume de données des sites sociaux et des sites sous contrôle du web2.0, l'une des places importantes dans la gestion a été occupée par la technologie Open Graph Protocol. L'Open Graph Protocol (OGP) permet à un développeur ou à un propriétaire de site Web d'intégrer son site Web / ses pages / ses publications dans le trafic social. En utilisant OGP, il est possible de transférer une grande quantité d'informations telles que le titre, la description, l'image, les balises de géolocalisation, l'auteur, etc. OGP est devenu un atout essentiel pour rendre vos pages plus conviviales sur les réseaux sociaux.

La solution Open Graph Protocol, une fois installée, ajoute une icône OGP au bas de l'éditeur d'articles dans le backend Joomla, où vous pouvez saisir des balises OGP. De plus, ce composant offre la possibilité de répertorier tous les articles pour une meilleure gestion des balises d'articles OGP.

Listons les principales options d'extension :

options de base

  • Possibilité de supprimer les pop-ups ;
  • Supprimer RSS ;
  • Prise en charge de la fonction de suppression d'Ajax.

Composants pris en charge :

  • ComContent (gestionnaire d'articles) ;
  • K2 (Comk2) ;
  • Contenu Flexi (ComFlexicontent) ;
  • Virtualmart (ComVirtuemart);
  • DJ-Catalogue (Comdj-catalogue);
  • Zoo (ComZoo);
  • Activer ou désactiver tout composant par l'administrateur ou une partie du frontend séparément ;
  • Possibilité de personnaliser la fonctionnalité d'administration pour les balises ouvertes par défaut.

Malheureusement, il existe très peu d'informations sur cette question sur Internet, en particulier sur l'Internet russe. Tout ce que google peut nous offrir pour résoudre le problème de l'insertion d'un protocole graphique ouvert dans joomla ? il existe quelques plugins qui vous permettent d'insérer vos propres balises meta et head. L'un des plus populaires est l'ITP Meta. Le principe de sa version gratuite est étrange, c'est un euphémisme. Après avoir créé un article, vous devez écrire des balises META pour chaque article séparément. Ne voulant pas supporter un travail aussi routinier, je vous suggère d'utiliser ma méthode.

Donc, d'abord, pour qu'il devienne assez clair pourquoi vous devez mettre le protocole Open Graph pour Facebook dans la tête de Joomla. Voici à quoi ressemble le matériau sans notes spéciales.

Et voici à quoi cela ressemble avec toutes les entrées nécessaires. Par essentiel, je veux dire basique. Comme il existe de nombreux enregistrements, certaines des étiquettes de viande répertoriées du protocole Open Graph qui seront dans cet article ne sont pas très nécessaires pour Facebook, mais elles sont nécessaires pour, disons, Pinterest.

Ajout du protocole Open Graph à Joomla

  • Allons ici : / composants / com_content / vues / article / tmpl
  • Ouverture du fichier : par défaut.php
  • Ensuite, nous recherchons la 14ème ligne avec un commentaire : // Crée des raccourcis vers certains paramètres.
  • Ensuite, vous devez définir une variable pour la date de création de l'article. Pour ce faire, ajoutez la ligne suivante n'importe où dans la liste des variables. En conséquence, une nouvelle variable devrait apparaître $ datepublication... Par exemple, voici comment je l'ai.
$ utilisateur = JFactory :: getUser (); $ datepubl = $ this-> item-> created ; $ info = $ params-> get ("info_block_position", 0); if (isset ($ images -> image_intro) and! empty ($ images -> image_intro)) ($ timage = htmlspecialchars (JURI :: root (). $ images -> image_intro);) elseif (isset ($ images -> image_fulltext) et ! vide ($ images -> image_fulltext)) ($ timage = htmlspecialchars (JURI :: root (). $ images -> image_fulltext);) else ($ timage = "http: // komarovdesign. com / images / logo_12x. png ";) $ doc = & JFactory :: getDocument (); $ doc -> addCustomTag (" < meta property = "og:title" content = "". $ this -> escape ($ this -> item -> title). ""/> < meta property = "og:type" content = "article" /> < meta property = "og:url" content = "".JURI:: current()."" /> < meta property = "og:image" content = "".$timage."" /> < meta property = "og:site_name" content = "Blog sur la conception Web, le CSS et le code."/> < meta property = "article:published_time" content = "".$datepubl."" /> < meta property = "article:author" content = "Artem" /> < meta property = "fb:admins" content = "100007059401635" /> ");

Comme vous pouvez le voir, tout est simple. En ce qui concerne les photos, l'ordre suivant va : s'il n'y a pas de photo pour la partie introductive du matériel, une photo du matériel complet est prise, s'il n'y est pas, alors le logo du site est pris. Bien entendu, vous devez le spécifier en le remplaçant par le vôtre dans la ligne "http://komarovdesign.com/images/logo_12x.png"

Ensuite, vous devez également utiliser des stylos pour écrire une description de votre site dans la ligne "og: site_name". Précisez l'auteur de l'article « article : auteur ». Dans la ligne "fb: admins", vous devez enregistrer votre identifiant de profil facebook.

Si vous lisez attentivement, vous avez remarqué qu'il n'y a pas de balise principale "og: description", elle est ajoutée dans un autre fichier.

  • Allons ici : bibliothèques / joomla / document / html / renderer /
  • Ouverture du fichier : tête.php
  • Nous recherchons environ 106 lignes avec un commentaire : // N'ajoutez pas de descriptions vides
  • Et après le principal la description insérez la balise méta du protocole Open Graph. En conséquence, vous devriez obtenir ce qui suit.
($ buffer. = $ tab. " ". $ lnEnd; $ buffer. = $ tab." ". $ lnEnd;)

Quoi d'autre à lire