« Quels sont les flux RSS des nouvelles catégories ? | Page d'accueil | Présentation : Internet au service des acteurs de la solidarité »

18/05/2010

Comment ajouter un bouton « Like » Facebook sur votre blog ?

Plus simple qu'un commentaire, le module proposé par Facebook pour ajouter le bouton « Like » (« J'aime ») permet à l'internaute de vous informer (ainsi que les autres internautes) du fait qu'il ait apprécié votre article ou votre blog. Connaissant l'importance qu'accordent les internautes aux avis de leurs pairs, ce bouton « Like » peut apparaître comme une véritable incitation à la lecture de votre blog. Qui plus est, dès qu'un internaute aime votre blog ou article, cela s'affiche automatiquement sur son mur Facebook. Voilà encore une bonne illustration des possibilités de viralité que permet le web 2.0.

Ce tutoriel pour installer ce bouton « Like » se déclinera en 2 étapes. Dans un premier temps, nous vous expliquerons comment récupérer le code proposé par Facebook pour éditer ce bouton « Like » puis dans un deuxième temps, nous verrons comment et où insérer ce code Facebook.

1. Première étape : obtenir le code qui vous ouvrira la communication vers votre lectorat.

Pour ce faire, rendez-vous sur le page suivante : http://developers.facebook.com/docs/reference/plugins/like


Like%20Facebook%20button.JPG

Remplir les différents champs qui se présentent à vous :

-          URL : vous devez renseigner l'adresse de votre site (mais n'est pas obligatoire si vous choisissez à la fin de la manipulation d'utiliser le code XFBML, qui est d'ailleurs fortement conseillé).

-          Layout Styles : Cet onglet permet de personnaliser l'apparence de votre bouton Like.

o   Si vous souhaitez un affichage comme celui-ci:  boton%20apparence%20layout%20standard.JPGChoisissez l'onglet « Standard »

o   Si vous souhaitez un affichage simple comme celui-ci : boton%20apparence%20layout%20count.JPG choisissez l'onglet « Button_count »

-          En cochant « Show faces », vous autorisez l'affichage des photos des profil Facebook qui aiment votre article.

-          « Verb to display » vous invite à choisir entre le bouton de vote « like » et le bouton « Recommend » pour que l'internaute recommande votre article sur son mur Facebook.

-          « Font » vous permet de choisir la police qui vous plaît.

-          « Color Scheme » vous invite à choisir la couleur de fond de votre bouton (seulement 2 couleurs disponibles).

Une fois tous les éléments renseignés, cliquez sur « Get the code ». Une pop up s'affiche. A vous de copier le code.

obtenir%20code%20Facebook%20Like.JPG


2 codes différents s'offrent à vous : Le code « iframe » et le code XFBML. Le code « iframe » vous évite quelques manipulations supplémentaires par rapport aux codes XFBML. Cependant, le code XFBML est plus souple et permet de « Liker » uniquement des notes puisqu'il s'adapte à l'URL de la page sur lequel il est copié. D'ailleurs, si vous optez pour ce code (ce que nous vous conseillons fortement), vous n'avez pas besoin de remplir le champ URL. Mais pour que votre code XFBML  soit effectif, vous devez le faire précéder de ce code :

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

{literal}<script>

window.fbAsyncInit = function() {

FB.init({appId: 'your app id', status: true, cookie: true,

xfbml: true});

};

(function() {

var e = document.createElement('script'); e.async = true;

e.src = document.location.protocol +

'//connect.facebook.net/en_US/all.js';

document.getElementById('fb-root').appendChild(e);

}());

</script>{/literal}


A la suite, vous ajoutez le code XFBML copié comme l'exemple ci dessous :

<fb:like width="450" font="arial"></fb:like>


Maintenant que vous avez votre code Facebook, il vous faut aller le copier sur votre blog.


2. Où copier votre code de votre bouton « Like » Facebook

Il ne vous reste qu'à aller copier votre code sur le back office de votre blog en allant dans Présentation>Configuration avancée puis « modèle de la page d'accueil » en cliquant sur « modifier le template ». Là, vous copiez le code où vous voulez que votre bouton apparaisse. A noter qu'à ce niveau, les personnes qui cliqueront sur votre bouton « Like » aimeront votre blog de façon générale.

Pour insérer votre bouton « Like » automatiquement et surtout indépendamment sur chacune de vos notes,  allez dans Présentation>Configuration avancée puis « Modèle de la page lien permanent » en cliquant sur « modifier le template ». Une pop up s'ouvre : copiez le code là où, vous voulez que votre code apparaisse. Par exemple, si vous voulez que votre bouton se situe en bas de chacune de vos notes (ce qui serait logique), insérez votre code juste en dessous de la balise suivante :

<div class="postbottom-decorator2">

que vous trouverez facilement dans votre pop-up en faisant un « Ctrl A » (vous permettant de tout sélectionner) puis "Ctrl F" (permettant d'effectuer une recherche dans votre sélection) puis vous tapez cette balise.

Vous cliquez sur « enregistrer ces informations » et le tour est joué. Le résultat ci-dessous :


rendu%20bouton%20like%20facebook.JPG

Publié dans 5. Votre blog, fond et forme | Lien permanent | Commentaires (1) | Tags : facebook, bouton like, blog, web 2.0 |

Commentaires

Bonjour, je cherche désespérément de mettre un bouton like sur mon blog de la manière que vous expliquez mais dès que je clic sur get code ça me met ce message "Seuls les développeurs vérifiés peuvent être ajoutés à la liste des développeurs de cette application. Rendez-vous sur http://www.facebook.com/help/?faq=17580 pour plus de détails." donc je me rends sur cette adresse ou il me demande mon num pour m'envoyer un code, code que je ne reçois jamais, donc je n'arrive pas à mettre ce bouton like.

Comment puis-je faire? N'avez vous pas un code HTLM à me donner dans lequel je puisse uniquement rajouter mon url...

Pouvez vous m'aider s'il vous plait je passe des heures a essayer de comprendre ça me rend dingue!!!

Merci beaucoupppp

(dsl de vous avoir écris dans vos commentaires mais je n'ai pas trouver votre adresse mail)

Sandra

Écrit par : sandra | 18/05/2011

Écrire un commentaire

NB : Les commentaires de ce blog sont modérés.