ReferenceError: "facebookConnectPlugin is not defined" on browser

[maggialejandro]

Hi, I'm trying to use the facebook plugin on the browser but this is what I'm getting:

ReferenceError: facebookConnectPlugin is not defined
    at Object.init (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1296:13)
    at Object.login (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1301:16)
    at Scope.$scope.authenticate (http://localhost:8100/js/controllers/auth/main.js:169:24)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:18471:21
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:43026:9
    at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20326:28)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20424:23)
    at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:43025:13)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:10478:10
    at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18) ionic.bundle.js:17696

The plugin works fine on mobile. I'm using "ngCordova": "~0.1.7-alpha"

Any ideas? Thanks in advance!

[pbernasconi]

I've had issues with using the FB plugin in my app development too. Sometimes it's necessary to include the FacebookConnectPlugin.js file in your index.html, as well as include this script, which injects the Facebook Javascript SDK into your app.

<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'your-app-id',
          xfbml      : true,
          version    : 'v2.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>

Let me know if that fixes it for you?

[felquis]

I solved this adding facebookConnectPlugin to bower

  "dependencies": {
    "ionic": "v1.0.0-beta.13",
    "ngCordova": "v0.1.7-alpha",
    "facebook-connect-plugin": "https://raw.githubusercontent.com/Wizcorp/phonegap-facebook-plugin/master/www/js/facebookConnectPlugin.js"
  },

And in my index.html

<script src='bower_components/facebook-connect-plugin/index.js'></script>

Only adding facebookConnectPlugin.js is enough because the plugin already add the Facebook SDK

Another thing not documented that I needed to do is to add http://static.ak.facebook.com/connect/xd_arbiter/ in the Valid OAuth redirect URIs field at my Facebook App

[pbernasconi]

Ah I realized why including just the facebookConnectPlugin.js script did not work previously for me: You have to include <div id="fb-root"></div> inside of your index file (see line in facebookConnectPlugin.js).

I think I've made it clear what is necessary inside of the ngCordova Facebook docs, but if you have anything that you'd like to add please submit a PR and help the community!

[maggialejandro]

Great! thank you both! Including fb's js sdk and facebook-connect-plugin bower dependency worked for me :+1:

[pbernasconi]

@maggialejandro also note that if testing in your browser you'll have to add your http://localhost:8100/ url to the accepted site URLs inside of the Facebook Developer portal. The page to configure these settings can be found at at https://developers.facebook.com/apps/{Your App ID}/settings/.

[felquis]

I forgot this fb-root,

@pbernasconi do you know if on iOS, the plugin will use the native app to log in? Because I made it work on Android, and worked fine.

But on iOS, the plugin open a modal to enter with facebook credentials, I'm not sure if I'm doing something wrong..

[pbernasconi]

The first time your user logins into your app ($cordovaFacebook.login()) you'll have to put in all of the permissions you require for your app. The modal will open asking the user to allow FB to be used in your app (you can't get around this).

After that your app will be forever logged into facebook. If your user closes your app and then reopens it, you should check if the user is currently logged ($cordovaFacebook.getLoginStatus()) in before asking to login (which is not necessary if getLoginStatus results in true). That way the modal never pops up again.

Then to call the api, make sure that the permissions are = [], so that the modal doesn't come up again. If you need extra permissions that you did not include in the login, then you'll have to include them in the api call, and it will bring up the modal again.

Does that help explain a few things?

[pbernasconi]

@felquis I may have misunderstood your question, but yes the iOS app works natively (as explained in my previous comment).

[felquis]

