嵌入式帖子

嵌入式帖子是一种将 Facebook 公开主页或用户发布的公开帖置入您的网站或网页内容的简单方式。您仅可嵌入发布在 Facebook 公开主页和个人主页的公开帖子。

代码生成器

帖子的 URL

帖子像素宽度（350 到 750）

包含完整帖子

设置

设置	描述	默认值
`data-href`	帖子的绝对网址。	`n/a`
`data-lazy`	`true` 表示您可通过设置 `loading="lazy"` iframe 属性来使用浏览器的延迟加载机制。其效果是，如果插件不在视区附近，则浏览器不会显示插件，且您可能始终无法看到该插件。可以是 `true` 或 `false`（默认）的其中一个。	`false`
`data-width`	帖子的宽度。最小值为 `350` 像素；最大值为 `750` 像素。留空以使用可调宽度。	可调宽度
`data-show-text`	已应用至照片帖子。如果 Facebook 帖子中有任何文本，则设置为 `true` 以添加该文本。	`false`

获取帖子的代码

1.导航至您的帖子

您可以直接从帖子获取嵌入代码。如果帖子设置为公开，点击 Facebook 帖子右上角显示的图标。

从下拉菜单中选择 Embed Post：

如果是照片帖子，则选择右下方的 Embed Post 按钮：

2.复制并粘贴代码

您将看到一个对话框，其中包含可供您将帖子嵌入其中的代码。复制此代码并将其粘贴到网页中合意的显示位置。

技术详情请参阅手动添加代码部分

手动添加代码

除了使用代码生成器，您也可以手动嵌入代码。

1.获取帖子网址

首先，您需要获取要分享的帖子的网址。必须将帖子状态设置为公开，如果帖子发布时间旁显示灰色地球图标，则表示此为公开帖子：

为方便测试，您可以使用该示例网址：

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2.加载 JavaScript SDK

如要使用嵌入式帖子插件或其他任何社交插件，您需要将 Facebook JavaScript SDK 添加到网站中。您只需在页面中加载一次 SDK，最好是在 <body> 开始标签后加载：

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

如需获取有关实现 JavaScript SDK 的更多帮助，请参阅 JavaScript SDK - 快速入门。

3.放置嵌入式帖子标签

接下来，在网站的任意位置放置嵌入式帖子标签。将 {your-post-url} 替换为您的帖子的网址。

<div class="fb-post" data-href="{your-post-url}"></div>

4.测试

完成这些步骤后，您即可开始测试您的嵌入式帖子。完整集成应如下所示：

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

我们的测试示例结果如下方截图所示。

5.自定义

按照本页面下方的说明调整大小、语言和其他设置。

获取帖子网址

在某些情况中，您的嵌入式代码会由 CMS 创建，而您只需要原始帖子的网址。获取帖子网址有两种方法：

从浏览器的地址栏复制永久链接的网址。
右键点击帖子的发布时间，然后复制链接地址。

两种方法都在下方截图中以红色突出显示。

通过图谱 API

如果您希望将嵌入式帖子自动集成到网站，可以使用图谱 API 来汇总帖子。例如，您可以使用公共主页动态 API 端点和 fields 参数 permalink_url。

系统将响应您的 /{page-id}/feed?fields=permalink_url 请求，如下所示：

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

在桌面设备上的布局

您可以通过“嵌入式帖子”标签中的 data-width 属性（如下例所示）调整嵌入式帖子在桌面设备上的宽度。选择 350 至 750 之间的像素值。

请勿使用 CSS 样式标签来调整插件大小。否则可能导致显示错误。

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

在移动网页上的布局

在移动网页上，嵌入式帖子会自动缩放至容器的宽度。

WordPress

如果您已在 WordPress 网站上使用 JavaScript 版 Facebook SDK，则只需在 WordPress 帖子中添加 fb-post 标签，即可使用嵌入式帖子插件：

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

如果您未使用 JavaScript 版 Facebook SDK，而是通过复制粘贴从各个 Facebook 帖子获取的代码片段来嵌入帖子，则系统很可能无法显示嵌入式帖子插件，因为 WordPress 会将所有 & 字符转换为 #038;，导致插件损坏。

请改用以下代码来添加插件：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v21.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

我们将于近期推出新方式，助您轻松完成 WordPress 集成。

常见问题

如何以不同语言显示社交插件？

如果您使用的是 HTML5 或 XFBML 版本，则应在实例化库时添加语言代码。

加载 SDK 时，更改 js.src 的值即可使用区域设置。将 en_US 替换为需要的区域语言代码，例如代表法语（法国）的 fr_FR：

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

// Example 2:
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";

如要查看受支持的语言，请参阅 Facebook 区域设置 XML 文件。

您可能需要调整社交插件的宽度，以适应不同的语言。如需获取更多信息，请查看本地化与翻译页面。

固定链接

用户将在嵌入式帖子中看到什么？

嵌入式帖子将显示附加的所有媒体，以及帖子具有的赞、分享和评论的数量。通过嵌入帖子，网站用户可以查看与 Facebook.com 上相同的丰富信息，并直接从嵌入式帖子关注或赞内容作者或主页。

固定链接

如果某位用户删除了帖子或更改了帖子的分享对象列表，会发生什么情况？

以下消息将显示在嵌入式帖子的位置：

固定链接