我尝试在 Next.js 应用程序中添加 Facebook 客户聊天，但不起作用。我找不到我的代码有任何问题。
- 如何在我的 Next.js 应用程序中添加 Facebook 客户聊天？
- 我的代码有什么错误吗？
- 有更好的实现来解决这个问题吗？
这是我的代码。
_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
import React from "react";
import { getLangParam } from "../utils";
export default class MyDocument extends Document {
render() {
return (
<Html >
<Head />
<noscript
dangerouslySetInnerHTML={{
__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MPQD53D"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
}}
<body>
<Main />
<NextScript />
</body>
<div id="fb-root"></div>
<script
dangerouslySetInnerHTML={{
__html: `
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v10.0'
});
};
(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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
`,
}}
/>
<div className="fb-customerchat"
attribution="biz_inbox"
page_id="1043670075778655">
</div>
</Html>
);
}
}
我的解决方案：
import Script from 'next/script';
function Facebook() {
return (
<div>
<div id="fb-root"></div>
<div id="fb-customer-chat" className="fb-customerchat"></div>
<Script strategy="lazyOnload">
{`
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "YOUR_PAGE_ID");
chatbox.setAttribute("attribution", "biz_inbox");
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v12.0'
});
};
(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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
`}
</Script>
</div>
);
}
export default Facebook;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
