CODEWITHSUNDEEP
javascriptandroidgatsbyfacebook-messengerfacebook-messenger-bot
Matt
Matt

Reputation: 821

Facebook Messenger icon for Gatsby React site doesn't appear on Android Chrome and older iPhone Safari browsers

On my Gatsby site, I've placed the scripting for providing Facebook Messenger's icon onto my site in the files, gatsby-ssr.js / gatsby-browser.js and 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 />
  </>
);

...and...

// 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;

The Facebook Messenger icon does actually appear on newer iPhones in Facebook's browser and in the mobile Chrome browser (in a newer iPhone).

It also shows up in every desktop browser that I've been able to check, except for one: the Firefox browser in Private Window mode (it does appear in the normal Firefox browser though).

When I inspect the Firefox Private Window, it says,...

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

Even if I am logged into FB on a particular mobile browser, the Messenger icon still does not display.

I'd assume this is the same problem with Android. Any thoughts on this?

Upvotes: 1

Views: 338

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

I'm afraid that kind of issues belong to the user's browser configuration (or to a browser bug). There's nothing you can do from your front-end side since you are exposed to the final treatment of your scripts, the browser.

There are some known past issues regarding Firefox shimming Google Analytics scripts, and for your debuggability you can turn out this shimming by accessing your browser's configuration at about:config and extensions.webcompat.enable_shims turning the option to false (as this comment suggests) but as I said, this will only affect your personal configuration, not the client/user's one.

The stack trace of your issue (https://bugzilla.mozilla.org/show_bug.cgi?id=1226498) implies that the issue is being known and it's being fixed:

That shim does help with the Facebook federated login buttons, but other uses of the FB SDK are still being blocked while we improve that shim.

Maybe you can switch your approach by using federated Facebook buttons.

Upvotes: 1

Related Questions