如何将Facebook Messenger嵌入Gatsby网站？

Question

我正在尝试将Facebook Messenger嵌入Gatsby网站。在Chrome的检查器中，我可以看到一个id为“fb-root”的div，但其高度为0（宽度为视口的宽度），聊天小部件没有出现。

在我的Facebook页面的设置中使用安装工具 ->消息 ->添加Messenger到您的网站后，它会生成一些HTML代码，无法在Gatsby（或任何React框架）网站中使用。

使用该代码，我可以创建一个名为MessengerChat.js的自定义组件，其中包含以下内容：

import React, { useEffect } from "react";

function MessengerChat() {
  useEffect(() => {
    window.fbAsyncInit = function () {
      window.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");
  });
  return (
    <>
      <div id="fb-root" />
      <div
        className="fb-customerchat"
        attribution="page_inbox"
        page_id="XXXXXXX"
      />
    </>
  );
}

export default MessengerChat;

然后，在gatsby-browser.js中，我可以使用以下代码：

import MessengerChat from "./src/MessengerChat";

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

有谁能帮忙提供一些建议，为什么这个应用程序显示不正确？

谢谢。

- Signet OHara

Answer 1

我认为您的 MessengerChat 由于 wrapPageElement 的包装而失去了其约束。尝试：

export const wrapPageElement = ({ element, props }) => (
      return <Layout {...props}>
                 {element}
                 <MessengerChat />
             </Layout>
    
    }

请记住，在 gatsby-ssr.js 中也需要设置 wrapPageElement，可以在 文档 中查看：

注意：Gatsby 的 SSR API 中也有一个等效的钩子。建议同时使用这两个 API。有关示例用法，请查看 使用redux。

如果使用 Layout 不适合您的用例，请尝试使用 CSS 手动向您的 MessengerChat 添加高度。

- Ferran Buireu

---

嗨Ferran，感谢您的回复，非常感激。我已经按照文档中的示例创建了一个gatsby-ssr.js。不幸的是，在我的设置中Layout不适用，因此我尝试手动向“fb-root” div添加高度。现在每个页面底部都有一个空白空间，高度与我添加的相同。我已经检查了网络选项卡，xfbml.customerchat.js正在下载，不确定为什么没有任何内容被呈现。 - Signet OHara

你能提供一个 Codesandbox 吗？ - Ferran Buireu

我猜你的代码是可以工作的，但是我认为浏览器可能会阻止你的请求。看一下网络选项卡。https://codesandbox.io/s/inspiring-rain-xp7n4?file=/gatsby-browser.js - Ferran Buireu

所以，Ferran 是正确的！聊天窗口在本地主机上被阻止，如果您在部署之前使用预览或测试 URL 来测试您的站点，则需要确保该域已在您的 Facebook 页面设置中列入白名单。 - Signet OHara

如果问题已经解决，请考虑接受/点赞答案以关闭问题。 - Ferran Buireu