Bouton J’aime pour le Web

Modifications apportées aux plugins sociaux pour l’Europe

Les utilisateur·ices qui se servent des plugins sociaux en Europe risquent de voir s’afficher une mise à jour de l’invite d’acceptation des cookies dans les produits Facebook. Nous ne proposerons plus les plugins sociaux « J’aime » et « Commenter » aux utilisateurs et utilisatrices d’Europe, sauf si ces personnes sont 1) connectées à leur compte Facebook et 2) si elles ont donné leur consentement sur la commande « Cookies des applications et site web ». Si ces deux conditions sont remplies, l’utilisateur·ice pourra voir et utiliser les plugins tels que les boutons « J’aime » et « Commenter ». Si l’une des conditions ci-dessus n’est pas remplie, l’utilisateur·ice ne pourra pas voir les plugins.

L’Europe comprend une liste spécifique de pays, dont les suivants :

Union Européenne (UE) : Allemagne, Autriche, Belgique, Bulgarie, Croatie, Danemark, Espagne, Estonie, Finlande, France, Grèce, Hongrie, Irlande, Italie, Lettonie, Lituanie, Luxembourg, Malte, Pays-Bas, Pologne, Portugal, République de Chypre, République tchèque, Roumanie, Slovaquie, Slovénie, Suède
Membres n’appartenant pas à l’UE, mais appartenant à l’EEE uniquement/AELE ou l’Union douanière : [EEE seulement/AELE] Islande, Liechtenstein et Norvège ; Suisse : [Union douanière de l’UE] toutes les Îles anglo-normandes, Île de Man, Monaco ; Bases souveraines britanniques à Chypre ; [Union douanière européenne] Andorre, Cité du Vatican, Saint-Marin.
Membres n’appartenant pas à l’UE, mais appartenant aux régions ultrapériphériques (RUP) de l’UE : Açores, Guadeloupe, Guyane française, Îles Canaries, Madère, Martinique, Mayotte, Réunion, Saint-Martin.
Royaume-Uni (toutes les îles britanniques)

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.

Configurez l’URL de la page web sur laquelle vous souhaitez placer le bouton J’aime
Personnalisez votre bouton J’aime
Affichez un aperçu de votre bouton
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

standard

Type d’action

Taille du bouton

small

Ajouter une bouton Partager

Obtenir le code

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

Le code a été mis en forme 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}" 
        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, 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 s’adresse aux enfants de moins de 13 ans, vous devez utiliser `true`. La valeur par défaut est `false`.
`data-layout`	Sélectionne l’une des dispositions 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-lazy`	`true` signifie utiliser le mécanisme de chargement différé du navigateur en configurant l’attribut d’iFrame `loading="lazy"`. L’effet est que le navigateur n’affiche pas le plugin s’il n’est pas près de la fenêtre d’affichage et que le plugin risque de ne jamais être visible. Peut être l’une des valeurs suivantes : `true` ou `false` (valeur par défaut).
`data-ref`	Un libellé pour le suivi des références, 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 Partager 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 (disposition 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 photos) 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.