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>
Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.
Kunjungi Stack Overflow Fitur yang tidak dijelaskan?Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.
Edit sampel di GitHub-
Written by @nainar