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’aime Exemple de code Paramètres Réglage de la langue Questions/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 générer le code de 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.

4. Supprimer la répétition si nécessaire

Si vous disposez déjà d'un code pour l'activation des App Events, supprimez l'instruction autoLogAppEvents=1 du code collé afin d'éviter les connexions en double.

Configurateur du bouton J’aime

URL vers J’aime

Width

Disposition

standard

Type d’action

Taille du bouton

small

Ajouter une bouton Partager

Obtenir le code

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 tags 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 async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></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">
  </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.	Aucun
`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`
`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=v7.0";

Vous devrez peut-être modifier la largeur d’un plugin social si vous voulez afficher plusieurs langues. Vous trouverez plus d’informations sur notre page Localisation et traduction.

Articles connexes

Questions/réponses sur les Social Plugins Partage pour les administrateurs de sites SDK Facebook pour JavaScript