The modal will open asking the user to allow FB to be used in your app (you can't get around this).

My problem is that even logged in my facebook app, the modal is just like the Facebook SDK in the browser, I need to enter my facebook email and password :/ Here is a printscreen (it is in portuguese, but I think you can understand)..

I'm already logged on facebook app in the same device, but, I need to make login again.

I followed your docs three times, I dicovered about a Single Sign On conf that should be enabled Facebook Developer portal... but it doesn't work with the native facebook app :/

Can you share some hint about this? ( I hope you understand, my English is horrible =s )

[felquis]

On Android it worked, I don't need to enter my email and password, I just need to tab on "ok" to authorise my app.

[pbernasconi]

That's strange, maybe it's an issue with the Facebook Connect plugin and the iPad? I would create an issue on the github plugin and see what the owner has to say about it. It might be that you have to remove the browser SDK to allow the iOS plugin to take action and do it natively? Can you do it on an iPhone and verify that it works with the code that you havE?

[adaptivedev]

This did work for me:

<script type="text/javascript" src="js/facebookConnectPlugin.js"></script>
<div id="fb-root"></div>

In the past, I found I had to add a hash_key to FB to fix this same problem. Ideally, if hash_key is missing, the plugin would say so.

[adaptivedev]

@felquis @pbernasconi I've tried these answers and they haven't worked for me.

Maybe I'm putting things in the wrong places. Here's my index.html file: https://gist.github.com/adaptivedev/f52776a8c71a396ba558

The examples github links above give 404 error. Can someone please repost a working example?

Thanks so much!

[adaptivedev]

@felquis , @pbernasconi I don't see any bower_components directory.

.bowercc has "directory": "www/lib" but there's nothing there after bower install ngCordova, though I saw this:

RoverMR:BoosterApp rover$ bower install ngCordova bower facebook-connect-plugin#* not-cached https://raw.githubusercontent.com/Wizcorp/phonegap-facebook-plugin/master/www/js/facebookConnectPlugin.js# bower facebook-connect-plugin#* resolve https://raw.githubusercontent.com/Wizcorp/phonegap-facebook-plugin/master/www/js/facebookConnectPlugin.js# bower facebook-connect-plugin#* download https://raw.githubusercontent.com/Wizcorp/phonegap-facebook-plugin/master/www/js/facebookConnectPlugin.js bower ngCordova#* cached git://github.com/driftyco/ng-cordova.git#0.1.9-alpha bower ngCordova#* validate 0.1.9-alpha against git://github.com/driftyco/ng-cordova.git# bower facebook-connect-plugin#\ EHTTP Status code of 404 RoverMR:BoosterApp rover$

[felquis]

@adaptivedev They changed the location of the file, take a look at this repository, https://raw.githubusercontent.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js

[adaptivedev]

@felquis @pbernasconi FINALLY SOLVED!

I found all I had to do was

bower install ngCordova // but also AFTER doing:

cordova -d plugin add ../submodules/phonegap-facebook-plugin/ --variable APP_ID="" --variable APP_NAME="BoosterApp"

[adaptivedev]

I found another potential pitfall:

Sometimes $cordovaFacebook is defined (I see it's object in the debugger) but upon calling e.g. login() I get facebookConnectPlugin is not defined

I think this might happen when $ionicPlatform.ready() hasn't happened yet. I was having trouble accessing my service function from within ready() but that's another issue.

[jlstr]

Hello there!

Following @felquis advice, ie. adding "facebook-connect-plugin" as a dependency and doing 'bower install' does add the facebookConnectPlugin.js file as index.js, so, I added it to my index.html file and that goes well (the file is now in the project)

BUT,

I get the following error:

And of course, nothing else will work because of this line: https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/facebookConnectPlugin.js#L12 ...is a conditional that wraps the creation of the facebookConnectPlugin object itself.

Am I missing something? please help me.

PS. Needless to say I'm working using a browser(development mode), and I noticed the cordova.js file is empty.

I have already installed ngCordova too! so, there must be something really, really wrong that I'm doing, right?

Any help is certainly appreciated. -Jose

[pbernasconi]

Can you checkout my comment in https://github.com/driftyco/ng-cordova/issues/505#issuecomment-68639466 (#505)

[pbernasconi]

Also, instead of checking:

if (cordova.browser = ...)

do

if (!window.cordova)

[felquis]

Jose I saw that line.

While in the browser, cordova.js will be 404 it's okay.. but I don't know a lot about this new browser environment, so...

You can try download an old version of facebookConnect from 0.10.1 https://github.com/Wizcorp/phonegap-facebook-plugin/blob/0.10.1/www/js/facebookConnectPlugin.js

2015-01-04 16:21 GMT-02:00 Jose notifications@github.com:

Hello there!

Following @felquis https://github.com/felquis advice, ie. adding "facebook-connect-plugin" as a dependency and doing 'bower install' does add the facebookConnectPlugin.js file as index.js, so, I added it to my index.html file and that goes well (the file is now in the project)

BUT,

I get the following error:

[image: cordova_not_found] https://cloud.githubusercontent.com/assets/583016/5606901/da08e63a-9413-11e4-8b34-5ef9b55ff81d.jpeg

And of course, nothing else will work because of this line:

https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/facebookConnectPlugin.js#L12 ...is a conditional that wraps the creation of the facebookConnectPlugin object itself.

Am I missing something? please help me.

PS. Needless to say I'm working using a browser(development mode), and I noticed the cordova.js file is empty. [image: cordova_empty_file] https://cloud.githubusercontent.com/assets/583016/5606933/6584ac58-9414-11e4-9775-58c4ee458c2c.jpeg

I have already installed ngCordova too! so, there must be something really, really wrong that I'm doing, right?

Any help is certainly appreciated. -Jose

— Reply to this email directly or view it on GitHub https://github.com/driftyco/ng-cordova/issues/446#issuecomment-68642769.

[jlstr]

@pbernasconi Where inside an Ionic app's codebase should I change if (cordova.browser = ...) for if (!window.cordova)?

or is it somewhere inside the plugin's code, sir?

[jlstr]

@felquis I know, sir. cordova.js for development purposes is a 404, and that used to be fine, but the facebookConnectPlugin plugin js file seems to be demanding that cordova.js is present during development.

Are you working on an Emulator exclusively for development? Thanks for your kind replies!

[pbernasconi]

@jlstr I didn't notice that the if (cordova.browser = ...) is part of the wizcorp facebook plugin in line 12. This is a huge error in the FB plugin, since cordova is obviously undefined in the browser.

I've just made this PR https://github.com/Wizcorp/phonegap-facebook-plugin/pull/880 which hopefully will go through and fix this issue.

In the mean time use (!window.cordova) rather than if (cordova.browser = ...).

[jlstr]

@pbernasconi THANK YOU VERY MUCH, Sir. Now, the obvious question is, How can I continue working in the Browser? What do You Guys use for a dev. environment?, Now, you've got me really curious because this seems to suggest you don't work using a browser at all. is that correct?

Kind Regards,

[adaptivedev]

@pbernasconi Very glad you found and reported that! So, how is this different not in "dev"? How can I test FB login using this plugin in non-dev? Thanks!

[aogilvie]

As I commented on the PR (https://github.com/Wizcorp/phonegap-facebook-plugin/pull/880 - thanks btw!) from @pbernasconi if you wish to run your application in browser mode you must add the browser platform; cordova platform browser This acts like any other platform. Apache Cordova team has created a new cordova.js library specifically for browser to allow plugins to help bridge missing APIs when running in the browser.

I think the PhoneGap/Cordova workflow is not very well explained on their website so i'll explain how I think the correct way to develop a PhoneGap/Cordova application.

After creating your Cordova application and adding your platforms your directory structure should look a little something like this;

• platforms
  • android <-- test and publish your application in here for Android
  • browser <-- test and publish your application in here for the browser
  • ios <-- test and publish your application in here for iOS
• www <-- edit your files here
• hooks
• plugins

After editing your files there is a "compile process" similar to any other programming workflow usually done by an IDE such as Xcode, Eclipse etc. To "compile" your project you would run cordova build command. You can re-compile for a specific platform with cordova build browser cordova build ios for example.

If running a command each time a file is modified sounds like a pain do;

First start your browser app; cordova run browser

This starts Chrome with special flags and loads (<your app dir>/platforms/browser/www/index.html).

Next we'll install a file system listening script;

gem install listen

create listen.rb file at your project root and add:

require 'listen'
listener = Listen.to('www') do |modified, added, removed|
  if modified.size > 0
    puts "Files modified: #{modified}"
    `cordova build browser`
  end
  if added.size > 0
    puts "Files added: #{added}"
    `cordova build browser`
  end
  if removed.size > 0
    puts "Files Removed: #{removed}"
    `cordova build browser`
  end
end
listener.start
sleep

The above code will monitor the www directory and build the browser platform each time something changes.

Now run ruby listen.rb

And behold... magic will happen. Just refresh Chrome to see your changes.

[sean-hill]

@aogilvie I'm confused if I have to include the facebookConnectPlugin.js manually in my index.html a long with the <div id="fb-root"></div>.

I'm currently doing this

<div id="fb-root"></div>
<script src="lib/facebook-connect-plugin.js"></script>

Where facebook-connect-plugin.js is the file found at the root of the phonegap-facebook-plugin repo. But when I run cordova run browser KABOOM.

[grillorafael]

same here @sean-hill

[djabif]

I was having the same error and I found this app which is made with Ionic and the cordova facebook plugin and provides a native Facebook login. It worked fine for me and includes a great guide on how to integrate/install the facebook plugin to your existing app.

You can check it in the following link: http://codecanyon.net/item/ionic-phonegapcordova-facebook-native-integration/10228279?ref=recommended_for_you

Hope it helps!

[adrianmkofficial]

Anyone fixed this issue or has a temporary solution? I'm currently facing the same Problem as @sean-hill :/ Maybe an alternative Library / Approach might help?

[bmsalm]

Has this been resolved? This is occurring for me when running browser and android...

[tattivitorino]

same problem here!!

[felquis]

I solved it today, I had to use:

cordova platform add browser cordova run browser cordova serve browser OR create serve of platforms/browser/www

It'll run perfectly with cordova proxy for browser

I also had a problem with InAppBrowser plugin with cordova browser, they overwrite the native browser's window.open function, causing the facebook login to return error X-Frame-Options configured to DENY, because we can't load it with iframes, just actually tabs, browser windows, popup. To reset to default behaviour, just delete the object:

document.addEventListener("deviceready", function () {
  delete window.open;
}, false);

It'll reset the window.open functionality.

Note that it's only necessary in the cordova browser env, in your iOS or Android build it must be ignored.

if (cordova.platformId === 'browser') {
  document.addEventListener("deviceready", function () {
    delete window.open;
  }, false);
}

2015-06-18 17:59 GMT-03:00 tattivitorino notifications@github.com:

same problem here!! [image: image] https://cloud.githubusercontent.com/assets/5480296/8242120/ab1e1ed8-15e3-11e5-95c8-7a2487bd41f0.png

— Reply to this email directly or view it on GitHub https://github.com/driftyco/ng-cordova/issues/446#issuecomment-113288170 .

[bmsalm]

@felquis - Are you saying that this will correct the 'cordova not defined' and 'module not defined' errors that people are detailing above? I don't see the connection due to my javascript noobness.

I'm having these issues on BOTH Chrome and Android using the ionic run commands... Even though both respective directories have the plugin installed within them...

Thanks for your detailed response!

[bmsalm]

OK - I think I've figured out a BIG piece of my problem.

The issue I was having was with the portion that was

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) 
{
    var appID = 1234567890;
    var version = "v2.0"; // or leave blank and default is v2.0
    $cordovaFacebookProvider.browserInit(appID, version);
})

The issue seems to be that this code is being executed BEFORE the app has a chance to actually load the facebookCordovaPlugin module. I experimented with this and put some code just in my login controller, which is only available after you click a button, and the plugin works!

In Ionic, this can be remedied in most situations by wrapping code in the

$ionicPlatform.ready(function(){
     // cordova fb code here
});

Hope this helps some people!

[gunsline]

I think this link will help https://github.com/jjsee/facebook-connect-plugin-parse-phonegap-ionic

I have to download the sdk of facebook and include to work on browser.

Havent tested on android and ios, but will, on browser is solved out, this support is for IONIC.

[sryze]

I've tried everything mentioned in this thread and elsewhere, spent like 4 hours on this and still wasn't able to get it working. Why does it have to be so damn hard? It's sooo frustrating.

Edit:

I'm sorry if I sounded a little harsh, I just didn't expect something as simple as this to be that difficult, and was kind of tired of fighting with it. Perhaps I should to sleep.

[gortok]

@sryze what version of ng-cordova are you using?

[sryze]

@gortok ngCordova 0.1.24-alpha

[SimoneChiesi]

To whom may have stumbled here through Google,

TL;DR:

if(!window.cordova){  
  $cordovaFacebookProvider.browserInit(appID, version);  
}

Should you have managed to use $facebookCordova to make your plugin work in a browser \ ionic serve, but can't quite manage to have it work on Android \ iOS due to a "FacebookConnectPlugin not defined" or "Can't call method browserInit of undefined", you should look at bmsalm's answer.

OK - I think I've figured out a BIG piece of my problem.

The issue I was having was with the portion that was

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) { var appID = 1234567890; var version = "v2.0"; // or leave blank and default is v2.0 $cordovaFacebookProvider.browserInit(appID, version); }) The issue seems to be that this code is being executed BEFORE the app has a chance to actually >load the facebookCordovaPlugin module. I experimented with this and put some code just in my login >controller, which is only available after you click a button, and the plugin works!

This is actually a little bit different: quite simply, browserInit should only be called by browsers. Considering you are also calling a provider, $ionicPlatform.ready is not really an option or a solution.

So what is the solution? Checking if window.cordova exists, before calling the afore mentioned method. So, within your app.js or config snippet:

.config(function($stateProvider, $urlRouterProvider, $cordovaFacebookProvider) {
  if(!window.cordova){  
    $cordovaFacebookProvider.browserInit(appID, version);  
  }
  ...

[pedrobrasileiro]

i resolved with $ionicPlatform.ready

$ionicPlatform.ready(function() { facebookConnectPlugin.getLoginStatus( function(res) { d.resolve(res.status == "connected"); }, function(err) { d.reject(err); } ); });