Yann's blog

Je me suis récemment intéressé au bouton « j’aime » de Facebook, il est depuis quelques mois possible de l’ajouter sur n’importe quelle page web.

C’est derniers jours j’ai eu un peu de temps à perdre alors je l’ai ajouté sur mon site d’hébergement d’images ainsi que sur le blog que vous êtes en train de lire.

Créer une application Facebook

Dans tous les cas il vous faudra une « appId » de Facebook, qu’il faut créer ici : http://developers.facebook.com/setup/. Trois champs à remplir et le tour est joué.

Ajout à wordpress

Alors la rien de plus simple, il suffit d’installer le plugin Like-Button-Plugin-For-Wordpress et de le configurer correctement, principalement le champs AppID.

Ajout à une page web

Si vous avez votre propre site web c’est légèrement plus complexe, bien que si c’est le cas vous avez un minimum de notions et donc ca devient très simple.

Ajouter les meta tag :

<meta property="og:title" content="Rock-Hosting Hébergement d'image"/>
<meta property="og:site_name" content="Rock-Hosting"/>
<meta property="og:type" content="website"/>
<meta property="fb:app_id" content="<code>your app id</code>"/>
<meta property="og:description" content=""/>
<meta property="og:image" content=""/>
<meta property="fb:admins" content=""/>

Les balises og:title, og:site_name, og:type et fb:app_id sont le minimum à renseigner, le reste est facultatif mais je vous conseil des les utiliser.

Bien entendu il faut compléter le champ app_id avec celui que vous avez créé juste au dessus. Quand au champ og:title il représente le texte qui sera affiché sur le site Facebook.

Le champ fb:admins est votre id d’utilisateur Facebook, c’est pour que vous soyez reconnu comme administrateur de la page aux yeux de Facebook.

Le bouton « j’aime » :

Ensuite il faut placer le code Facebook du bouton « j’aime » où vous le souhaitez dans votre page.

<fb:like href="http://img.rock-hosting.com"></fb:like>

Ici c’est le minimum, l’attribut href désigne l’url vers la page en question, c’est la que les utilisateurs de Facebook seront redirigés quand il cliqueront sur le lien dans le profil d’un ami.
La aussi plusieurs options possibles, je ne vais pas les détailler car une page de génération existe avec toutes ces options.

Le javascript

Pour finir un petit bout de code javascript à placé afin d’utiliser l’api Facebook, personnellement je l’ai placé tout en bas de mes pages.

<div id="fb-root"></div>
<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/fr_FR/all.js';
 document.getElementById('fb-root').appendChild(e);
 }());
</script>

Encore une fois il faut renseigner votre application id à la place de « your app id ».

Et voila, c’est terminé, si vous avez besoin de plus vous pouvez consulter cette page Facebook ou encore me poser des questions dans les commentaires