#BlackLivesMatter
AMP
  • websites

amp-facebook-page

Introduction

The amp-facebook-page component allows embedding Facebook pages into AMP files.

Setup

Import the amp-facebook-page component

<script async custom-element="amp-facebook-page" src="https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js"></script>

Basic usage

The amp-facebook-page component only requires the href of the facebook post.

<amp-facebook-page width="340"
  height="130"
  layout="responsive"
  data-href="https://www.facebook.com/imdb/">
</amp-facebook-page>

Internationalization support

You can set the locale to render the page in a different language, for example French.

<amp-facebook-page width="340"
  height="130"
  layout="responsive"
  data-href="https://www.facebook.com/imdb/"
  data-locale="fr_FR">
</amp-facebook-page>

Show different tabs

Render the timeline and events tab for a particular Facebook page by specifying data-tabs="timeline, events".

<amp-facebook-page width="552"
  height="310"
  layout="responsive"
  data-tabs="timeline, events"
  data-href="https://www.facebook.com/barackobama/">
</amp-facebook-page>

Facebook page cover

Hide the cover of a particular Facebook page by specifying data-hide-cover="true".

<amp-facebook-page width="552"
  height="310"
  layout="responsive"
  data-hide-cover="true"
  data-href="https://www.facebook.com/manchesterunited/">
</amp-facebook-page>

Friends

Hide the friends who follow a particular Facebook page by specifying data-show-facepile="false". (Need to be logged in to see this.)

<amp-facebook-page width="300"
  height="300"
  layout="responsive"
  data-show-facepile="false"
  data-href="https://www.facebook.com/itsdougthepug">
</amp-facebook-page>

Call to action

Hide the call to action for a particular Facebook page by specifying data-hide-cta="true".

<amp-facebook-page width="300"
  height="300"
  layout="responsive"
  data-hide-cta="true"
  data-href="https://www.facebook.com/TCF.Pak/">
</amp-facebook-page>

Change header size

Show a small header for the page by specifying data-small-header="true".

<amp-facebook-page width="300"
  height="300"
  layout="responsive"
  data-small-header="true"
  data-href="https://www.facebook.com/itsdougthepug">
</amp-facebook-page>
Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow
Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub