Plugin Page

Le plugin Page vous permet d’intégrer et de promouvoir facilement une Page Facebook sur votre site web. Tout comme sur Facebook, les visiteurs peuvent aimer et partager la Page sans quitter votre site.

Paramètres

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

Paramètre Attribut HTML5 Description Valeur par défaut

href

data-href

L’URL de la Page Facebook.

Aucune

width

data-width

La largeur du plugin en pixels. La valeur minimale est 180 et la valeur maximale est 500.

340

height

data-height

La hauteur du plugin en pixels. La valeur minimale est 70.

500

tabs

data-tabs

Onglets à afficher, par exemple timeline (Journal), events (Évènements), messages (Messages). Utilisez une liste d’éléments séparés par des virgules 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

Essaye de s’adapter à la largeur du conteneur.

true


Attributs obsolètes

  • L’attribut data-show-posts est obsolète. Utilisez l’attribut tabs/data-tabs et utilisez 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. La 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>

Appel à l’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 sur le plugin :

  • Onglet Journal : il 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 des virgules 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 (Journal), events (Évènements) ou messages (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 multimédias ou d’autres méthodes pour définir la valeur width (Largeur) pour l’élément parent, mais :

  • le plugin détermine la valeur width (Largeur) lors du chargement de la page ;
  • il ne réagit pas aux modifications apportées au modèle de la zoneaprè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 Social Plugin si vous voulez afficher plusieurs langues. Vous trouverez plus d’informations sur notre page Localisation et traduction.