Gatsby 中的 Facebook 插件（如按钮、页面插件、评论...）答案

【问题标题】：Facebook plugins (like button, page plugin, comments...) in GatsbyGatsby 中的 Facebook 插件（如按钮、页面插件、评论...）
【发布时间】：2019-05-05 19:53:18
【问题描述】：

我正在研究如何在 Gatsby 中实现 Facebook 插件。我正在处理 3 个问题：

1) 将 Facebook 脚本插入到标题中，然后遍历页面并渲染插件（渲染 XFBML 标记）。

可以通过在html.js 文件中手动插入或仅使用plugin 来完成。两者都做。

2) 将 FB 代码（XFBML 标记）放在需要渲染插件的位置。

由于 Gatsby 页面是在 React 中构建的，因此需要使用 dangerouslySetInnerHTML 示例：

<div
    dangerouslySetInnerHTML={{
        __html: '
            <div class="fb-like" 
                data-href="https://localhost/" 
                data-layout="standard" 
                data-action="like" 
                data-show-faces="true">
            </div>
        '
    }}
/>

哇哇！插件在那里......但是！这仅在页面刷新时发生，因为 Gatsby 是单页应用程序，当路由更改时，没有任何内容呈现。

3) 在至少有一个 Facebook 插件的页面上调用 FB.XFBML.parse()。

当我在浏览器插件渲染中调用它时，如何在页面中自动调用它？此外，FB 是全局级别的对象，无法从页面内部访问。

【问题讨论】：

标签： facebook gatsby

【解决方案1】：

React Facebook 包可以工作。

示例代码：

import React from "react";
import { FacebookProvider, Like } from 'react-facebook';
import { APP_ID } from "./constants";
import { Location } from "@reach/router";

export default (props) => {
  return (
    <FacebookProvider appId={APP_ID}>
      <Location>
        {({ location }) => (
          <Like
            href={location.href}
            colorScheme="light"
            showFaces={false}
            share
            layout="button_count"
            {...props}
          />
        )}
      </Location>
    </FacebookProvider>
  );
}

【讨论】：