无法将 Facebook 帖子嵌入到 Next JS 生成的页面中答案

【问题标题】：Can't embed Facebook post into Next JS generated page无法将 Facebook 帖子嵌入到 Next JS 生成的页面中
【发布时间】：2021-04-05 07:43:08
【问题描述】：

我正在尝试将公共 FB 帖子嵌入到我的应用程序的主页中。我正在关注 FB 指南，这很简单。当我在 .html 文件中执行此操作时它有效，但不适用于 Next JS。基本上，说明是你需要在正文开始标签之后插入它

<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;autoLogAppEvents=1&amp;version=v9.0&amp;appId={appId}" nonce={someNonce}"></script>

然后你把另一部分放在任何你想要的地方。

我什至创建了一个自定义的 _document.js 文件并包含了这个脚本，我也可以在浏览器中看到它。但是帖子没有加载。

有人遇到过这种问题吗？

【问题讨论】：

如果你想被社交插件替换的元素在SDK初始化时已经不是DOM的一部分，那么你需要调用developers.facebook.com/docs/reference/javascript/…

标签： reactjs facebook next.js embed

【解决方案1】：

假设您已经在文档中加载了 JS SDK，就像您提到的那样（如果愿意，您还可以通过 JavaScript 按需加载脚本）。

// pages/_document

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <!-- additional code -->
        <body>
          <!-- additional code -->
          <script
            async
            defer
            src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"
          />
        </body>
      </Html>
    );
  }
}

然后，您可以在其中一个组件中呈现 Facebook 帖子：

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

更多详情请参阅official Embedded Posts documentation。

【讨论】：