amp-facebook

1.0 0.1

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

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-facebook-1.0.css">

用法

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

以下示例展示了如何嵌入帖子

<amp-facebook width="552" height="310"
    layout="responsive"
    data-href="https://www.facebook.com/ParksCanada/posts/1712989015384373">
</amp-facebook>

以下示例展示了如何嵌入视频

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

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

<amp-facebook width="552" height="500"
    layout="responsive"
    data-embed-type="comment"
    data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185">
</amp-facebook>

在有效的 AMP 文档外部独立使用

借助 Bento，你可以在非 AMP 页面中使用 AMP 组件，而无需完全采用合法的 AMP。你可以获取这些组件，并将它们放置在不支持 AMP 的框架和 CMS 的实现中。在我们的指南 在非 AMP 页面中使用 AMP 组件 中阅读更多内容。

要找到 amp-facebook 的独立版本，请参阅 bento-facebook。

属性

data-href

Facebook 帖子/视频/评论的网址。例如，帖子或视频将类似于 https://www.facebook.com/zuck/posts/10102593740125791。评论或评论回复将类似于 https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185。

data-embed-as

该值可以是 post、video 或 comment。默认值为 post。

帖子和视频都可以嵌入为帖子。为 Facebook 视频设置 data-embed-as="video" 将嵌入视频播放器，并添加随附的帖子卡片。设置 data-embed-as="post" 将忽略标题卡片。这样做是为了确保我们正确地放大视频。

comment 值嵌入帖子上的单个评论（或对评论的回复）。不要将此与 amp-facebook-comments 混淆。

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

data-include-comment-parent

该值可以是 true 或 false。默认值为 false。

当你嵌入评论回复时，你还可以选择包含回复的父评论。

data-allowfullscreen

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

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

data-align-center

该值可以是 true 或 false。默认值为 false。

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

data-locale（可选）

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

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

title (可选)

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

data-numposts（可选）

要显示的评论数。目前 Facebook SDK 将其限制为最大 100。有关详细信息，请参阅 Facebook 评论文档。

data-order-by（可选）

显示评论时使用的顺序。有关详细信息，请参阅 Facebook 评论文档。

data-action（可选）

按钮上显示的动词。可以是 like 或 recommend。默认值为 like。

data-kd_site（可选）

此属性在 Facebook SDK 中也称为 data-kid_directed_site。如果您的网站或在线服务或服务的一部分针对 13 岁以下的儿童，则必须启用此属性。默认值为 false。

data-layout（可选）

选择插件可用的不同布局之一。可以是 standard、button_count、button 或 box_count 之一。默认值为 standard。

data-ref（可选）

用于跟踪推荐的标签，必须少于 50 个字符，并且可以包含字母数字字符和一些标点符号。

data-share（可选）

指定是否在“赞”按钮旁边包含一个分享按钮。这仅适用于 XFBML 版本。默认值为 false。

data-size（可选）

按钮的大小，可以是两种尺寸之一，large 或 small。默认值为 small。

有关详细信息，请参阅 Facebook 评论文档。

data-tabs（可选）

指定要呈现的选项卡（即 timeline、events、messages）。使用逗号分隔的列表添加多个选项卡（例如 timeline, events）。默认情况下，Facebook 页面插件显示时间线活动。

data-hide-cover（可选）

隐藏标题中的封面照片。默认值为 false。

data-show-facepile（可选）

显示喜欢该页面的好友的个人资料照片。默认值为 true。

data-hide-cta（可选）

隐藏自定义号召性用语按钮（如果可用）。默认值为 false。

data-small-header（可选）

改为使用小标题。默认值为 false。

通用属性

此元素包含 通用属性，已扩展到 AMP 组件。

已弃用的属性

data-colorscheme（可选）

配色方案。详情请参阅 Facebook 评论文档。

注意：Facebook 不再支持此功能。如需了解更多详情，请关注我们的 跟踪问题 和 Facebook 的错误报告。

验证

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