Plugins sociaux

Publications intégrées

Les publications intégrées sont un moyen simple d’intégrer des publications publiques, créées par une Page ou un profil Facebook, au contenu de votre site ou de votre page web. Seules les publications publiques créées par des Pages ou des profils Facebook peuvent être intégrées.

Générateur de code

URL de la publication
La largeur de pixel de la publication (entre 350 et 750)
Obtenir le code

Paramètres

Paramètre Description Valeur par défaut

data-href

L’URL absolue de la publication.

n/a

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

data-width

La largeur de la publication. Min. 350 pixels ; Max. 750 pixels. Ne pas renseigner pour utiliser la largeur fluide.

largeur fluide

data-show-text

Appliqué à la publication de photos. Définissez ce paramètre sur true pour insérer le texte de la publication Facebook, le cas échéant.

false

Obtention du code à partir d’une publication

1. Accéder à votre publication

Vous pouvez obtenir le code à intégrer directement à partir de la publication. Si la publication est publique, cliquez sur l’icône affichée en haut à droite de la publication sur Facebook.

Choisissez Embed Post (Intégrer la publication) dans le menu déroulant :

Pour les photos, sélectionnez le bouton Embed Post (Intégrer la publication) en bas à droite :

2. Copier et coller le code

Une boîte de dialogue contenant le code auquel votre publication sera intégrée s’affiche. Copiez et collez ce code dans votre page web à l’endroit où vous voulez que la publication apparaisse.

Pour obtenir des détails techniques, consultez la section Ajout manuel de code.

Ajout manuel de code

Vous pouvez également intégrer manuellement le code à côté du générateur de code.

1. Obtenir l’URL de la publication

Vous devez tout d’abord obtenir l’URL de la publication que vous voulez partager. La publication doit être publique. Les publications publiques ont une icône grise en forme de globe à côté de l’heure de publication :

À des fins de test, vous pouvez utiliser cet exemple d’URL :

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. Charger le SDK JavaScript

Pour utiliser le plugin Publications intégrées, ou tout autre plugin social, vous devez ajouter le SDK Facebook pour JavaScript à votre site web. Vous n’avez besoin de charger le SDK qu’une seule fois par page, idéalement après la balise ouvrante <body> :

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Pour en savoir plus sur la mise en œuvre du SDK JavaScript, consultez le manuel SDK JavaScript – Démarrage rapide.

3. Placer la balise de la publication intégrée

Ensuite, placez la balise de la publication intégrée à l’endroit de votre choix sur votre site web. Remplacez {your-post-url} par l’URL de votre publication.

<div class="fb-post" data-href="{your-post-url}"></div>

4. Tester

Une fois cette procédure terminée, vous pouvez tester la publication intégrée. Une intégration terminée donne un résultat tel que celui-ci :

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

La capture d’écran ci-dessous illustre le résultat de notre exemple aux fins de test.

5. Personnaliser

Suivez les instructions ci-dessous pour modifier la taille, la langue et d’autres paramètres.

Obtention de l’URL d’une publication

Il se peut que, dans certains scénarios, le code intégré soit créé par un système CMS et que seule l’URL de publication brute soit nécessaire. Vous pouvez obtenir l’URL d’une publication de deux façons :

  1. Copiez l’URL du lien permanent à partir de la barre d’adresse de votre navigateur.
  2. Cliquez avec le bouton droit de la souris sur l’heure de publication de la publication et copiez l’adresse du lien.

Ces deux méthodes sont indiquées en rouge dans la capture d’écran ci-dessous.

Via l’API Graph

Si vous souhaitez intégrer automatiquement des publications intégrées à votre site web, vous pouvez utiliser l’API Graph pour agréger les publications. Par exemple, vous pouvez utiliser le point de terminaison de l’API Page Feed et le paramètre fieldspermalink_url.

La réponse à votre demande de /{page-id}/feed?fields=permalink_url vous envoie une réponse qui ressemble à ceci :

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Disposition sur le bureau

Vous pouvez ajuster la largeur des publications intégrées sur le bureau à l’aide de l’attribut data-width dans la balise d’intégration de publication, 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-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

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

Disposition au format web mobile

Les publications intégrées au format web mobile sont automatiquement dimensionnées en fonction de la taille du conteneur.

WordPress

Si vous utilisez déjà le SDK Facebook pour JavaScript dans votre site WordPress, vous pouvez utiliser le plugin Publications intégrées en ajoutant la balise fb-post à votre publication WordPress :

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Si vous n’utilisez pas le SDK Facebook pour JavaScript et si vous intégrez une publication en copiant et collant le code (récupéré à partir de chaque publication Facebook), le plugin Publications intégrées ne s’affichera probablement pas, car WordPress remplacera tous les caractères & par #038;, ce qui interrompra le plugin.

À la place, utilisez le code suivant pour ajouter le plugin :

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v21.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Une nouvelle intégration WordPress simplifiée sera bientôt publiée.

Questions/réponses

Si vous utilisez les versions HTML5 ou XFBML, vous devez inclure le code de langue lorsque vous instanciez la bibliothèque.

Lorsque vous chargez le SDK, modifiez la valeur de js.src afin qu’elle affiche votre paramètre régional. Remplacez en_US par votre paramètre régional, par exemple fr_FR pour le français (France) :

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

// Example 2:
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";

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

Vous devrez peut-être modifier la largeur d’un plugin social pour l’affichage de certaines langues. Vous trouverez plus d’informations sur notre page Localisation et traduction.

Permalien

La publication intégrée affiche tous les éléments multimédias qui lui sont associés, ainsi que le nombre de mentions J’aime, de partages et de commentaires associés à la publication. L’intégration de publications permet aux personnes qui consultent votre site web de voir les mêmes informations que sur Facebook.com, et de s’abonner ou d’aimer des auteurs ou des Pages directement à partir de la publication intégrée.

Permalien

Le message suivant s’affiche à la place de la publication intégrée :

Permalien