CODEWITHSUNDEEP
facebook-javascript-sdkreact-starter-kitserver-side-rendering
goldylucks
goldylucks

Reputation: 6144

adding facebook sdk to react-starter-kit

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 -->

Upvotes: 0

Views: 1160

Answers (1)

andyrandy
andyrandy

Reputation: 73984

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/

Upvotes: 2

Related Questions