Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Comment ajouter le bouton "J'aime" de Facebook dans une page de site ou blog

Vous voulez insérer le bouton "J'aime" ou "Like" de Facebook dans une page de votre site ou blog comme celle-ci:

 

pour permettre aux visiteurs de votre site de faire savoir qu'ils aiment votre article ou votre site?

Le bouton parmet de partager votre contenu avec d'autres utiisateurs via le réseau social Facebook. Ainsi, l'utilisateur qui aurait cliquer sur le bouton "j'aime" verra un lien vers votre page apparaittre dans ses Nouvelles.

Rien de compliqué. Il existe 3 genres de codes à insérer. A vous de choisir celui qui vous convient le plus.

D'abord, vous devez remplir la petite case avec l'adresse de votre page, puis choisir les options du bouton. Si vous cochez "send Button, vous n'aurez pas le code en Iframe, vous l'aurez en HTML5 et en XFBML.

Vous pouvez personnaliser le bouton au niveau de la taille, du style et si vous voulez avoir les photos des personnes qui aiment votre page etc.

Formulaire à remplir pour le bouton j'aime de facebook

Attributs

 

Une fois, les informations remplies, cliquez sur "Get Code", vous aurez alors cette fenêtre pop-up avec les codes en HTML5, XFBML et Iframe (si vous n'avez pas coché la case "Send Button).

Pour le premier code en HTML5:

Code HTML5 like facebook

Vous avez les instructions nécessaires pour son insertion:

1- Placez le premier code au début du code de votre page juste après la balise <body>

</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2- Placez le 2ème code là où vous voulez que le bouton apparaisse. par exemple dans la ligne suivante:

Le deuxième code:

<div class="fb-like" data-href="http://www.dreamer.weboptime.com/inserer-bouton-jaime-facebook.html" data-send="false" data-width="450" data-show-faces="true"></div>

Pour le deuxième code en FXFBML:

Code jaime de facebook en XFBML

1- Placez le code comme pour la première méthode juste après <body>

2- Ajoutez un tag pour la compatibilité avec les anciennes versions d'Internet Explorer (en gras ce que vous devez ajouter):

 

<head>
<title>Ins&eacute;rer le bouton j'aime de facebook dans un site</title>
<meta name="keywords" content="bouton, facebook, j'aime, insérer, insertion, code" />
<meta name="description" content="Comment insérer le bouton j'aime de Facebook dans une page de site ou blog." />
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

3- Placez le code du module là vous voulez qu'il apparaisse.

Pour le troisième code en iframe:

Code j'aime en iframe

C'est le plus simple à insérer, il suffit de le mettre à l'endroit où vous voulez le voir.

Tous les codes sont à mettre dans la partie "Code" de Dreamweaver. Vous cliquez sur l'endroit dans "Création" et vous allez à "Code" pour mettre le code là où ça pointe.

L'insertion du code se fait dans le code de la page comme ceci:

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.dreamer.weboptime.com%2Finserer-bouton-jaime-facebook.html&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Le code du bouton est en gras. A vous de choisir l'endroit où vous voulez qu'il apparaisse et faites l'insertion en utilisant un éditeur de code comme Dreamweaver, Wordpad ou simplement Bloc notes.

Le code peut-être obtenu en entrant les informations sur votre page dans le formulaire: http://developers.facebook.com/docs/reference/plugins/like/

A quoi sert ce bouton?

 

Lorsque votre page Web représente une entité du monde réel, des choses comme des films, des équipes sportives, des célébrités et des restaurants, utiliser le protocole Open Graph pour spécifier des informations sur l'entité. Si vous incluez les balises Open Graph sur votre page Web, votre page devient équivalente à une page Facebook. Cela signifie que lorsque l'utilisateur clique sur un bouton comme sur votre page, une connexion est établie entre votre page et l'utilisateur. Votre page apparaîtra dans le "Goûts et Loisirs» du profil de l'utilisateur, et vous avez la possibilité de publier des mises à jour de l'utilisateur. Votre page apparaîtra dans les lieux mêmes que les pages Facebook apparaissent autour du site (par exemple de recherche), et vous pouvez cibler des annonces sur les gens qui aiment votre contenu. et.

Il y a deux implémentations bouton comme: XFBML et Iframe. Le XFBML (également disponible en HTML5 balisage conforme) la version est plus polyvalente, mais requiert l'utilisation du SDK JavaScript . Le XFBML dynamiquement redimensionne sa hauteur selon qu'il y ait des photos de profil à afficher, vous donne la possibilité (grâce à la bibliothèque Javascript) pour écouter comme des événements afin que vous sachiez en temps réel lorsque l'utilisateur clique sur le bouton Like, et il donne toujours à l'utilisateur la possibilité d'ajouter un commentaire optionnel de la comme. Si les utilisateurs font ajouter un commentaire, l'histoire publiée à partir de Facebook aura plus d'importance.

Astuces Dreamweaver

Pour un aperçu dans Firefox, cliquez sur F12.

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter