Visit Easytutorial.com for new tutorials in english!

Comme vous le savez, la plupart des sites internet utilisent les réseaux sociaux pour promouvoir leur contenu web.

L’image, le titre, l’auteur, la description… sont des éléments qui caractérisent chaque lien partagé sur l’un de ces réseaux sociaux (facebook, twitter, instagram, …).

Cependant… le partage sur le réseau social numéro #1 pour la plupart des sites WordPress n’est pas optimisé !

Dans ce tutoriel vous allez découvrir comment utiliser le protocole Open Graph (OG) qui va vous permettre d’ajouter une image et des informations sur vos liens d’articles partagés via Facebook.

Nous allons utiliser pour cela une fonction wordpress que vous allez ajouter à votre thème WordPress, facile à faire ;)

Allons-y !

Open Graph ou comment « socialiser » ses liens.

Comment marche le Open Graph ?

C’est simple !

En ajoutant des balises meta dans la partie <head> d’une page web, vous donnez aux réseaux sociaux des informations personnalisés.

Comme ça quand un utilisateur colle le lien de votre article par exemple, au lieu de laisser le réseau social (facebook) choisir une image et un texte au hasard, l’Open Graph va utiliser l’image que vous – créateur – avez choisit =)

Voici un exemple des balises Open Graph de cette page : easytutoriel.com/migrer-windows-manuellement

<meta property="og:title" content="Comment migrer vers Windows 10 manuellement !" />
<meta property="og:description" content="Bonjour, Avez-vous de la difficulté avec Windows Update lors de la migration vers Windows 10 ? Voulez-vous télécharger et installer Windows 10 manuellement et rapidement ? Comme vous le savez,&hellip;" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.easytutoriel.com/migrer-windows-manuellement" />
<meta property="og:site_name" content="Easytutoriel.com" />
<meta property="og:image" content="http://www.easytutoriel.com/wp-content/uploads/2016/01/migrere-windows-10-manuellement.jpg" />
<meta property="article:publisher" content="http://facebook.com/easytutoriel.officiel" />
<meta property="article:author" content="http://facebook.com/Easytutoriel.officiel" />

Voici un exemple plus clair :

1

Comment ajouter les metadata de OG sur WP.

Premièrement cherchez le fichier functions.php sur votre thème WordPress se trouvant dans ce chemin :

/wp-content/themes/VOTRE-THEME

Ici j’utilise le client FTP FileZilla, pour modifier ce fichier php il suffit de faire clic droit puis « Afficher / Editer »

2

Ensuite ajoutez dans un endroit libre ces deux fonctions doctype_opengraph($output) et fb_opengraph().

/* START facebook meta data */

function doctype_opengraph($output) {
return $output . '
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');
function fb_opengraph() {
global $post;

if(is_single()) {
if(has_post_thumbnail($post->ID)) {
$imageinfo = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'large');
$img_src = $imageinfo[0];
} else {
$img_src = get_stylesheet_directory_uri() . '/images/opengraph_image.jpg';
}

$excerpt = wp_trim_words( $post->post_content , 30 );
$author_id = $post->post_author;
$profile_url = get_userdata( $author_id )->facebook;
?>

<meta property="og:title" content="<?php echo the_title(); ?>" />
<meta property="og:description" content="<?php echo $excerpt; ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo the_permalink(); ?>" />
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>" />
<meta property="og:image" content="<?php echo $img_src; ?>" />
<meta property="article:publisher" content="http://facebook.com/easytutoriel.officiel" />
<meta property="article:author" content="<?php echo $profile_url; ?>" />

<?php
} else {
return;
}
}
add_action('wp_head', 'fb_opengraph', 5);

/* END facebook meta data */

La première fonction va permettre d’ajouter les attributs nécessaire pour que Open Graph marche, sans ces attributs xmlns rien ne va marcher !

3

Une fois cela est fait, affichez le code source de l’une des pages de votre site, vérifiez que les balises <meta> sont bien remplis.

4

Si vous avez déjà partagé un lien sur Facebook, et que vous voulez vider le cache pour le RE-partager avec les nouveaux metas, ouvrez ce lien : https://developers.facebook.com/tools/debug/og/object/

Mettez le lien de votre article, puis cliquez sur le bouton « Fetch new scrape information« .

5

Et voilà !

Si vous avez des questions sur l’Open Graph n’hésitez pas à publier des commentaires =)

Au prochain tutoriel, merci de votre lecture ;)

Soufiane – Easytutoriel.com

Mots clés :
Publié avant 4 ans
4 commentaires