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. Utilisez ensuite 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="https://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="https://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 = "https://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="https://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.

Modification 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 de js.src pour utiliser 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 = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.11"; 

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.