Ajouter les balises meta open graph de Facebook
Dans ce tutoriel, vous allez voir comment faire pour ajouter les balises open graph de Facebook sur votre thème WordPress.
Les balises open graph de Facebook permettent de préciser des indications sur la page que l’on “like” (miniature, titre, contenu, etc…). Par exemple, nous pouvons préciser l’url de l’image qui doit être affichée lors du “like” car si on il n’est pas précisé, Facebook choisira la première image qu’il trouvera dans la page.
Ce tuto a pour but de vous faire connaître l’intégralité de balises open graph de Facebook et de voir comment les ajouter automatiquement sur votre thème WordPress.
Modification de la balise HTML pour introduire les open graph Facebook
Pour implanter les balises open graph de Facebook, nous commençons par modifier la balise HTML afin que les navigateurs interprètent les nouvelles balises que nous allons ajouter.
Nous avons deux étapes à faire :
- ajouter la fonction
language_attributes()
sur le balise HTML (dans le fichier header.php) - modifier le filtre
language_attributes
Ajout de language_attributes() dans le fichier header.php
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
<html <?php language_attributes(); ?>>
[/pastacode]
Modification du filtre language_attributes dans le fichier functions.php
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
// Ajout d'Open Graph pour le Doctype
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
[/pastacode]
Et voilà ! Regardez le code source de votre site Internet et vous devriez voir que la balise HTML a été modifiée. Elle doit ressembler à ceci :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
<html dir="ltr" lang="fr-FR" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
[/pastacode]
Ajout des balises meta d’Open Graph sur les articles
Maintenant que nous avons modifier notre balise HTML et que le navigateur est apte à reconnaître les balises meta d’Open Graph, nous devons ajouter les différentes balises dans le header.
Déclaration du hook wp_head
Comment faire pour ajouter ces balises dans le header ?
Tout simplement grâce au hook wp_head
qui permet d’ajouter le contenu présent dans la fonction entre la balise
On commence par déclarer notre hook dans le fichier functions.php
:
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
function insert_opengraph_in_head() {
}
add_action( 'wp_head', 'insert_opengraph_in_head', 5 );
[/pastacode]
Ajout des balises meta Open Graph dans le header
Avant de commencer à ajouter les balises meta, on vérifie si nous sommes bien sur la page d’un article ou d’une page. Dans le cas contraire, on ajoute rien car les balises ne seront pas utiles.
Ensuite nous ajoutons 5 balises :
- og:title : affiche le titre de l’article ou de la page
- og:type : précise le type de contenu partagé
- og:url : affiche l’adresse url de l’article ou de la page
- og:description : affiche un résumé de l’article
- og:site_name : affiche le nom du site Internet
- og:image : affiche l’image indiqué dans la balise
Le titre est indiqué avec la fonction get_the_title()
tandis que l’adresse url est indiqué à l’aide de la fonction get_permalink()
.
En ce qui concerne l’adresse url de la miniature, on utilise la fonction wp_get_attachment_image_src()
qui permet de récupérer un tableau contenant plusieurs informations dont l’adresse de l’image en index 0 du tableau que retourne la fonction.
En plus de la meta og:image
, on ajoute un supplément link
content l’attribut rel
avec la valeur image_src
.
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
function insert_opengraph_in_head() {
global $post;
if ( !is_singular()) // On vérifie si nous somme dans un article ou une page
return;
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:description" content="' .strip_tags(get_the_excerpt()) . '" />';
echo '<meta property="og:site_name" content="NOM DE MON SITE"/>';
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
echo '<link rel="image_src" href="'. esc_attr( $thumbnail_src[0] ) . '" />';
}
add_action( 'wp_head', 'insert_opengraph_in_head', 5 );
[/pastacode]
Et voilà, votre site Internet est maintenant parfaitement configurer pour les partages d’article sur Facebook :)
Remarque : Il faut laisser un peu de temps à Facebook afin qu’il puisse analyser notre site. En attendant, vous pouvez tester votre script avec le lien suivant : http://developers.facebook.com/tools/debug
55 Commentaires
On est d’accord c’est pour le nouveau Open Graph présenté récemment ?!
Ce sont celles qui sont recommandées par Facebook sur la page développeur.
http://developers.facebook.com/docs/opengraph/
merci pour ces explication mais j’avoue ne pas avoir bien compris, je m’explique.
1-tu dit d’ajouter <html > dans header.php. dans mon header j’ai <html xmlns="http://www.w3.org/1999/xhtml" > . question :dois-je le remplacer ?
2- Modification du filtre language_attributes dans le fichier functions.php > question : je ne trouve pas d’élément qui contient language_attributes !!!
merci pour tes réponses
oups les balise ne s’affiche pas dans mon premier poste…
= html <?php language_attributes(); ?
= html xmlns=”http://www.w3.org/1999/xhtml” ?php language_attributes(); ?
Cela dépend de ton Doctype !
Si tu es en HTML5, c’est la première solution, sinon c’est celle que tu proposes :)
il n’y a pas de if à rajouter au code pour functions.php ?
Je ne comprends pas votre question :/
simple pourtant ma question,si je met votre code ainsi,il reste inerte,que je le mette avant ou après ?> dans functions.php de mon thème.
donc je demande si il ne manque pas quelque chose dans le code par exemple if ( au début0
Oui, mais if quoi ? “if” ça ne veut pas dire grand chose :)
A savoir que l’astuce fonctionne uniquement sur les articles.
Il y a aucun effet sur la page index ou des pages par exemple, uniquement les articles !
je ne sus pas codeur,je posais juste une question,je vois par if{ plus un tas de code,je demandais juste si il suffit de mettre le code comment vous le présentez ou si il fallait rajouter if{ ou autre chose,c’est tout,c’est simple comme question,non ?
Tout le code est là, si il faudrait quelque chose en plus, je l’aurai mentionné :smile:
si j’ai demandais c’est que le oode coller dans functions.php par l’éditeur de texte de texte NotePad++ reste en texte noire,alors qui devrait prendre des “couleurs” faut-il le coller avant quelque chose ?Ou après ?
bon,j’ai changé de thème et là le code est passé,il a pris de la couleur.
Le hook on le met entre les parenthèse après head de ?
les balises meta open graph dans single.php ou header.php ?
Tout est indiqué dans l’article, la chose à mettre dans le fichier header.php est la première ligne de code que j’indique en début d’article.
Le reste se met dans le fichier functions.php
j’ai trouvé plus simple
http://www.leonard-rodriguez.com/blog/social-media/comment-integrer-le-protocole-facebook-open-graph-dans-votre-theme-wordpress-1022
mais je continue sur votre code à vous,que j’ai fini par installer,et il fonctionne,je pense que vous avez voulu être trop précis.
“Ajout des balises meta Open Graph dans le header” en indiquant le code sans les meta,du coup je mettais pas 2 fois function insert_opengraph_in_head() {
}
add_action( ‘wp_head’, ‘insert_opengraph_in_head’, 5 );
Bonjour,
désolé de déterré le topic mais j’ai un soucis j’ai le code qui est visible sur ma page “article” dès que je tente d’utiliser les bouts de code
exemple sur cette page entre la navbar et le début de l’article
http://bit.ly/tuqsbT
une idée de comment je peux régler le soucis ? merci
Je n’ai pas saisi la demande votre problème !
A savoir que ce code ne permet pas d’ajouter un bouton de partage Facebook, mais qu’il permet d’afficher les bonnes informations + images lors d’un partage sur Facebook.
Euh ça j’avais bien compris, j’ai juste un soucis le code s’affichait en clair au dessus de l’article on voyait ça de marqué
“function insert_opengraph_in_head() {
global $post;
if ( !is_singular()) // On vérifie si nous somme dans un article ou une page
return;
echo ”;
echo ”;
echo ”;
echo ”;
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) );
echo ”;
echo ”;
}
add_action( ‘wp_head’, ‘insert_opengraph_in_head’, 5 ); ”
J’ai donc enlevé le code et mis un autre en attendant de trouver une solution pour régler le problème
Avez-vous bien mis ce code dans votre fichier functions.php ?
Salut,
je viens d’appliquer ta méthode sur Protuts.net mais quand je cliques sur J’aime la miniature n’est pas celle définie dans les meta du code source, normal ?
Il y a un délai d’attente ?
En tout cas, bonne astuce !
Bonsoir Aurélien,
Alors non, il n’y a pas de délai d’attente, ça doit être instantané si il n’y a pas de système de cache !
Je n’arrive pas à accéder à Protuts, c’est normal ?
Je voulais jetté un oeil sur le code source
Euh le site devrait revenir bientôt… pour le code source, les liens vers les images fonctionnent…
Je viens de me rendre compte qu’il y a peut être un conflit dans le code que j’ai mis.
Après une mise à jour de l’article j’ai ajouté la ligne avec la balise link rel=”image_src”
Essayez après avoir supprimer la balise link rel=”image_src”, il y a peut être un conflit entre cette balise et la meta og:image.
Je ne suis vraiment pas sûr de la solution, mais ça ne compte rien de tester :)
Merci de ta réponse ! J’ai essayé mais visiblement cela ne change rien…
L’image affichée sur mon profil Facebook quand je cliques J’aime n’est pas la bonne…
Est-ce que tu confirmes que cette technique fonctionne de ton côté ?
P.S : ce serait cool si on pouvait répondre directement dans le corps des commentaires pour relire le commentaire précédent. Simple suggestion ;)
Oui, je confirme que le tuto fonctionne.
Je l’ai mise en place sur le site d’un client. Tu peux faire un essai ici => http://www.crazyjack.fr/agenda/nocturne-n%C2%B010-que-la-lumiere-soit-441/
Je prends note de ta suggestion concernant les commentaires pour la nouvelle version de GeekPress qui doit sortir avant la fin du mois ;)
OK super ! Je vais refaire des tests de mon côté. Dans ton exemple, effectivement l’image affichée dans le J’aime est bien celle spécifiée dans les URLs (et je suppose que cela n’est pas liée au fait que c’est la première image de la page ?).
Bientôt une nouvelle version ? Nice ! :cool:
Merci pour cet article.
J’ai bien suivi ton tuto, on peut apercevoir les différents open graph dans mon code source d’un article. Cependant, mon bouton j’aime/envoyer qui se situe dans un article ne fonctionne pas. Je ne comprends pas pourquoi (Le titre reprend l’url) et pas d’image associée.
Si tu pouvais m’aider ça serait top.
Merci
J’ai trouvé la solution si ça ne fonctionne pas automatiquement, il faut laisser un peu de temps à Facebook afin qu’il scrape votre site. Et ensuite tout re-fonctionne.
@Alex : Merci de la précision, je vais l’ajouter sur l’article ;)
Tu peux même ajouter ce lien pour pouvoir tester nos liens :):
http://developers.facebook.com/tools/debug
Merci à toi pour l’article.
j’ai erreur dans functions.php à cause de cette ligne $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID )
@BRITAIN : Elle dit quoi l’erreur ? ;)
simplement
Fatal error: Call to undefined function get_post_thumbnail_id()
est ce que le code peut être en conflit avec un autre code dans mon fichier functions.php ?
j’ai suivit cet article,
http://wpchannel.com/recuperer-premiere-image-article-php-wordpress/
pour récupérer la 1ère image d’un article.
@Britain : Ca ne peut pas provenir d’un conflit puisque c’est une fonction native de WordPress http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
Quelle est la version de votre WordPress ?
@Britain : je ne me rappelle plus avec certitude, mais il me semble avoir tenté de mixer les 2 tutoriels et que cela fonctionnait. Maintenant ce n’est pas facile…
La solution la plus simple à ce sujet est d’utiliser un plugin dédié :
http://wordpress.org/extend/plugins/wonderm00ns-simple-facebook-open-graph-tags/
Ou idéalement utiliser le plugin WordPress SEO, qui gère très bien cette fonctionnalité.
je suis en WordPress 2.9.2. pour http://www.chambrescarnac.com je voudrais upgrader WP à la dernière version de WP avant de mettre tous les boutons de partage possibles
Si j’ai bien compris http://codex.wordpress.org/fr:Mettre_a_Jour_WordPress
“Depuis la version 2.7, WordPress dispose d’un outil interne de mise à jour automatique” MAIS ? il faut enregistrer la nouvelle version de WP en local ? puis lancer la procédure ?
Parce que je n’ai pas dans mon admin la possibilité de “lancer cette mise à jour en vous rendant sur la page Outils > Mettre à jour (versions pré-3.0)”
et pourquoi ?
et comment je fais alors un bckup sql puis je dézipe wordpress-3.3.1-fr_FR.zip
sur mon dd local et je lance Mise à jour manuelle ?
Allez voir ce tuto vidéo ;)
http://www.dailymotion.com/video/xo2pp6_comment-faire-une-mise-a-jour-manuelle-de-wordpress_tech
à ce sujet on trouve juste ça Dans la readme de la wordpress-3.3.1-fr_FR.zip
“A l’aide de l’outil de mise à jour automatique
Si votre version de WordPress est égale ou supérieure à 2.7, vous pouvez utiliser l’outil de mise à jour automatique :
Ouvrez la page wp-admin/update-core.php dans votre navigateur, et suivez les instructions ;
Vous pensiez qu’il y aurai d’autres étapes ? C’est tout !”
mais je suppose qu’il faut avant dezipper wordpress-3.3.1-fr_FR.zip en local ?
Merci !! comme ça c’est encore plus clair :-) tu viens de gagner une tournée à La Tonnelle le bar de http://www.chambrescarnac.com
:-)
@Eric :Haha merci:) Dommage que ça ne soit pas à côté de chez moi :/
bonjour,
j’ai un souci que j’arrive pas à règler.
Quand je like une page sur mon site, l’info apparait bien sur facebook mais avec pas avec la bonne image.
comment puis je lui imposé de prendre l’image de mon produit (prestashop)
merci
@Mike : GeekPress est un site dédié à WordPress. Si votre site est sous Prestashop, vous n’êtes pas au bon endroit ^^
oups… merci bcp.
si par hasard vous aviez la solution… welcome :)
à bientôt
Merci pour avoir citer mon article dans les commentaires :-)
donnant souvent l’adresse de votre article sur le forum de wordpress-fr.net,je remarque les gens ont un doute à cause de ce titre “Ajout des balises meta Open Graph dans le header” cela porte à confusion avec header.php,peut être que “Ajout des balises meta Open Graph dans l’en-tête de votre site” serait mieux,bonne continuation.
Bonsoir
Pourquoi l’image de l’article n’apparait pas alors que je vois le lien dans les liens og
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Farnouvilleetsonpasse.fr%2Fune-nouvelle-ferme-a-arnouville-1587
J’ai testé avec WordPress SEO by Yoast avant, mais il indiquait 2 images, et j’avais l’image par défaut.
Merci
Si vous utilisez WordPress SEO by Yoast, il ne faut pas utiliser le code de cet article parce qu’il risque d’avoir deux fois les balises open graph.
Je m’en doutais c’est pourquoi j’ai décoché “ajouter les balises meta open graph” dans WordPress SEO by Yoast. Le souci a commencé avec avec ce plugin, c’est pourquoi je me suis tourné vers votre code.
je viens de tout supprimer le code, j’ai réactivé WP SEO by Yoast, c’est mieux, mais j’ai ce message
Open Graph Warnings That Should Be Fixed
Parser Mismatched Metadata : The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘fb:admins’
comme la 1ère fois que j’avais activé l’option, j’avais mis votre code pour Modification du filtre language_attributes
mais ce bug.
Merci tout de même
Super ! Enfin un peu plus de contrôle et de liberté. Avec Facebook c’est pas toujours évident.
Bonjour,
je possède un site webradio et je voudrais que les personnes qui aime le titre en cours, puissent le partager sur leur mur facebook. il s’agit du titre, artiste et cover.
Bien je galère je n’y arrive pas. auriez vous quelques indication et sans abuser un peu d’aide pour moi arriver à ce petit projet svp…
Merci d’avance
Merci pour cet article!
Est il possible de savoir quoi changer dans le code du fichier functions.php pour ne plus avoir une ligne du type :
Mar 16 2016 un article Voyage Laisser un commentaire
quand je partage un article sur facebook ?
Merci