Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
5 mai 2010 3 05 /05 /mai /2010 02:12

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" 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 ?

Partager cet article

Repost 0
Published by Francis Guillot - dans Informatique Windows et Vista
commenter cet article

commentaires

Présentation

  • : Francis Guillot
  • Francis Guillot
  • : informatique et internet - trucs et astuces Windows XP 7 (seven) et Vista - sites internet – comptabilité et fiscalité - tableau de bord - fiscalité - création d'entreprises - droit civil, social et du travail
  • Contact

Like

Yahoo

Myspaceflickr-yahoo-logo.png.v4.png

Recherche