如何将 Facebook 聊天工具添加到 Next.js？

Question

如何将 Facebook 聊天工具添加到 Next.js？

Jen*_*enn 4 reactjs next.js facebook-customer-chat

我尝试在我的 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>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

我的解决方案：

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;

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，4 月前
查看次数：	8728 次
最近记录：	2 年，8 月前