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-