Comment intégrer Facebook Open Graph avec WordPress

Le protocole Facebook Open Graph vous permet de partager le contenu de votre blog non seulement avec vos lecteurs, mais également avec leurs amis Facebook. La meilleure partie est - chaque fois que quelqu'un aimé votre contenu, il sera publié sur leur profil Facebook. Mais ce n'est pas tout, Open Graph vous permet d'explorer des moyens plus intéressants d'interagir et de dialoguer avec vos lecteurs. En fin de compte - si cela est bien fait - cela renforce votre marque et augmente le trafic de votre site.

Dans le post d'aujourd'hui, nous allons examiner comment intégrer Facebook Open Graph avec un WordPress auto-hébergé dans un guide détaillé, étape par étape. Il vous faudra éditer vos thèmes WordPress existants et créer une application Facebook (si vous n'en avez pas).

Prêt? Lançons le navigateur et votre éditeur de code préféré. Guide complet après saut.

Étape 1. Créer une application facebook

Nous aurons besoin d'un ID d'application et pour obtenir cela, vous devrez créer une application Facebook. Si vous en avez déjà un, passez à l'étape 2.

Créer une application est facile, voici ce que vous faites:

1. Connectez-vous à Facebook, allez à la page du développeur.
2. Cliquez sur "Configurer une nouvelle application"bouton en haut à droite.
3. Donner un nom à votre nouvelle application, se mettre d'accord aux termes de Facebook, appuyez sur Créer une application.
4. Aller à Site Internet onglet, remplissez URL du site et Domaine du site.
5. Notez la valeur de ID d'application quelque part et frapper le "Sauvegarder les modifications" bouton.

C'est tout! Vous pouvez toujours revenir plus tard pour compléter le reste des informations..

Étape 2. Remplacer Étiquette

Ouvrez le fichier d'en-tête de votre thème (header.php) dans votre éditeur préféré. Gardez toujours une copie de sauvegarde au cas où quelque chose se passe.

Recherchez cette ligne de code suivante ou celle commençant par >

Remplacez-le par:

Laissez header.php ouvert, nous en aurons besoin pour la 3ème étape.

Étape 3. Insérez OG Mots clés

Collez le code suivant juste après tag, ou avant étiquette.

       "/>          

Voici quelques-unes des valeurs que vous devrez modifier:

• Ligne 3: Remplacer votre_fb_app_id avec le ID d'application de l'étape 1.
• Ligne 4: Vous pouvez obtenir votre_fb_admin_id sous votre page Facebook Insights, (Plus d'infos). Clique sur le "Insight pour votre site web"bouton vert, récupère toute la chaîne de code et remplace la ligne 4.
• Ligne 12: Cette ligne détermine l'image qui représente votre message. Si votre thème prend en charge les miniatures de publication dans WordPress, cela devrait fonctionner correctement. Mais s'il ne le fait pas, il échouera gracieusement sans image. Découvrez l'étape 3a pour une solution de contournement alternative.
• Ligne 19: Remplacer logo.jpg avec une URL au logo de votre blog. Il sera affiché quand une page non-post sur votre blog sera partagée sur Facebook..

Étape 3a - Lorsque "wp_get_attachment_thumb_url" échoue

Quand wp_get_attachment_thumb_url () Si vous n’avez pas réussi à travailler, vous utiliserez probablement un attribut de contenu sans valeur, comme ci-dessous:

Une solution de contournement simple consiste à remplacer la ligne 12 par le code suivant:

Ensuite, ouvrez functions.php et insérez le code suivant:

function catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ correspond à); $ first_img = $ correspond à [1] [0]; if (empty ($ first_img)) // Définit une image par défaut $ first_img = "/images/default.jpg";  return $ first_img; 

Ce code de remplacement tente d'utiliser un appel de fonction catch_that_image () saisir et sortir l'URL de la première image qu'il rencontre. Remplace la ligne 10 par l'URL d'une image par défaut si la fonction ne trouve pas sa première image.

Étape 4. Insérez le SDK Javascript de Facebook

Le code JavaScript suivant vous permet d'accéder à toutes les fonctionnalités de l'API Graph et des dialogues. Il vous permet également d'intégrer facilement les plugins sociaux de Facebook tels que le bouton J'aime, Facepile, Recommendations, etc..

Placez-le dans header.php, juste après

Remplacer votre_fb_app_id en ligne 4 avec ID d'application de l'étape 1 plus tôt.

Étape 5. Testons-le!

Nous avons terminé l'intégration de Facebook Open Graph au blog WordPress. Faisons un test pour nous assurer que nous avons bien fait les choses.

Test n ° 1 - Voir le code source

Jetez un coup d’œil aux codes sources de l’un des articles du blog, vous devriez avoir quelque chose comme ça:

Vérifiez les propriétés et leurs valeurs, assurez-vous qu'elles sont correctes.

Test n ° 2 - Installer une boîte similaire

Si vous n'avez pas installé de bouton Facebook Like, alors il est probablement temps de vous en procurer un. Placez le code suivant n'importe où (de préférence avant le contenu ou après le contenu) à l'intérieur single.php:

Ensuite, demandez à un ami de Comme il. Vous devriez voir quelque chose de similaire apparaître dans son profil Facebook:

Extra: Plugin WordPress

Si vous n'avez pas réussi à installer les codes ou si vous avez besoin que cela soit fait rapidement et facilement, il existe un plugin WordPress pour cela..

Facebook Open Graph Meta dans WordPress est un plugin WordPress qui ajoute des métadonnées Facebook pour éviter tout problème de vignette, problème de titre incorrect, problème de description erroné, etc..