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的宽度或高度

你知道怎么做吗？

使用反应头盔的错误

我收到此控制台错误： -警告在“反应头盔”中找不到“导出'默认'（导入为'头盔'）

并出现此浏览器错误：

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和React Helmet的更多信息，但是基本上，<Helmet>组件使您可以在编译后在{{1 }}标签。

您可以在任何组件中使用它，例如，在<head>组件中可以使用它：

IndexPage

我已经在本地计算机上对其进行了测试，因为它显示了以下屏幕截图，因此可以完美加载：

如何将Facebook插件页面添加到gatsby（反应）

1 个答案: