Facebook : Comment installer un bouton ‘J’aime’ (like) sur un blog WordPress


29 avril 2010 Jean-Dim itri De wavrin View Com ments

Facebook propose 6 Social Plugins. Voici un tutoriel pour ajouter un bouton "J'aime" (Like Button) dans le thème de votre blog WordPress. La méthode que je détaille s'appuie sur le JavaScript SDK de Facebook.


Etape 1 : Créez votre compte sur Facebook.


Pour pouvoir utiliser le JavaScript SDK, il vous faut tout d'abord créer une application de type « site » sur Facebook… Pas de panique c'est très simple. Loguez vous sur votre compte Facebook puis rendez-vous sur la page de création d'une application Facebook. Donnez lui le nom de votre site  ou blog (par exemple), acceptez les conditions (après les avoir lues) et cliquez sur « créer une application ». Copier l'ID de l'application dans Bloc-notes (NotePad), cette ID va vous servir dans l'étape suivante. N'oubliez pas de cliquer sur « Enregistrez les modifications » en bas de la page. Pour info, vous retrouvez et pouvez modifier toutes vos applications sur cette page.



Etape 2 : Installez le JavaScript SDK Facebook

Copiez le bout de code suivant :

xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"

Puis sous WordPress, allez dans l'éditeur de thème, éditez le fichier « en-tête » (header.php) et collez le bout de code entre :

<html xmlns="http://www.w3.org/1999/xhtml&quot; et >.

Rendez-vous sur la page du JavaScript SDK Facebook et copiez le bout de code susmentionné débutant par :

<div id="fb-root">

et finissant par :

</script>

Retournez dans le fichier « entête » (header.php) et collez le bout de code susmentionné sous la balise <body>. Enfin, remplacez le texte « App ID » par votre ID créée dans l'étape 1.

N'oubliez de sauvegardez vos changements.

N.B. :

Le SDK JavaScript permet d'accéder à toutes les fonctionnalités de l'API
graphique via JavaScript, et il fournit un ensemble riche de fonctionnalités
côté client pour l'authentification et le partage. Par exemple l'utilisation,
vérifiez Facebook pour les Sites Web et le Guide d'authentification. Le moyen le
plus efficace pour charger le SDK sur votre site est de le charger de façon
asynchrone, il ne bloque pas le chargement d'autres éléments de votre page:
chargement d'autres éléments de votre page:

> <div Id="fb-root"> </ div>

<script>
 

window.fbAsyncInit = function () Conseil pour une section de contenu
developers.facebook.com. (AppID: "votre identifiant app", le statut: true, le
cookie: true,

xfbml: true));
  );
  (Function () (
    var e = document.createElement ('script'); e.async = true;
+ Document.location.protocol e.src =
»/ / Connect.facebook.net / fr / all.js;
    document.getElementById ('fb-root'). appendChild (e);
}());

</ Script>

Le SDK est open source et est disponible sur GitHub.


Etape 3 : Installez le bouton J'aime (like) dans un article WordPress

Rendez-vous sur la page Développeur Like Button . Facebook vous propose un générateur de code. Dans le champs « URL to Like », copiez/collez le texte suivant :

<?php the_permalink(); ?>.

Complétez les autres champs avec ce qui vous convient le mieux puis cliquez sur « Get Code ». Une pop-up s'ouvre, copiez le code XFBML commençant par

<fb:like

et se terminant par

</fb:like>.

Sous Word Press, allez dans l'éditeur de thème, éditez le fichier « Article seul » (Single.php) et collez le code XFBML mentionné précédemment à l'endroit où vous souhaitez placer le bouton « J'aime ». Par exemple, pour placer le bouton à la fin de votre article, collez le code XFBML suivant :

<?php the_content('Lire la suite de cet article'); ?>

Remarque : N'oubliez de sauvegardez vos changements.
Voila, c'est fait.

Cela vous convient ?

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s


%d blogueurs aiment cette page :