как добавить страницу плагина facebook в gatsby (реагировать) - PullRequest
Новая
       1

как добавить страницу плагина facebook в gatsby (реагировать)

2 голосов
/ 14 апреля 2020

Я пытался добавить фейсбук на сайт gatsby, над которым я работаю, и, похоже, он не работает!

Я пытался добавить сценарии в gatsby-ssr. js

const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <div id="fb-root"></div>,
    <script
      async={true}
      defer={true}
      crossOrigin="anonymous"
      src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1"
    ></script>,
  ])
}

, затем в компоненте 

          <div
            className="fb-page"
            data-href="https://www.facebook.com/TechnoBondCo/"
            data-tabs="timeline"
            data-width="400"
            data-height="400"
            data-small-header="true"
            data-adapt-container-width="true"
            data-hide-cover="true"
            data-show-facepile="false"
          >
            <blockquote
              cite="https://www.facebook.com/TechnoBondCo/"
              class="fb-xfbml-parse-ignore"
            >
              <a href="https://www.facebook.com/TechnoBondCo/">
                ‎تكنوبوند - صناع الكلادينج Techno Bond‎
              </a>
            </blockquote>
          </div>

, но это не сработало, я также попытался использовать response-facebook, но я не могу изменить ширину или высоту iframe

есть идеи, как это сделать?

ОШИБКИ ПРИ ИСПОЛЬЗОВАНИИ РЕАКТИВНОГО ШЛЕМА

Я получаю эту консольную ошибку: - предупреждение "экспорт" по умолчанию "(импортируется как" Шлем ") не был найден в 'Reaction-шлем'

и получить эту ошибку браузера:

enter image description here

1 Ответ

0 голосов
/ 15 апреля 2020

Вам необходимо использовать тег <Helmet>, например: 

<Helmet>
    <script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>

Вы можете проверить дополнительную информацию о Шлем Гэтсби и Реактивный шлем , но в основном компонент <Helmet> позволяет вам вставить несколько кодов, которые будут размещены после компиляции, внутри тега <head>.

Вы можете использовать его в любом компоненте, например, в компоненте IndexPage будет: 

import { Helmet } from 'react-helmet';

     const IndexPage = () => (
        <Layout>
          <SEO title="Live" />
          <Helmet>
            <script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
          </Helmet>

Я тестировал на моей локальной машине, он отлично загружается, как показано на следующем снимке экрана:

Script loaded

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...