Commentaires intégrés

Les commentaires intégrés permettent de placer facilement des commentaires des publications publiques (provenant d’une Page ou d’un profil Facebook) dans le contenu de votre site ou de votre page web. Seuls les commentaires publics provenant de Pages et de profils Facebook peuvent être intégrés.

ParamètresDisposition

Étape par étape

1. Choisir le lien d’un commentaire

Choisissez le lien d’un commentaire que vous souhaitez utiliser avec le plugin Embedded Comments. Pour obtenir le lien vers un commentaire, cliquez avec le bouton droit sur l’estampille temporelle à côté de celui-ci et copiez l’adresse du lien (pour plus de détails, consultez la section : Obtention de l’URL d’un commentaire).

2. Mettre à jour l’extrait HTML

Mettez à jour l’attribut data-href de l’URL de votre commentaire :

<!-- 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=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your embedded comments code -->
<div class="fb-comment-embed"
   data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185"
   data-width="500"></div>

3. Copier et coller l’extrait HTML

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

Générateur de code des commentaires intégrés

Paramètres

Le configurateur ci-dessus n’inclut pas tous les paramètres possibles pour le lecteur vidéo intégré. Vous pouvez également modifier les paramètres suivants :

Paramètre Description Valeur par défaut

data-href

L’URL absolue du commentaire.

n/a

data-width

La largeur du conteneur du commentaire intégré. La valeur minimale est 220px.

560px sur ordinateur. Sur mobile, ce paramètre n’est pas pris en compte et la largeur est toujours de 100% (largeur fluide).

data-include-parent

À définir sur true pour inclure le commentaire parent (si l’URL est une réponse).

false

Obtention de l’URL d’un commentaire

Pour obtenir l’URL d’un commentaire :

  1. Cliquez sur l’heure de publication du commentaire (par exemple, l’indication « 18 heures » affichée en rouge sur la capture d’écran ci-dessous). Attendez que la page soit rechargée.
  2. Copiez l’URL mise à jour à partir de la barre d’adresse de votre navigateur. Elle doit contenir la chaîne comment_id= (voir capture d’écran).

Disposition sur le bureau

Vous pouvez ajuster la largeur des commentaires intégrés sur le bureau à l’aide de l’attribut data-width dans la balise du commentaire intégré, comme indiqué dans l’exemple ci-dessous. Choisissez une valeur comprise entre 350 et 750 pixels.

N’utilisez pas de balises de style CSS pour modifier la taille d’un plugin. Cela peut créer des erreurs d’affichage.

<!-- WRONG! -->
<style type="text/css">
.fb-comment-comment {
  width: 500px;
}
</style>
<div class="fb-comment-comment" data-href="{your-comment-url}"></div>

<!-- CORRECT -->
<div class="fb-comment-comment" data-href="{your-comment-url}" data-width="500"></div>

Intégration à partir de Facebook

Vous pouvez obtenir le code intégré directement à partir des commentaires Facebook publics.

Intégration à partir du plugin Comments

Vous pouvez obtenir le code intégré directement à partir du plugin Comments.

Modification de la langue

Vous pouvez modifier la langue du plugin Embedded Comments 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&amp;version=v2.2";

Les paramètres régionaux pris en charge sont répertoriés dans le fichier XML de paramètres régionaux de Facebook.

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