Ajouter les balises meta open graph de Facebook sur votre thème WordPress
posté le par Jonathan | 48 commentaires | 3044 vues |
Ajouter à mes favoris 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 tutoriel 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
Si vous avez aimé cet article, n'oubliez pas de vous abonner à notre flux RSS ou à notre newsletter au contenu exclusif.
- Stephane le
- jonathan le
- erhan le
- erhan le
- jonathan le
- darknote le
- jonathan le
- darknote le
- jonathan le
- darknote le
- jonathan le
- darknote le
- darknote le
- jonathan le
- darknote le
- darknote le
- Louis_marie_c le
- jonathan le
- Louis_marie_c le
- jonathan le
- Aurélien Denis le
- jonathan le
- Aurélien Denis le
- jonathan le
- Aurélien Denis le
- jonathan le
- Aurélien Denis le
- Alex le
- Alex le
- jonathan le
- Alex le
- britain le
- jonathan le
- britain le
- britain le
- jonathan le
- Aurelien Denis le
- Amaury Balmer le
- Eric Ciechanowicz le
- jonathan le
- Eric Ciechanowicz le
- Eric Ciechanowicz le
- jonathan le
- mike le
- jonathan le
- mike le
- Léonard Rodriguez le
- noaneo le
Laisser un commentaire