Bouton J’aime pour le web

Un clic sur le bouton J’aime ajoute la mention J’aime à certains éléments de contenu sur le web, et les partage sur Facebook. Vous pouvez également afficher un bouton Partager à côté du bouton J’aime pour permettre aux visiteurs d’ajouter un message personnel et de choisir les personnes avec lesquelles ils partagent le contenu.

Configurateur du bouton J’aimeExemple de codeParamètresRéglage de la langueQuestions/réponses

Étape par étape

1. Choisir l’URL ou la Page

Choisissez l’URL du site web ou de la Page Facebook que vous souhaitez utiliser avec le bouton J’aime.

2. Configurateur de code

Collez l’URL dans le configurateur de code et définissez l’attribut width (Largeur) pour votre bouton J’aime. Cliquez sur le bouton Get Code (Obtenir le code) pour créer votre bouton J’aime.

3. Copier et coller l’extrait HTML

Copiez et collez l’extrait dans le code HTML du site web de destination.

Configurateur du bouton J’aime

URL vers J’aime
Width
Disposition
Type d’action
Taille du bouton

Exemple de code complet

Copiez et collez l’exemple de code sur votre site web. Remplacez la valeur data-href par l’URL de votre site web. Ensuite, utilisez les balises méta og:*** pour modifier l’aperçu de votre lien. og:url et data-href doivent utiliser la même URL.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <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/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
  </div>

</body>
</html>
Personnaliser l’aperçu du lien

Paramètres

En plus des paramètres ci-dessus, vous pouvez modifier les éléments suivants :

Paramètre Attribut HTML5 Description Valeur par défaut

action.

data-action.

Le verbe à afficher sur le bouton. Peut être soit like (J’aime), soit recommend (Recommander).

like.

colorscheme.

data-colorscheme.

Le jeu de couleurs utilisé par le plugin pour tout texte autre que le bouton lui-même. Peut être light (clair) ou dark (foncé).

light.

href.

data-href.

L’URL absolue de la page qui recevra la mention J’aime.

URL actuelle.

kid_directed_site.

data-kid-directed-site.

Si votre site web, votre service en ligne ou une partie de votre service vise les enfants de moins de 13 ans, vous devez activer ce paramètre.

false.

layout.

data-layout.

Sélectionne l’une des dispositions disponibles pour le plugin. Peut être l’une des valeurs suivantes : standard, button_count, button ou box_count. Consultez les questions/réponses pour en savoir plus.

standard.

ref.

data-ref.

Un libellé pour le suivi des recommandations, qui doit faire moins de 50 caractères, et peut contenir des caractères alphanumériques et des signes de ponctuation (pour le moment +/=.:_). Consultez les questions/réponses pour en savoir plus.

Aucune

share.

data-share.

Indique si un bouton de partage doit être ajouté à côté du bouton J’aime. Cela fonctionne uniquement avec la version XFBML.

false.

show_faces.

data-show-faces.

Indique si les photos de profil doivent être affichées sous le bouton (disposition standard uniquement). Vous ne devez pas activer ce paramètre sur les sites pour enfants.

false.

size.

data-size.

Le bouton est disponible en deux tailles, à savoir large (grand) et small (petit).

small.

width.

data-width.

La largeur du plugin (disposition standard uniquement), qui doit respecter la valeur minimale et par défaut pour la largeur. Consultez les paramètres de disposition ci-dessous pour obtenir plus de détails.

Apprenez-en plus sur la valeur standard dans les paramètres de disposition.

Paramètres de disposition

Les options suivantes sont disponibles :

Disposition Tailles par défaut

standard.

Largeur minimale : 225 pixels.
Largeur par défaut : 450 pixels.
Hauteur : 35 pixels (sans photo) ou 80 pixels (avec photos).

box_count.

Largeur minimale : 55 pixels.
Largeur par défaut : 55 pixels.
Hauteur : 65 pixels.

button_count.

Largeur minimale : 90 pixels.
Largeur par défaut : 90 pixels.
Hauteur : 20 pixels.

button.

Largeur minimale : 47 pixels.
Largeur par défaut : 47 pixels.
Hauteur : 20 pixels.

Réglage de la langue

Vous pouvez modifier la langue du bouton J’aime en chargeant une version localisée du SDK Facebook pour JavaScript. Lorsque vous chargez le SDK, modifiez la valeur js.src en la remplaçant par votre paramètre régional : remplacez en_US par votre paramètre régional, par exemple fr_FR pour le français (France) :

js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10"; 

Les paramètres régionaux pris en charge sont répertoriés dans le fichier XML de paramètres régionaux de Facebook. Vous devrez peut-être modifier la largeur d’un Social Plugin si vous voulez afficher plusieurs langues. Vous trouverez plus d’informations sur notre page Localisation et traduction.