嵌入式帖子

嵌入式帖子是将公开帖子(通过主页或 Facebook 用户发布)嵌入您的网站或网页内容的简单方法。只有 Facebook 公共主页和个人主页上的公开帖子可以嵌入。

代码生成器

帖子的 URL
帖子像素宽度(350 到 750)

设置

设置 说明 默认

data-href

帖子的绝对网址。

n/a

data-width

帖子的宽度。最小 350 像素;最大 750 像素。留空可使用可调宽度。

可调宽度

data-show-text

适用于照片帖子。设置为 true,即可添加相关 Facebook 帖子中的文本(如有)。

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>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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 src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

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

5.自定义

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

获取帖子网址

可能有这样的情况:嵌入代码通过 CMS 创建,您只需要原始帖子网址。获取帖子网址有两种方法:

  1. 浏览器的地址栏复制永久链接的网址。
  2. 右击帖子的发布时间,并复制链接地址。

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

通过图谱 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 属性调整桌面嵌入式帖子的宽度,如下例所示。选择 350750 像素之间的值。

请勿使用 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,将 fb-post 标签添加到 Wordpress 帖子即可使用嵌入式帖子插件:

<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    : 'v2.11'
    });
  }; 
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</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 上相同的丰富信息,并直接从嵌入式帖子关注或赞内容作者或主页。