Блог

Главная - Вопросы по программированию - Как встроить Facebook Messenger в сайт Гэтсби?

Как встроить Facebook Messenger в сайт Гэтсби?

#javascript #facebook #gatsby #facebook-messenger

Вопрос:

Я пытаюсь встроить Facebook Messenger в сайт Гэтсби. В инспекторе Chrome я вижу div с идентификатором=»fb-root», однако его высота равна 0 (ширина-ширина окна просмотра), а виджет чата не отображается.

После использования инструмента настройки в Настройках моей страницы Facebook -> Обмен сообщениями ->> Добавить мессенджер на свой веб-сайт, он генерирует некоторый 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 />
  </>
);

Может ли кто-нибудь помочь в предположении, почему приложение может отображаться неправильно?

Спасибо

Ответ №1:

Я думаю, что ваш MessengerChat теряет свои ограничения из-за wrapPageElement упаковки. Попробуй:

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

Имейте в виду , что wrapPageElement это также должно быть установлено в gatsby-ssr.js , как вы можете видеть в документах:

Примечание: В SSR API Гэтсби есть эквивалентный крюк. Рекомендуется использовать оба API вместе. Например, использование, проверьте использование redux.

Если использование макета не подходит для вашего варианта использования, попробуйте вручную добавить высоту в ваш MessengerChat CSS.

Комментарии:

1. Привет, Ферран, спасибо, что ответил, ценю это. Я создал gatsby-ssr.js следуя примерам в документах. К сожалению, макет не подходит для моей настройки, поэтому я попытался вручную добавить высоту в раздел «fb-root». В нижней части каждой страницы теперь есть пустое место на той высоте, которую я добавил. Я проверил вкладку «Сеть», xfbml.customerchat.js загружается, не уверен, почему ничего не отображается.

2. Каков будет результат, если вы просто запустите return <div>{element}<MessengerChat /></Layout>

3. Итак, чтобы подтвердить, у меня теперь есть wrapPageElement.js на корневом уровне, который содержит: const wrapPageElement = {{ элемент }} => ( ><div>{элемент}<div><MessengerChat /><MessengerChat /></div>); Это экспортируется в оба gatsby-browser.js и gatsby-ssr.js как: импорт пользовательского интерфейса из «./wrapPageElement»; экспорт const wrapPageElement = пользовательский интерфейс; При запуске сборки разработки я все еще вижу пробел внизу каждой страницы

4. Я предполагаю, что ваш код работает, однако я думаю, что браузер может блокировать ваши запросы. Посмотрите на вкладку Сеть. codesandbox.io/s/inspiring-rain-xp7n4?file=/gatsby-browser.js

5. Итак, Ферран был прав! Виджет чата заблокирован на локальном хостинге, и если вы используете предварительные просмотры развертывания или тестовый URL-адрес для тестирования своего сайта перед развертыванием, вам необходимо убедиться, что домен внесен в белый список в настройках вашей страницы Facebook.

Метки: