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>
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub