如何在Next.js项目中接入Facebook客服聊天Messenger功能

代码错误说明 #

你当前的代码存在两处核心结构错误，这是功能无法运行的直接原因：

• 标签未闭合：<noscript>标签缺少闭合标记，导致后续DOM结构解析异常
• 节点位置错误：所有Facebook相关的DOM节点（fb-root容器、SDK加载脚本、客服聊天容器）都放在了<body>标签外部，浏览器不会正常渲染这部分内容

正确接入步骤 #

修改_document.js的结构，将所有Facebook相关代码移入<body>标签内部，放在<NextScript />之后即可，修改后参考代码如下：

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 />
        <body>
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MPQD53D"
                        height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
            }}
          />
          <Main />
          <NextScript />
          {/* Facebook聊天相关代码移入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>
        </body>
      </Html>
    );
  }
}

修改后还需要确认两个配置：

• 你使用的Facebook公共主页已经开启了客服聊天功能，且填写的page_id和主页ID一致
• 你的站点域名已经添加到Facebook后台客服插件的白名单中，避免跨域拦截

更优实现方案 #

如果需要降低第三方SDK对首屏性能的影响，可以采用按需加载的方案：

• 封装独立的聊天组件，仅在组件挂载完成后再动态注入Facebook SDK，不需要全局嵌入在_document中
• 可以配置为用户触发特定交互（比如点击咨询按钮）或者页面滚动到一定比例后再加载SDK，进一步减少首屏资源消耗

内容的提问来源于stack exchange，提问作者Jenn