Question

我正在研究如何在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是无法从页面内部访问的全局级别的对象。

Answer 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>
  );
}

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

1 个答案: