Social Plugins

Bouton J’aime pour le web

Quand une personne qui consulte votre page web clique sur le bouton Jʼaime, un app event est déclenché pour consigner le J’aime dans Facebook.

Personnalisation du bouton J’aime

Utilisez le Configurateur du bouton J’aime pour obtenir le code du bouton J’aime afin de l’insérer dans votre page web.

  1. Configurez l’URL de la page web sur laquelle vous souhaitez placer le bouton J’aime
  2. Personnalisez votre bouton J’aime
  3. Affichez un aperçu de votre bouton
  4. Cliquez sur Obtenir le code, puis copiez et collez le code sur votre page web

Configurateur du bouton J’aime

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

Si vous consignez déjà des app events, supprimez l’instruction autoLogAppEvents=1 du code du bouton afin d’éviter les connexions en double.

Utilisez les tags méta Open Graph pour modifier l’aperçu du lien. Le tag og:url et l’attribut data-ref doivent avoir la même URL.

Exemple de code complet

Appliquez un format pour plus de lisibilité.

<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={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

Attributs HTML5 du bouton J’aime

Attribut HTML5 Description

data-action

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

data-colorscheme

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

data-href

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

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 utiliser true. La valeur par défaut est false.

data-layout

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

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.

data-share

Indique si un bouton de partage doit être ajouté à côté du bouton J’aime. Peut être la valeur true ou false (par défaut). Cela fonctionne uniquement avec la version XFBML.

data-size

Le bouton est disponible en deux tailles, à savoir large (grand) et small (petit, taille par défaut).

data-width

La largeur du plugin (composition standard uniquement), qui doit respecter la valeur minimale et par défaut pour la largeur. Pour en savoir plus, consultez le tableau Paramètres de composition.

Paramètres de composition

Les paramètres de composition sont facultatifs.

Composition 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. 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={graph-api-version} />";

Il peut être nécessaire de modifier la largeur d’un plugin social pour afficher plusieurs langues.

Voir aussi