amp-facebook-page
简介
使用 amp-facebook-page
组件可以将 Facebook 主页嵌入到 AMP 文件中。
设置
导入 amp-facebook-page 组件
<script async custom-element="amp-facebook-page" src="https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js"></script>
基本用法
amp-facebook-page
组件仅需要 Facebook 帖子的 href。
<amp-facebook-page width="340" height="130" layout="responsive" data-href="https://#/imdb/">
</amp-facebook-page>
国际化支持
您可以设置区域设置以使用不同的语言呈现页面,例如法语。
<amp-facebook-page width="340" height="130" layout="responsive" data-href="https://#/imdb/" data-locale="fr_FR">
</amp-facebook-page>
显示不同的标签页
通过指定 data-tabs="timeline, events"
为特定的 Facebook 主页呈现 timeline
和 events
标签页。
<amp-facebook-page width="552" height="310" layout="responsive" data-tabs="timeline, events" data-href="https://#/barackobama/">
</amp-facebook-page>
Facebook 主页封面
通过指定 data-hide-cover="true"
隐藏特定 Facebook 主页的封面。
<amp-facebook-page width="552" height="310" layout="responsive" data-hide-cover="true" data-href="https://#/manchesterunited/">
</amp-facebook-page>
朋友
通过指定 data-show-facepile="false"
隐藏关注特定 Facebook 主页的朋友。(需要登录才能看到。)
<amp-facebook-page width="300" height="300" layout="responsive" data-show-facepile="false" data-href="https://#/itsdougthepug">
</amp-facebook-page>
行动号召
通过指定 data-hide-cta="true"
隐藏特定 Facebook 主页的行动号召。
<amp-facebook-page width="300" height="300" layout="responsive" data-hide-cta="true" data-href="https://#/TCF.Pak/">
</amp-facebook-page>
更改标头大小
通过指定 data-small-header="true"
显示页面的小标头。
<amp-facebook-page width="300" height="300" layout="responsive" data-small-header="true" data-href="https://#/itsdougthepug">
</amp-facebook-page>
需要进一步解释吗?
如果本页上的说明未涵盖您的所有问题,请随时联系其他 AMP 用户,讨论您的确切用例。
转到 Stack Overflow 未解释的功能?AMP 项目强烈鼓励您的参与和贡献!我们希望您能成为我们开源社区的长期参与者,但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。
在 GitHub 上编辑示例-
由 @nainar 撰写