Nouvelle version de ce petit plugin, inspiré par daScritch qui m’a pas mal mâché le boulot et qui a pour seule fonction de mettre en place, dans l’entête de la page HTML des billets et/ou des pages, les métadonnées « sociales » utilisées par Facebook, Google+ et Twitter.
Dorénavant les métadonnées concernant la miniature de l’image ne sont insérées que si une image a été trouvée. D’autre part les références au compte Twitter ne sont insérées que si ce dernier a été renseigné dans les préférences du plugin (voir ci-dessous).
Le plugin, une fois installé, s’active via le menu Blog et est intitulé socialMeta.
Vous pouvez activer l’insertion des métadonnées pour les billets ou les pages ou encore les deux et définir le compte Twitter à préciser :
En prenant ce billet pour exemple, voilà ce qu’il introduit dans l’entête de la page HTML :
<!-- Facebook --> <meta property="og:title" content="Ma sélection photo 2013" /> <meta property="og:description" content="Un aperçu rapide de l’année 2013, question photo. Je photographie moins j’ai l’impression, quoique je me sois bien rattrapé pendant la dernière édition de Paris-Web. En vedette" /> <meta property="og:image" content="http://open-time.net/public/dcim/2013/06/01/.IMG_8828_s.jpg" /> <!-- Google +1 --> <meta itemprop="name" content="Ma sélection photo 2013" /> <meta itemprop="description" content="Un aperçu rapide de l’année 2013, question photo. Je photographie moins j’ai l’impression, quoique je me sois bien rattrapé pendant la dernière édition de Paris-Web. En vedette" /> <meta itemprop="image" content="http://open-time.net/public/dcim/2013/06/01/.IMG_8828_s.jpg" /> <!-- Twitter --> <meta name="twitter:card" content="summary" /> <meta name="twitter:url" content="http://open-time.net/post/2014/01/13/Ma-selection-photo-2013" /> <meta name="twitter:title" content="Ma sélection photo 2013" /> <meta name="twitter:description" content="Un aperçu rapide de l’année 2013, question photo. Je photographie moins j’ai l’impression, quoique je me sois bien rattrapé pendant la dernière édition de Paris-Web. En vedette" /> <meta name="twitter:image:src" content="http://open-time.net/public/dcim/2013/06/01/.IMG_8828_s.jpg"/> <meta name="twitter:site" content="@franckpaul" /> <meta name="twitter:creator" content="@franckpaul" />
Ce billet servira de support pour cette version du plugin.
1 De Tomek -
Ah, je viens de découvrir une incompatibilité avec le plugin Pictures Show : si ce dernier est activé, Social Meta n'insère pas les balises métas. C'est ballot.
2 De Franck -
Ah ? J’ai un peu de mal à comprendre pourquoi, en voyant le code de socialMeta, celui-ci pourrait être impacté par un autre plugin, il ne fait que mettre des metas dans le
<head>de la page.Un exemple en ligne quelque part ?
3 De Tomek -
En même temps, c'est pas grave vu que je vais basculer sur une autre solution de galerie.
Sinon, là par exemple : http://www.tomekmusic.net/post/2014...
C'est le seul du multiblog sur lequel les metas ne s'affichent pas, et je viens de tester à nouveau, quand je désactive Pictures show, elles s'affichent.
4 De Franck -
M’est avis que ça vient du ploug en question. Je l’ai téléchargé pour voir, c’est copieux question code !
Cela dit, à part si ce plugin joue avec le contexte ou le markup de la page, je vois pas pourquoi socialMeta devrait en être impacté !
5 De Tomek -
Ouaip, c'est très vraisemblablement ce plugin qui merdoie, mébon, osef, en fait... C'est au cas où quelqu'un d'autre aurait ce souci, il saura que les 2 ne font pas bon ménage.
6 De Smeablog -
Dans le cas d'un blog photo, (avec des billets éventuellement sans contenu texte), serait il possible d'inclure à l'interface d'activation du plugin la possibilité de choisir un autre type de card par exemple "Sumary_Large_Image" ou "photo" et/ou de définir une description type en absence de texte dans l'article?
7 De Franck -
Je note la suggestion Smeablog, pour une peut-être future version…
8 De Rémi -
Bonjour,
J'essaie de faire fonctionner votre plugin (version 0.2) avec DotClear 2.6.4 sur un hébergement Free (PHP Version 5.1.3RC4-dev).
L'interface d'administration fonctionne, je n'ai aucun message d'erreur, mais pourtant rien ne change au niveau de l'affichage des billets.
Selon vous, est-ce dû à la version de PHP trop ancienne sur un hébergement Free?
Merci d'avance,
Rémi.
9 De Franck -
Que rien ne soit visible sur le blog, c'est tout à fait normal, puisque ce plugin insère des informations dans la partie entête (
<head>) de la page HTML, informations qui seront ensuite reprises par Twitter, Google et Facebook dès lors qu'on leur fournira l'URL vers un billet, par exemple.Si vous jetez un œil au code source de cette URL, vous verrez les lignes correspondantes dans la partie
<head>.10 De Rémi -
Merci pour votre réponse... Je n'avais rien compris en fait ;-)
Je croyais que le plugin permettait d'obtenir des boutons pour partager sur les réseaux sociaux... Du coup j'ai installé en plus votre plugin AddToAny.
Merci pour votre travail en tout cas !
11 De Franck -
Les deux plugins sont complémentaires cela dit.
12 De i_love_dc -
Bonjour Franck.
Actuellement les metas “Google+” génèrent un code invalide.
Est-ce que c’est possible de changer ces metas actuellement du style :
@@
<meta itemprop=”name” content=”…” />
<meta itemprop=”description” content=”… />
<meta itemprop=”image” content=”…” />@@
Par exemple avec …
@@<meta property=”og:title” content=”…” />
<meta property=”og:image” content=”…” />
<meta property=”og:description” content=”…” />@@
???
13 De Franck -
Ce que tu demandes est en fait de mettre les métas utilisées par Facebook pour Google+ aussi ? Si oui, y’a qu’à virer celle de Google+ épicétou.
14 De Franck -
J’ajouterais que le code utilisé pour G+ fonctionne très bien, je l’ai observé en publiant là-bas un de mes billets. Du coup, casser ça juste pour une histoire de validation…
15 De i_love_dc -
Oui, le premier point serait de confirmer la validation à 100% en supprimant les meta “itemprop”.
Et comme on peut le constater ici snippet Google+, ils disent bien
Du coup on allège le code, le plugin reste tout aussi efficace (puisque le fonctionnement des meta renseignées est identique pour Facebook et /ou Google+) et cela rend la validation correcte.
16 De Franck -
Oyé :
C’est par ici.