Bouton Partager

Le bouton Partager permet aux visiteurs d’ajouter un message personnalisé aux liens avant de les partager sur leur journal, dans des groupes ou avec leurs amis dans un message Facebook.

Si votre application est au format natif iOS ou Android, nous vous recommandons d’utiliser les outils natifs Boîte de dialogue Partager sous iOS et Boîte de dialogue Partager sous Android à la place.

Si votre site web n’a pas besoin de bouton pour ouvrir une boîte de dialogue de partage ou si le bouton fourni par Facebook ne rentre pas dans la disposition de votre site web, la boîte de dialogue Partager pour le web est également disponible. Sachez que vous n’avez pas besoin de mettre en œuvre Facebook Login ni de demander d’autres autorisations par l’intermédiaire de la certification d’app pour utiliser ce plugin.

Étape par étape

1. Choisir l’URL ou la Page

Choisissez l’URL du site web ou de la Page Facebook que vous souhaitez partager.

2. Configurateur de code

Collez l’URL dans le configurateur de code et définissez l’attribut layout (disposition) pour votre bouton Partager. Cliquez sur le bouton Get Code (Obtenir le code) pour créer le code de votre bouton Partager.

3. Copier et coller l’extrait HTML

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

Configurateur du bouton Partager

Url vers partager
Disposition
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 share button code -->
  <div class="fb-share-button" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>

</body>
</html>

Paramètres

ParamètreAttribut HTML5DescriptionValeur par défaut

href

data-href

L’URL absolue de la page qui sera partagée.

Pour les versions XFBML et HTML5, la valeur par défaut est l’URL actuelle.

layout

data-layout

Sélectionne l’une des dispositions disponibles pour le plugin. Peut être l’une des valeurs suivantes : box_count, button_count, button.

icon_link

mobile_iframe

data-mobile_iframe

S’il est défini sur true, le bouton Partager ouvrira la boîte de dialogue Partager dans une iFrame (au lieu d’une fenêtre contextuelle) en haut de votre site web sur mobile. Cette option est disponible uniquement pour les appareils mobiles, pas sur les ordinateurs. Pour en savoir plus, consultez la page Boîte de dialogue Partager sur le web mobile.

false

size

data-size

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

small