如何在GatsbyJS网站中添加Facebook Messenger聊天插件

不需要依赖已经失效的第三方插件，直接用Gatsby原生API就能把代码插入到所有页面的正确位置，全页面生效且不会出现加载异常，以下是两种经过验证的可行方案：

方案1：使用gatsby-ssr.js全局注入（最推荐） #

这个方案会在构建阶段把代码自动注入到所有页面的body标签末尾，完全符合官方要求的插入位置，也不会出现React水合不匹配的问题。

• 在项目根目录找到gatsby-ssr.js文件，不存在的话直接新建即可
• 在文件中添加如下代码，记得把[page-id]替换成你自己的Facebook公共主页ID：

const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <div key="fb-root" id="fb-root"></div>,
    <div 
      key="fb-chat" 
      id="fb-customer-chat" 
      className="fb-customerchat"
      data-page_id="[page-id]"
      data-attribution="biz_inbox"
    ></div>,
    <script
      key="fb-sdk"
      dangerouslySetInnerHTML={{
        __html: `
          window.fbAsyncInit = function() {
            FB.init({
              xfbml            : true,
              version          : 'v14.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_GB/sdk/xfbml.customerchat.js';
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        `
      }}
    />
  ])
}

• 保存文件后重启本地开发服务，所有页面就会自动加载聊天组件。

注意：不要直接把原生script标签放到普通React组件里渲染，React的虚拟DOM机制会导致脚本重复加载或者不执行，用onRenderBodyAPI注入是Gatsby官方推荐的第三方全局脚本插入方式。

方案2：通过全局共享布局组件注入 #

如果你项目已经封装了所有页面共用的Layout布局组件，也可以用useEffect在客户端阶段加载SDK，避开SSR阶段的DOM报错：

• 打开全局Layout组件，添加如下逻辑，同样替换[page-id]为你的主页ID：

import { useEffect } from 'react'

const Layout = ({ children }) => {
  useEffect(() => {
    // 已加载过SDK时直接跳过，避免重复初始化
    if (document.getElementById('facebook-jssdk')) return

    // 插入fb-root容器
    if (!document.getElementById('fb-root')) {
      const fbRoot = document.createElement('div')
      fbRoot.id = 'fb-root'
      document.body.appendChild(fbRoot)
    }

    // 插入聊天组件容器并写入配置
    if (!document.getElementById('fb-customer-chat')) {
      const chatBox = document.createElement('div')
      chatBox.id = 'fb-customer-chat'
      chatBox.className = 'fb-customerchat'
      chatBox.setAttribute('page_id', '[page-id]')
      chatBox.setAttribute('attribution', 'biz_inbox')
      document.body.appendChild(chatBox)
    }

    // 初始化并加载SDK
    window.fbAsyncInit = function() {
      FB.init({
        xfbml: true,
        version: 'v14.0'
      })
    }

    const scriptEl = document.createElement('script')
    scriptEl.id = 'facebook-jssdk'
    scriptEl.src = 'https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js'
    const firstScript = document.getElementsByTagName('script')[0]
    firstScript.parentNode.insertBefore(scriptEl, firstScript)
  }, [])

  return (
    <div>
      {/* 原有布局代码 */}
      {children}
    </div>
  )
}

export default Layout

• 保存后即可在所有嵌套了该Layout的页面生效。

常见问题排查 #

• 如果组件不显示，先检查Facebook主页后台是否开启了面向访客的Messenger聊天功能，当前站点域名是否已经加入到后台的域名允许列表
• 本地开发正常、生产环境不显示时，检查站点的内容安全策略（CSP）配置，需要放开对应Facebook域名的脚本加载权限
• 新版客户聊天插件不需要填写appID，仅配置page_id即可正常运行，之前第三方插件要求的appID参数已经不是必填项。

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