AMP

重要提示:此文档不适用于您当前选择的格式 广告

amp-facebook

 
您现在可以使用此组件在有效的 AMP 文档之外使用此组件的 Bento 版本。在Bento 指南中了解更多信息。

描述

显示 Facebook 帖子、视频或评论。

 

必需的脚本

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>

用法

您可以使用 amp-facebook 组件来嵌入 Facebook 帖子、Facebook 视频或 Facebook 帖子上的评论。

以下示例显示如何嵌入帖子

<amp-facebook width="552" height="310"
    layout="responsive"
    data-href="https://127.0.0.1/ParksCanada/posts/1712989015384373">
</amp-facebook>
在 Playground 中打开此代码段

以下示例显示如何嵌入视频

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://127.0.0.1/nasaearth/videos/10155187938052139">
</amp-facebook>
在 Playground 中打开此代码段

以下示例显示如何嵌入帖子上的评论

<amp-facebook width="552" height="500"
    layout="responsive"
    data-embed-as="comment"
    data-href="https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185">
</amp-facebook>
在 Playground 中打开此代码段

属性

data-href

Facebook 帖子/视频/评论的 URL。例如,帖子或视频将类似于 https://127.0.0.1/zuck/posts/10102593740125791。评论或评论回复将类似于 https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185

data-embed-as

该值可以是 postvideocomment。默认值为 post

帖子和视频都可以作为帖子嵌入。为 Facebook 视频设置 data-embed-as="video" 会嵌入视频播放器,并添加随附的帖子卡片。设置 data-embed-as="post" 会忽略字幕卡片。这样做是为了确保我们正确地聚焦视频。

comment 值嵌入帖子上的单个评论(或对评论的回复)。这不应与 amp-facebook-comments 混淆。

请查看文档,了解帖子嵌入视频嵌入之间的差异。

data-include-comment-parent

该值可以是 truefalse。默认值为 false

在嵌入评论回复时,您可以选择同时包含回复的父评论。

data-allowfullscreen

该值可以设置或省略。默认设置为省略(无全屏)。

在嵌入视频时,设置此值以允许全屏体验。

data-align-center

该值可以是 truefalse。默认值为 false

对于帖子和视频,将此属性设置为 true 会将帖子/视频容器居中对齐。

data-locale(可选)

默认情况下,语言环境设置为用户的系统语言;但是,您也可以指定语言环境。

有关此处接受的字符串的详细信息,请访问Facebook API 本地化页面

title(可选)

为组件定义 title 属性,以便传播到底层的 <iframe> 元素。默认值为 "Facebook"

通用属性

此元素包含扩展到 AMP 组件的通用属性

验证

请参阅 AMP 验证器规范中的amp-facebook 规则

需要更多帮助吗?

您已经阅读此文档十几次了,但它并没有真正涵盖您的所有问题?也许其他人也有同感:请在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您成为我们开源社区的长期参与者,但我们也欢迎您对您特别感兴趣的问题进行一次性贡献。

转到 GitHub