无法将 Facebook 帖子嵌入 Next JS 生成的页面

问题描述 投票:0回答:2

我正在尝试将公共 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 文件并包含此脚本,我也可以在浏览器中看到它。但帖子没有加载。

有人遇到过这样的问题吗?

reactjs facebook next.js embed
2个回答
0
投票

正如 @Lakindu 所提到的,将此 useEffect 添加到您的代码中

  useEffect(() => {
    FB.XFBML.parse();
  }, []);

来源:https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/


-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/"
/>

有关更多详细信息,请参阅官方嵌入式帖子文档

© www.soinside.com 2019 - 2024. All rights reserved.