Tutos WordPress

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.

S'inscrire à la newsletter

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

<html <?php language_attributes(); ?>>

Modification du filtre language_attributes dans le fichier functions.php

// 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');

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 :

<html dir="ltr" lang="fr-FR" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">

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 :

function insert_opengraph_in_head() {
}
add_action( 'wp_head', 'insert_opengraph_in_head', 5 );

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.

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 );

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

53 commentaires
  1. Stephane le

    On est d’accord c’est pour le nouveau Open Graph présenté récemment ?!

  2. erhan le

    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&quot; > . 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

  3. erhan le

    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(); ?

  4. darknote le

    il n’y a pas de if à rajouter au code pour functions.php ?

  5. darknote le

    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

  6. darknote le

    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 ?

  7. darknote le

    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 ?

  8. darknote le

    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 ?

  9. darknote le
  10. darknote le

    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 );

  11. Louis_marie_c le

    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

  12. Louis_marie_c le

    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

  13. Aurélien Denis le

    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 !

  14. Aurélien Denis le

    Euh le site devrait revenir bientôt… pour le code source, les liens vers les images fonctionnent…

  15. Aurélien Denis le

    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 ;)

  16. Aurélien Denis le

    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:

  17. Alex le

    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

  18. Alex le

    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.

  19. Alex le
  20. britain le

    j’ai erreur dans functions.php à cause de cette ligne $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID )

  21. britain le

    simplement
    Fatal error: Call to undefined function get_post_thumbnail_id()

  22. britain le
  23. Aurelien Denis le

    @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…

  24. Amaury Balmer le
  25. Eric Ciechanowicz le

    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 ?

  26. Eric Ciechanowicz le

    à 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 ?

  27. Eric Ciechanowicz le
  28. mike le

    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

  29. mike le

    oups… merci bcp.
    si par hasard vous aviez la solution… welcome :)
    à bientôt

  30. Léonard Rodriguez le

    Merci pour avoir citer mon article dans les commentaires :-)

  31. noaneo le

    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.

  32. Arnouville et son Passé le
  33. Arnouville et son Passé le

    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.

  34. Arnouville et son Passé le

    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

  35. Emoticone Facebook le

    Super ! Enfin un peu plus de contrôle et de liberté. Avec Facebook c’est pas toujours évident.

Poster un commentaire

Les champs obligatoires sont indiqués avec *

Prévenez moi de tous les nouveaux commentaires par email.

Ne plus afficher|Fermer
Suivez-nous sur Facebook !