CODEWITHSUNDEEP
angularjscordovaionic-framework
colin
colin

Reputation: 425

facebookConnectPlugin is not defined (ngCordova, Ionic app)

I'm trying to add native fb connect to my ionic app.

I'm using: - Ionic - ngCordova - http://ngcordova.com/docs/plugins/facebook/

This is my code:

angular.module('starter.controllers', ['ngCordova'])

.config(function($cordovaFacebookProvider) {
var appID = 123456789;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
})

Which leads to this error >

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
ReferenceError: facebookConnectPlugin is not defined
at browserInit (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1576:7)
at http://localhost:8100/js/controllers.js:6:30
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at runInvokeQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11900:35)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11909:11
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11907:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)

Tried a couple of things but without any positive result: - When I build it and run it on my device the app displays a blank screen

I already have a prototype working with the fb auth in the in-app-browser. But I really want to have a native fb connect functionality.

Upvotes: 15

Views: 11395

Answers (3)

The Segfault
The Segfault

Reputation: 1030

i found a way to resolve this issue.

Thanks to this thread : https://github.com/driftyco/ng-cordova/issues/446

and this tutorial : https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/browser/README.md

1st step : Don't forget the <div id="fb-root"></div> after ur body.

2nd step : I added facebookConnectPlugin to my bower dependencies

See my bower.json :

"dependencies": {
    "angular-google-maps": "~2.0.13",
    "google-map": "~0.4.1",
    "facebook-connect-plugin": "https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"
}

See my app.config + code to init:

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) {

var appID = 597135743751760;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);

$cordovaFacebookProvider call facebookConnectPlugin()

3th step : After changing this dependencies, don't forget to call bower update from ur CLI. bower update example

4th step : Include the new facebookblablabla.js in your index.html.

it can be

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

for me it was

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

5th step : add in the Valid OAuth redirect URIs field at your Facebook App : http://static.ak.facebook.com/connect/xd_arbiter/

Hope it works for you :) !

Upvotes: 5

firangi
firangi

Reputation: 39

I don't know if someone still stuck with this thing then please follow the method mentioned my @Alexy and then edit the 'lib/facebook-connect-plugin/index.js' file line from :

if(cordova.platformId === 'browser')

to

if(!window.cordova || (window.cordova && window.cordova.platformId === 'browser'))

Hope this Helps :)

Upvotes: 0

aorfevre
aorfevre

Reputation: 5064

My answer is not providing a solution for your issue but an advice.

Why using facebook Cordova when you can use HelloJS? faceBook Cordova is platform dependant, much slower as it runs cordova true node.js and not evolutive.

HelloJS permits to integer various Oauth2 authentication very easily including, facebook / google / twitter / instagram ...

Without to tell that the compilation for facebook cordova is very tricky with the facebook key app. On HelloJS, this is only a parameter that you can easily change.

Upvotes: 0

Related Questions