我正在尝试将公共 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&autoLogAppEvents=1&version=v9.0&appId={appId}" nonce={someNonce}"></script>
然后你把另一部分放在你想要的地方。
我什至创建了一个自定义 _document.js 文件并包含此脚本,我也可以在浏览器中看到它。但帖子没有加载。
有人遇到过这样的问题吗?
正如 @Lakindu 所提到的,将此 useEffect 添加到您的代码中
useEffect(() => {
FB.XFBML.parse();
}, []);
来源:https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
假设您已经在文档中加载了 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/"
/>
有关更多详细信息,请参阅官方嵌入式帖子文档。