Gatsby React 网站的 Facebook Messenger 图标不会出现在 Android Chrome 和旧版 iPhone Safari 浏览器上

Question

在我的 Gatsby 网站上，我已将用于在我的网站上提供 Facebook Messenger 图标的脚本放在文件中，gatsby-ssr.js / gatsby-browser.js 和 src/components/MessengerChat.js...

// gatsby-ssr.js & gatsby-browser.js
import React from "react";
import Layout from "./src/components/layout";
import MessengerChat from "./src/components/MessengerChat";

export const wrapPageElement = ({ element }) => (
  <>
    {element}
    <MessengerChat />
  </>
);

...和...

// src/components/MessengerChat.js
import React, { useEffect } from "react";

function MessengerChat() {
  useEffect(() => {
    window.fbAsyncInit = function () {
      window.FB.init({
        xfbml: true,
        version: "v11.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/th_TH/sdk/xfbml.customerchat.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "facebook-jssdk");
  });
  return (
    <>
      <div id="fb-root" />
      <div
        className="fb-customerchat"
        attribution="biz_inbox"
        page_id="106619367753772"
      />
    </>
  );
}

export default MessengerChat;

Facebook Messenger 图标确实出现在较新的 iPhone 上的 Facebook 浏览器和移动 Chrome 浏览器中（在较新的 iPhone 中）。

它还显示在我能够检查的每个桌面浏览器中，除了一个：Private Window 模式下的 Firefox 浏览器（虽然它确实出现在普通的 Firefox 浏览器中）。

当我检查 Firefox 私人窗口时，它说，...

Facebook SDK is being shimmed by Firefox. See https://bugzilla.mozilla.org/show_bug.cgi?id=1226498 for details.

即使我在特定的移动浏览器上登录 FB，Messenger 图标仍然不显示。

我认为这与 Android 存在相同的问题。对此有什么想法吗？

Answer 1

恐怕这类问题属于用户的浏览器配置（或浏览器错误）。由于您要面对脚本的最终处理，即浏览器，因此您无法从前端做任何事情。

过去存在一些关于 Firefox 匀场 Google Analytics 脚本的已知问题，为了您的可调试性，您可以通过在about:config 和extensions.webcompat.enable_shims 访问您的浏览器配置将选项转到false（如@987654321 @ 建议）但正如我所说，这只会影响您的个人配置，而不是客户/用户的配置。

您的问题的堆栈跟踪 (https://bugzilla.mozilla.org/show_bug.cgi?id=1226498) 表明该问题是已知的并且正在修复中：

该 shim 确实有助于 Facebook 联合登录按钮，但是 FB SDK 的其他用途仍然被阻止，同时我们改进它 垫片。

也许您可以通过使用联合 Facebook 按钮来改变您的方法。