FB.init() not working when speed is throttled via chrome developer tool

Question

I am using a facebook login feature in my website. But somehow when i throttle the speed using Chrome Developer tool, FB.init doesn't seems to work.

My event "fbReady" is not broadcasted. I put a debugger on line FB.getLoginStatus. But the script never stops because it's not initialising.

It works fine when there is no throttling of speed.

This is my initialization code.

var app = angular.module("myApp", ["ngRoute"]);
app.run(function($window, $rootScope, $location) {
    $window.fbAsyncInit = function() {
        FB.init({
            appId: 'xxxxxx95',
            status: true,
            cookie: true,
            xfbml: true,
            version: 'v2.10'
        });

        FB.getLoginStatus(function(response){
            if (response.status == "connected") {
                $rootScope.userId = response["authResponse"]["userID"];
                $rootScope.fbReady = true;
                $rootScope.$broadcast('fbready');
                $rootScope.$apply();
                FB.api('/' + $rootScope.userId + '?fields=picture.type(square)', function(response) {
                    $rootScope.userPic = response["picture"]["data"]["url"];
                })
            }else{
                $rootScope.fbReady = true;
                $rootScope.$broadcast('fbready');
            }
        })
});

score 2 · Accepted Answer · answered Oct 08 '17 at 05:01

I remember having similar problem. It is probably related to how you have included the facebook sdk in you javascript SPA application.

Here is my working function for including facebook (I'm using this in ReactJS project)

function initFacebook() {
        window.fbAsyncInit = function() {
            let FB = window.FB;
            FB.init({
                appId: process.env.FACEBOOK_APP_ID,
                cookie: true,
                xfbml: true,
                version: 'v2.10'
            });
            FB.getLoginStatus(function (response) {

            })
        }

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

You can try running this function inside your app.run method

FB.init() not working when speed is throttled via chrome developer tool

1 Answers1