如何将 facebook 插件页面添加到 gatsby (react)

Question

我一直在尝试将 facebook 提要添加到我正在开发的 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>

但它没有用，我也尝试使用 react-facebook 但我似乎无法更改 iframe 的宽度或高度

知道怎么做吗？

使用 REACT 头盔时出错

我收到此控制台错误： - 警告“导出 'default'（导入为 'Helmet'）未在 'react-helmet'

中找到

并收到此浏览器错误：

Answer 1

您需要使用 <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>

您可以查看有关 Gatsby's Helmet, and React 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>

我已经在我的本地机器上进行了测试，它可以完美加载，如下图所示：

如何将 facebook 插件页面添加到 gatsby (react)

how to add facebook plugin page to gatsby (react)

iframe

facebook

reactjs

gatsby