Question

我正在使用Gatsby创建一个博客网站。我对Gatsby / React非常陌生。我需要有关Gatsby的Facebook评论插件的一些文档。

谢谢。

Answer 1

如果您要使用提供comments的Facebook Graph API检索Facebook注释，则可以使用gatsby-source-facebook来实现这一点，您可以将其安装到Gatsby网站中，如下所示：

npm install --save gatsby-source-facebook

然后，通过将其添加到gatsby-config.js中来配置源插件：

  plugins: [
    {
      resolve: `gatsby-source-facebook`,
      options: {
        places: [`${facebookPageID}`], // Can be either a numeric ID or the URL ID
        params: {
          fields: 'hours, posts { message, created_time }', // See Facebooks API to see what you can query for
        },
        key: process.env.FACEBOOK_GRAPH_TOKEN, // You will need to create a Facebook application and go through review in order to get an API token.
      },
    },
  ],

执行gatsby develop并导航到预配置的本地环境（例如http://localhost:8000）时，您应该能够使用位于http://localhost:8000/___graphql的GraphiQL探索GraphQL模式。

Answer 2

尝试使用 Gatsby's SSR (Server Side Rendering) APIs 中的 onRenderBody 函数。在您的 gatsby-ssr.js 文件中粘贴以下代码

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/ssr-apis/
 */


const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <div id="fb-root"></div>,
    <script
      async
      defer
      crossorigin="anonymous"
      src="https://connect.facebook.net/it_IT/sdk.js#xfbml=1&autoLogAppEvents=1&version=v9.0&appId=*you app id*"
      nonce="rlVIHZ6h"
    ></script>,
  ])
}

然后你将在你的文章或任何你想要的地方用其余的代码呈现评论

<div class="fb-comments" data-href="https://yourwebsite.com/blog/*" data-width="100%" data-numposts="5"></div>

如何在Gatsby中添加Facebook评论插件？

2 个答案: