Facebook plugins (like button, page plugin, comments...) in Gatsby - facebook

Question

I'm digging up how to implement Facebook plugins into Gatsby. I'm dealing with 3 issues:
1) Insert Facebook script into header which then walk through the page and render plugins (renders XFBML markup).
It can be done by manual inserting right in html.js file or just using plugin. Both do the work.
2) Put FB code (XFBML markup) in place where it is desired to render plugin.
Since in Gatsby pages are building in React it's needed to use dangerouslySetInnerHTML
example:
<div
dangerouslySetInnerHTML={{
__html: '
<div class="fb-like"
data-href="https://localhost/"
data-layout="standard"
data-action="like"
data-show-faces="true">
</div>
'
}}
/>
And whoala! Plugin is there ...BUT! This happens only when page is refreshed and because Gatsby is Single-Page Application when route is changed nothing is rendering.
3) Call FB.XFBML.parse() on page where is at least one Facebook plugin.
When I call this in browser plugins render but how to call it automatically in page? Moreover FB is object on global level which is not accessible from inside of page.

Answer 1

React Facebook package may work.
Example code:
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>
);
}