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

问题描述

我一直在尝试将 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-helmet' 中找不到导出“默认”（导入为“头盔”）

并得到这个浏览器错误：

标签： reactjsfacebookiframegatsby

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

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

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

问题描述

解决方案

推荐阅读