AMP
  • 网站

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 主页呈现 timelineevents 标签。

<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 上编辑示例