Do you build things with AMP? Fill out the AMP Developer Survey!
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>
Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow
Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub