Comment intégrer Facebook Open Graph dans WordPress?

Quand une personne « aime » votre contenu, un résumé de la page s’affichera sur son mur Facebook. l’Open Data Graph Meta vous permettra d’avoir une correspondance exacte entre le titre de votre article, la vignette et la description comme sur cet exemple:

Si vous avez un blog WordPress, c’est très simple, il suffit d’ajouter quelques meta dans la page header.php de votre thème.

1) Se munir de l’ID Facebook Admin et de l’APP_ID

Mais avant de modifier le fichier header.php, vous devez vous munir de l’« id facebook admin » et de votre « app_id » que vous pouvez retrouver sur cette page http://www.facebook.com/insights/.
Cliquez en haut à droite sur « statistiques de votre site Web » ou « insights for your website », puis choisissez la page en question et retenez l’ID.
Voir les deux screenshots ci-dessous:
Votre fb:App_ID:

Votre fb:admin:

Vous aurez également besoin de connaître l’adresse vers le logo principal de votre site. Si vous n’en avez pas, je vous conseille d’en créer un et de l’ajouter dans le dossier images de votre thème WordPress.

2) Ajouter les meta tags dans la page header.php

Voici les tages dont vous aurez besoin pour la suite de ce tuto:
Title: c’est le titre de votre page ou de votre article. Il apparaîtra comme titre lorsque les gens vont partager votre article sur Facebook.
Description: le texte descriptif qui sera affiché sous le titre lorsque les gens vont partager votre article sur Facebook.
Type: cela définit la catégorie de l’information. Les catégories sont définies dans le protocole Open Graph, et il en existe trois: blog, article, site Web.
URL: l’URL de la page.
Image: l’image qui sera ajoutée sur la gauche lorsque les gens partageront le contenu.
Site_name: le nom de votre site.

Il ne vous reste plus qu’à insérer le code suivant dans votre page header.php. N’oubliez surtout pas de remplacer votre fb:app_id, votre fb:admin! La première ligne de code pourrait déjà être présente, faîtes attention à ne pas la dupliquer et veillez à la personnaliser.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" <?php language_attributes(); ?>>
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
    <meta property="fb:app_id" content="your_app_id" />
    <meta property="fb:admins" content="your_admin_id" />
    <meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if (is_single()) { ?>
    <meta property="og:title" content="<?php single_post_title(''); ?>" />
    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php } else { ?>
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
    <meta property="og:description" content="<?php bloginfo('description'); ?>" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />
<?php } ?>

Vous pouvez maintenant lire le prochain article pour intégrer votre bouton « Like » de Facebook sans avoir peur du résultat!

L’article Comment intégrer Facebook Open Graph dans WordPress? est apparu en premier sur LRWEB.