FB is not defined error in Cordova/Ionic App

Question

I am aware that receiving the following error is a common problem:

ReferenceError:FB is not defined

I have referenced the following post which seems to cover a wide array of solutions. FB is not defined problem

The problem specifically I am having is that if I test out my app deploying to the browser, the fbAsyncInit(...) is hit in my root index.html page.I know this because I put an alert('fbAsyncInit(..)') on the first line of the FB init code. For example, if I run the following command, It alerts fbAsyncInit(..)

ionic serve

As soon as I deploy to a device using the following command, I get no alert and when I try to actually invoke $cordovaFacebook.login(...) it gives me the following error:

ReferenceError: FB is not defined

My root index.html looks similar (removed some stuff for brevity).

<html>

    <!-- Other stuff here -->

    <div id="fb-root"></div>
    <script type="text/javascript" src="lib/additional/FacebookConnectPlugin.js"></script>
    <script>
      window.fbAsyncInit = function() {
        console.log('fbAsyncinit(..)');

        FB.init({
          appId      : '/*App id here*/',
          cookie     : true,  // enable cookies to allow the server to access 
          xfbml      : true,  // parse social plugins on this page
          version    : 'v2.1' // use version 2.1
        });


        (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'));
      };


    </script>

    <!-- Other Stuff Here -->
</html>

The one thing it is hitting is the following piece of code defined in FacebookConnectPlugin.js

 // Bake in the JS SDK
(function () {
    if (!window.FB) {
        console.log("launching FB SDK");
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/sdk.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
        console.log(window.FB)   //FB is undefined
    }
}());

When the script tag loads for FacebookConnectPlugin.js and this piece of code runs, it attempts to print window.FB to the console, but its undefined.

Any idea what is wrong given the code above?

place your code inside $ionicPlatform.ready(function() { //code here }) — Karan Kumar, Apr 29 '15 at 05:23
placing the FB.init and SDK code in the $ionicPlatform.ready(...) did the trick! Thanks for the help — TheJediCowboy, May 01 '15 at 02:04

score 1 · Answer 1 · answered Apr 29 '15 at 18:59

have you tried to surround your script by a document ready ?

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

Moreover, I do not recommand your to perform this action like that.

You shall :

define a controller on your app
add a $ionicPlatform ready event to your controller
perform your initialisation of your FB plugin in it.

score 0 · Answer 2 · answered Apr 30 '15 at 03:17

You need to use ngCordova, not traditional method.

http://ngcordova.com/docs/plugins/facebook/

Sample code

module.controller('MyCtrl', function($scope, $cordovaFacebook) {

  $cordovaFacebook.login(["public_profile", "email", "user_friends"])
    .then(function(success) {
      // { id: "634565435",
      //   lastName: "bob"
      //   ...
      // }
    }, function (error) {
      // error
    });


  var options = {
    method: "feed",
    link: "http://example.com",
    caption: "Such caption, very feed."
  };
  $cordovaFacebook.showDialog(options)
    .then(function(success) {
      // success
    }, function (error) {
      // error
    });


  $cordovaFacebook.api("me", ["public_profile"])
    .then(function(success) {
      // success
    }, function (error) {
      // error
    });


  $cordovaFacebook.getLoginStatus()
    .then(function(success) {
      /*
      { authResponse: {
          userID: "12345678912345",
          accessToken: "kgkh3g42kh4g23kh4g2kh34g2kg4k2h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn",
          session_Key: true,
          expiresIn: "5183738",
          sig: "..."
        },
        status: "connected"
      }
      */
    }, function (error) {
      // error
    });

  $cordovaFacebook.getAccessToken()
    .then(function(success) {
      // success
    }, function (error) {
      // error
    });

  $cordovaFacebook.logout()
    .then(function(success) {
      // success
    }, function (error) {
      // error
    });

});

This is what my code for the $cordovaFacebook.login(...) looks like, but I don't see where your registering the AppID for fb with $cordovaFacebookProvideer. You still need to specify and initialize the FB SDK — TheJediCowboy, Apr 30 '15 at 03:23
When you install facebook cordova plugin via terminal, it's already registred your AppID automatically. you can check .plist file. — Nurdin, Apr 30 '15 at 03:31

FB is not defined error in Cordova/Ionic App

2 Answers2