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



我正在尝试将一个公共FB帖子嵌入到我的应用程序主页中。我正在遵循FB指南,它非常简单。当我在.html文件中这样做时,它是有效的,但在NextJS中不起作用。基本上,说明是你需要在身体打开标签之后插入这个

<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文件并包含了这个脚本,我也可以在浏览器中看到它。但是帖子没有加载。

有人有这种问题吗?

假设您的文档中已经加载了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/"
/>

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

最新更新