Plugin Page

Le plugin Page vous permet d’intégrer et de promouvoir facilement une Page Facebook publique sur votre site web. Tout comme sur Facebook, les visiteurs peuvent aimer et partager la Page sans quitter votre site. Vous pouvez utiliser le plugin Page pour n’importe quelle page non limitée, par exemple, par pays ou âge.

Rubriques connexes : Questions/réponses sur les plugins sociaux | Autres plugins sociaux

URL de Page Facebook

Onglets

Largeur

Hauteur

Utiliser une en-tête plus petite

Adapter à la largeur du plugin container

Masquer la photo de couverture

Afficher les visages des ami(e)s

Obtenir le code

Paramètres

En plus des paramètres ci-dessus, vous pouvez modifier les éléments suivants :

Paramètres	Attribut HTML5	Description	Valeur par défaut
`href`	`data-href`	L’URL de la Page Facebook.	Aucun
`width`	`data-width`	La largeur du plugin en pixels. Minimum `180` et maximum `500`.	`340`
`height`	`data-height`	La hauteur du plugin en pixels. Minimum `70`.	`500`
`tabs`	`data-tabs`	Onglets à afficher, par exemple `timeline`, `events`, `messages`. Utilisez une liste d’éléments séparés par une virgule pour ajouter plusieurs onglets, par exemple `timeline, events`.	`timeline`
`hide_cover`	`data-hide-cover`	Masque la photo de couverture dans l’en-tête.	`false`
`show_facepile`	`data-show-facepile`	Affiche les photos de profils quand des amis aiment le contenu.	`true`
`hide_cta`	`data-hide-cta`	Masque le bouton personnalisé d’appel à l’action (le cas échéant).	`false`
`small_header`	`data-small-header`	Utilise le petit en-tête à la place.	`false`
`adapt_container_width`	`data-adapt-container-width`	Essaie de s’adapter à la largeur du conteneur.	`true`
`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`

Attributs obsolètes

L’attribut data-show-posts est obsolète. Utilisez l’attribut tabs/data-tabs et la valeur timeline pour afficher des publications du journal de la Page.

Ajout du plugin Page à un site web

La configuration standard du plugin Page comprend uniquement l’en-tête et une photo de couverture. Cette taille est idéale pour promouvoir votre Page dans un petit espace, par exemple en haut d’une barre latérale.

<div class="fb-page" 
data-href="https://www.facebook.com/facebook"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>

Call-to-action

Si votre Page comprend un bouton d’appel à l’action personnalisé, il sera affiché à la place du bouton Partager, le bouton d’appel à l’action par défaut.

Si la largeur du plugin est inférieure à 280 pixels, le bouton Partager sera affiché par défaut pour éviter d’éventuels problèmes d’alignement dus aux différentes traductions.

Onglets de Page : Journal, Évènements et Messages

Vous pouvez désormais afficher les onglets Journal, Évènements et Messages dans le plugin :

Onglet Journal : affiche les publications les plus récentes du journal de votre Page Facebook.
Onglet Évènements : les visiteurs peuvent s’abonner aux évènements de votre Page et s’inscrire à partir du plugin.
Onglet Messages : les visiteurs peuvent envoyer un message à votre Page directement à partir de votre site web. Les utilisateurs doivent être connectés pour pouvoir utiliser cette fonctionnalité.

Activation des messages sur votre Page

Pour activer les messages sur votre Page Facebook, accédez à la section Settings (Paramètres) de votre Page. Sur la ligne Messages, cochez l’option Autoriser les visiteurs de ma Page à me contacter en privé en affichant le bouton Message (Lien direct : https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

Ajout de plusieurs onglets

Utilisez une liste d’éléments séparés par une virgule dans l’attribut data-tabs pour ajouter plusieurs onglets :

<div class="fb-page" 
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380" 
data-hide-cover="false"></div>

Un seul onglet

Vous pouvez également ajouter un seul onglet, afin de n’afficher que timeline, events ou messages :

<div class="fb-page" 
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>

Largeur adaptative

Par défaut, le plugin s’adapte à la valeur width (Largeur) de son conteneur parent lors du chargement de la page (min. 180px/max. 500px), ce qui est utile pour les dispositions qui changent :

<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

Si la valeur width (Largeur) de l’élément parent est supérieure à la valeur width (Largeur) du plugin Page, la valeur définie dans data-width est conservée :

<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

Le plugin ne peut pas avoir une largeur inférieure à 180px :

<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

La largeur adaptative peut être désactivée : il suffit de décocher l’option Adapter à la largeur du plugin container. Le plugin est alors affiché à la taille définie, indépendamment du conteneur parent.

Pas de redimensionnement dynamique

Le plugin Page fonctionne avec les présentations réactives, fluides et statiques. Vous pouvez utiliser des requêtes média ou d’autres méthodes pour définir la valeur width (Largeur) pour l’élément parent, mais :

Le plugin détermine la valeur de largeur width, lors du chargement de la page.
Il ne réagit pas aux modifications apportées au modèle de la zone, après le chargement de la page.

Si vous voulez que la valeur width (Largeur) du plugin change lorsque la page est redimensionnée, vous devez redéfinir l’affichage du plugin manuellement.

Afficher les visages des ami(e)s

Affichez les photos de profil de personnes aimant votre Page au lieu d’un simple nombre. Les personnes consultant votre Page verront le nombre d’amis aimant votre Page, ainsi que leurs photos de profil.

Pour activer cette option, cochez Show Friend's Faces (Afficher les visages des ami(e)s) dans le configurateur.

<div class="fb-page"
data-href="https://www.facebook.com/imdb" 
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>

Pages avec restrictions de confidentialité

Les Pages Facebook avec des restrictions de confidentialité ne peuvent pas être intégrées.

Modification de la langue

Vous pouvez modifier la langue du plugin Page 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 ru_RU pour le russe (Russie) :

Exemple

js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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 plugin social pour l’afficher dans une autre langue. Vous trouverez plus d’informations sur notre page Localisation et traduction.