Publications intégrées

Les publications intégrées permettent de placer des publications publiques (provenant d’une Page ou d’un profil Facebook) dans le contenu de votre site ou de votre page web, en toute simplicité. Seules les publications publiques provenant de Pages et de 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)

Paramètres

Paramètre Description Valeur par défaut

data-href

L’URL absolue de la publication.

n/a

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 photo. 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 permettant d’intégrer votre publication 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

Au lieu d’utiliser le générateur de code, vous pouvez intégrer le code manuellement.

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 Embedded Posts, ou tout autre Social Plugin, 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>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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. Tests

Une fois ces étapes effectuées, vous pourrez tester votre publication intégrée. Une intégration terminée donne un résultat tel que celui-ci :

<html>
  <title>My Website</title>
<body>
  <script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></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. Personnalisation

Suivez les instructions figurant plus bas sur cette page pour modifier la taille, la langue et d’autres paramètres.

Obtention de l’URL d’une publication

Dans certains cas, le code d’intégration est créé par un CMS et l’URL brute de la publication suffit. 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.

Avec 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

Au format web mobile, les publications intégrées s’adaptent automatiquement à la largeur du conteneur.

Wordpress

Si vous utilisez déjà le SDK Facebook pour JavaScript dans votre site Wordpress, vous pouvez utiliser le plugin Embedded Posts 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 Embedded Posts 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    : 'v2.10'
    });
  }; 
  (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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</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 « js.src » pour utiliser votre paramètre régional. Il vous suffit de remplacer « en_US » par votre paramètre régional, par exemple, « fr_FR » pour français (France) :

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

// Exemple 2 :
js.src = "//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 de paramètres régionaux de Facebook (http://www.facebook.com/translations/FacebookLocales.xml). Vous devrez peut-être modifier la largeur d’un Social Plugin si vous voulez afficher plusieurs langues. D’autres informations sont disponibles sur notre page Localisation et traduction.

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.