React JS loading FB share

Question

I'm trying to add a facebook share to my react application. There is a lot of detail on Stackoverflow around adding FB.XFBML.parse()

How ever i'm a lint error "FB is not defined". What is the best way to load FB?

edit

window.fbAsyncInit function added.

"use strict";

var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var ThanksPage = React.createClass({
componentDidMount: function() {

            (function (d, s, id) {
            const fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
              return;
            }
            const js = d.createElement(s); js.id = id;
            js.async = true;
            js.src = '//connect.facebook.net/fr_CA/sdk.js';
            fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            window.fbAsyncInit = function() {
                FB.XFBML.parse();
            };


    },
    render: function() {
                    return (
                    );
    }
    });

    module.exports = ThanksPage;

did you even initialize the app? FB.init requires some parameters. please optimize the indentation of your code, it´s hard to read right now. — andyrandy
– andyrandy, Commented Jun 16, 2016 at 9:17
I've remove the init. The FB examples don't use this. My issue is that lint is saying FB is not defined and i need to work out how to register it with reactjs. — frosty
– frosty, Commented Jun 16, 2016 at 9:23

andyrandy · Accepted Answer · 2018-01-16 20:23:31Z

6

You can only use FB after FB.init:

componentDidMount() {
    window.fbAsyncInit = function() {
        //SDK loaded, initialize it
        FB.init({
            appId      : 'your-app-id',
            xfbml      : true,
            version    : 'v2.6'
        });
        //JS SDK initialized, now you can use it
        FB.XFBML.parse();
    };

    //load the JavaScript SDK
    (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";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

Also, make sure to use this with a server (public or localhost), don´t just open the html file in your Browser. You should also consider putting the Facebook stuff in a separate file, so you can use it in future projects. But first, make sure it works and make sure you understand what´s happening.

Keep in mind that you may need to use FB.XFBML.parse in componentDidUpdate too. You have to make sure the JS SDK is loaded already for that. componentDidMount will only get called once, and if you go to another route and back to this component, it will be cached and you need to parse Social Plugins again.

More information about the JS SDK: http://www.devils-heaven.com/facebook-javascript-sdk-login/

You can get rid of the linting error by using /*global FB*/ at the head of your files, or (much better) by defining FB in the .eslintrc file (if using ESLint):

"globals": {
    "FB": true
}

edited Jan 16, 2018 at 20:23

answered Jun 16, 2016 at 9:43

andyrandy

74.1k9 gold badges115 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

andyrandy Over a year ago

if you downvote an answer, please explain the reason. i am happy to improve my answer there is something wrong.

Ionut Necula Over a year ago

For me, the accepted answer from here stackoverflow.com/questions/40466492/… worked. Maybe will help someone else too.

andyrandy Over a year ago

thank you, i somehow missed the "linting" part, so i edited my answer.

andyrandy Over a year ago

i´ve also created a new answer in the other thread, because putting the comment in every single file is not a good solution: stackoverflow.com/questions/40466492/…

Jose Paredes · Accepted Answer · 2016-06-16 09:29:22Z

0

You are trying to execute

  FB.init();
  FB.XFBML.parse();

When the SDK is not even loaded, so, of course, you will get the undefined reference error.

You are missing the callback

  window.fbAsyncInit = function() {
      // Example: Standard initialization code:
      FB.init({
        appId      : '{your-app-id}',
        status     : true,
        xfbml      : true,
        version    : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
      });
      FB.XFBML.parse();
  };

This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots.

The URLs in the above code are protocol relative. This lets the browser to load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings.

The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.

Furthermore, you should set the callback before loading the SDK

window.fbAsyncInit = function() {
    // Example: Standard initialization code:
    FB.init({
      appId      : '{your-app-id}',
      status     : true,
      xfbml      : true,
      version    : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
    });
    FB.XFBML.parse();
};

(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
  return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

edited Jun 16, 2016 at 9:29

answered Jun 16, 2016 at 8:57

Jose Paredes

4,1283 gold badges29 silver badges51 bronze badges

5 Comments

frosty Over a year ago

thanks!, i've added this. But i'm still getting the lint error. Also i've added this to my example above

Jose Paredes Over a year ago

I have edited my answer, by default FB.init requires parameters as I have updated my answer

Jose Paredes Over a year ago

Be sure that you are not using the FB object out of the scope fbAsyncInit

frosty Over a year ago

I'm still getting the lint error FB is not define. I think you on the money with the out of scope comment. But i can't get my head around how to define FB in react

Jose Paredes Over a year ago

You don't define the FB object the bootstrap does that, are you sure you are not using FB object out of ´componentDidMount´ ?

Pavan · Accepted Answer · 2018-01-19 04:43:53Z

0

If you want to add any social share buttons to your react pages then you can try out npm module react-share which is very easy compared to native APIs by FB, Twitter etc.

Sample react-share code snippet at https://samvikshana.weebly.com/blog/react-share-social-share-widgets

edited Jan 19, 2018 at 4:43

answered Jan 18, 2018 at 16:35

Pavan

8587 silver badges18 bronze badges

1 Comment

Awalias Over a year ago

doesn't implement the callback to know whether share was successful or not :(

Collectives™ on Stack Overflow

React JS loading FB share

edit

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

edit

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related