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 app 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 fournie pour le partage de liens. 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 contrôle app pour utiliser ce plugin.

Configurateur du bouton Partager
Exemple de code
Paramètres
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 partager.

2. Configurateur de code

Collez l’URL dans le configurateur de code et définissez l’attribut layout de votre bouton Partager. Cliquez sur le bouton Get Code pour générer 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

button_count

Taille du bouton

small

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>(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&version=v3.0";
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ètre	Attribut HTML5	Description	Valeur 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.
`lazy`	`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).	`false`
`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`~~ Abandonné	~~`data-mobile_iframe`~~	S’il est défini sur `true`, le bouton Partager ouvre la boîte de dialogue Partager dans une iFrame (au lieu d’une fenêtre contextuelle) par dessus votre site web sur mobile. Cette option n’est disponible que pour les appareils mobiles, pas sur les ordinateurs de bureau. 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`

Articles connexes

Questions/réponses sur les Social Plugins Boîte de dialogue Partager Partage pour les administrateurs de sites SDK Facebook pour JavaScript