adding facebook sdk to react-starter-kit

Question

Where or how do I add the FB sdk? I want to add share button and page box plugin.

    <!-- fb stuff -->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=${FB_APP_ID}";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- /fb stuff -->

andyrandy · Answer 1 · 2017-10-23T08:25:01.557

2

Include the JavaScript SDK on your page once, ideally right after the opening <body> tag

Source: https://developers.facebook.com/docs/plugins/share-button/#configurator

In React, you can also load it in your main components componentDidMount function, for example:

componentDidMount() {
    (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1version=v2.10&appId=${FB_APP_ID}";
          fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, 'script', 'facebook-jssdk'));
}

The fb-root div will be auto-generated if it does not exist.

You may need to use FB.XFBML.parse in componentDidUpdate, make sure you understand why: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Of course you can only use FB after the JS SDK has been loaded. Here is an example for the fbAsyncInit function: http://www.devils-heaven.com/facebook-javascript-sdk-login/

edited Oct 23 '17 at 08:25

answered Oct 23 '17 at 08:19

andyrandy

72,880
8
113
130

Indeed that's what I'm doing now as a workaround, but it doesn't strike me as the best way – Shining Love Star Oct 23 '17 at 13:04
that´s not really a workaround, it´s a perfectly fine solution. you can just put the js sdk initialization in an external file and use promises (and async/await) to load it somewhere in your app. you can even load the js sdk BEFORE componentdidmount if you wish. – andyrandy Oct 23 '17 at 13:20
I prefer to send it from server as a script on render. and I can't do it BEFORE componentDidMount, I get `document is not defined` error – Shining Love Star Oct 25 '17 at 07:30
you can, even before loading react. i do that in all my projects and it works fine. but if you want to detect when the SDK has been loaded, you should put it in componentDidMount. – andyrandy Oct 25 '17 at 07:49
how do you want to load it as a script on render? do you mean the js sdk? you should load that from facebook and just use their code for implementation. – andyrandy Oct 25 '17 at 07:51
like it's done [here](https://github.com/verekia/js-stack-boilerplate/blob/master/src/server/render-app.jsx). Do you have an example of loading the sdk on `componentWillMount`? I'm getting that error – Shining Love Star Oct 25 '17 at 17:43
in that example code, you could just add it right after the body tag, for example – andyrandy Oct 25 '17 at 17:53
yes but I don't see how to do it in `react-starter-kit` and yea I can only do that in `componentDidMount`, but I prefer to load it before – Shining Love Star Oct 26 '17 at 19:52
ok, but that will only come with some problems. you really need to detect when it is loaded, so it is better to use componentDidMount. – andyrandy Oct 26 '17 at 20:45

adding facebook sdk to react-starter-kit

1 Answers1