Do you build things with AMP? Fill out the new 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>
هل تحتاج إلى مزيد من التوضيح؟

إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.

الذهاب إلى Stack Overflow
هل هي ميزة غير موضحة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub