如何将 Facebook Messenger 嵌入到 Gatsby 站点中？

Question

我正在尝试将 Facebook Messenger 嵌入到 Gatsby 网站中。在 Chrome 的 Inspector 中，我可以看到一个带有 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 />
  </>
);

任何人都可以帮助提出应用可能无法正确显示的原因吗？

谢谢

Answer 1

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

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

请记住，wrapPageElement 也需要在 gatsby-ssr.js 中设置，如您在 docs:

中所见

Note: There is an equivalent hook in Gatsby’s SSR API. It is recommended to use both APIs together. For example usage, check out Using redux.

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

如何将 Facebook Messenger 嵌入到 Gatsby 站点中？

How to embed Facebook Messenger into a Gatsby Site?

javascript

facebook

facebook-messenger

gatsby