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

【问题标题】：how to add facebook plugin page to gatsby (react)如何将 facebook 插件页面添加到 gatsby (react)
【发布时间】：2020-04-14 20:52:28
【问题描述】：

我一直在尝试将 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 头盔的错误

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

并得到这个浏览器错误：

【问题讨论】：

我猜你缺少 FB.XFBML.parse developers.facebook.com/docs/reference/javascript/…
嘿@WizKid，我试图在useEffect中调用它，但它说FB没有定义。
那么还没有加载Facebook SDK

标签： reactjs facebook iframe gatsby

【解决方案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> 组件允许您插入一些代码，这些代码将在编译后放在<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>

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

【讨论】：

我正在尝试您的答案并得到一个奇怪的错误！我用它更新了问题，您介意解释一下原因吗？
你需要像这样导入import { Helmet } from 'react-helmet';我已经编辑了我的答案。通常，该错误来自错误的模块导入。
错误来自我戴头盔的另一个文件，但没有以正确的方式导入哈哈，我的错，答案确实有效，但 iframe 非常小！知道如何将自己的高度和宽度传递给它吗？因为我现在有它，但它不起作用！
您尝试过使用 CSS 或 SCSS 样式吗？查看该案例的 Facebook SDK 文档。我从来没有使用过它。不管怎样，你比前一段时间更进了一步。
我做了，但没用，因为非常感谢您的帮助！ :)