pc035860 / angular-easyfb Goto Github PK

When the social buttons are rendered, Firefox opens a new tab with the rendered button. This happens, for example, with the DEMO in http://plnkr.co/edit/1c5cWB?p=preview

The page plugin is not loaded. It also doesn't work with the demo.

Screenshot taken on iPad:

According to the Facebook API there is a FB.getAuthResponse() method:

https://developers.facebook.com/docs/reference/javascript/FB.getAuthResponse/

However it doesn't seem to be present in $FB.

Looking through the code, I'm trying to understand how difficult it would be to wrap the async calls to facebook with $q and tie in the events to the angular event system. Thoughts?

Using sdk.js allows for the use of "version" in the config settings passed to init. This allows developers to specify 1.0 of the SDK as the version to still use some options (like create_events) that is being deprecated but at this point is still usable if you specify the version. It's also the version of the SDK that should be used moving forward according to Facebook.

https://developers.facebook.com/docs/javascript/quickstart/v2.0

https://github.com/pc035860/angular-easyfb/blob/master/angular-easyfb.js#L73

Hi,
I've been using your library in many projects now and it is truly great!

I'm starting to work on a Facebook canvas app (an internal application that works inside the Facebook site through an iFrame).

I wonder if easyfb supports working with those kind of applications?
From what I understand authentication is performed by getting a POST request signed_request.

Is this related to easyfb or not at all?
Thanks

Hi,

I experience the following error on your promise demo page:

Uncaught SecurityError: Blocked a frame with origin "http://static.ak.facebook.com"  from accessing a frame with origin "http://plnkr.co". Protocols, domains, and ports must match. 

The same occurs on my actual app

Hi after the user has signed in with facebook. I have result with the access token and the user id. I was trying to pass these 2 things to the ezfb object so the user doesn't have to sign in with facebook again. Is there a way to do this?

My code for login:
ezfb.login(null, {
scope: facebookcfg.scope
}).then(function(res) {
console.log(res);
$facebook.saveFacebookToken(res.authResponse.accessToken, res.authResponse.userID);
});
I want to do this:

$facebook.getFacebookToken()
.then(function(result) {
//TODO: pass result to ezfb: ezfb.loadSignedInData(result.accesstoken, result.userId)
console.log(result);
},
function(result) {
$scope.login();
})

Thanks!

Hi,

I'm new to AngularJS but I really like how this module was designed. It's a really clean concept to wrap the FB.* API under a $FB.* wrapper injected by AngularJS (makes new AngularJS users feel comfortable).

I've just started using this and I've run into the following issue: I can't seem to subscribe to login status changes. What I'm doing is:

angular.module('myApp')
  .controller('LoginCtrl', function ($scope, $FB) {
    $FB.Event.subscribe('auth.authResponseChange', function(response) {
      alert('auth.authResponseChange callback!');
    });
  });

My app has the app.js file where I set my AppId when configure my module. I have a '/login' route that uses a partial view (let's say /partials/login.html) to display the Facebook login button with:

  <div ezfb-xfbml>
    <div class="fb-login-button" 
         data-show-faces="true" data-max-rows="1"></div>
  </div>

The login button is displayed normally and I get the pop-up window that let's me login to Facebook, but the callback alert is never triggered. Is subscription to events supported?

angular-easyfb work really well login and logout. However when I try to integrate with other framework (ionic -- https://github.com/driftyco/ionic) it cause "'X-Frame-Options' to 'DENY'." when "logging out".

Since your library work well can logging out successfully. Can you give me idea, what might be the problem of x-frame deny. (Probably "next" params?)

"https://www.facebook.com/logout.php?access_token=ACCESS_TOKEN&app_id=APPID&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FdgdTycPTSRj.js%3Fversion%3D41%23cb%3Df2e36ae79c%26domain%3Drun.plnkr.co%26origin%3Dhttp%253A%252F%252Frun.plnkr.co%252Ff6eb1eb14%26relation%3Dparent.parent&display=hidden&e2e=%7B%7D&locale=en_US&next=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FdgdTycPTSRj.js%3Fversion%3D41%23cb%3Df229ffc204%26domain%3Drun.plnkr.co%26origin%3Dhttp%253A%252F%252Frun.plnkr.co%252Ff6eb1eb14%26relation%3Dparent%26frame%3Df523faf0c&sdk=joey"

Hi,

Firstly, I would like to thank you for the nice angular wrapper.

I tried to use as the example provided in the read me, firstly I had to change org.apache.cordova.facebook.Connect in the cordova exec function calls in cdv-plugin-fb-connect.js file to ConnectPlugin to reflect the name of the android class. (I know this is not related to your plugin but this is to explain how things is working now.

I added the following as configrution:

.config(function (ezfbProvider) {

  ezfbProvider.setInitParams({
    appId: '123123123123123', // for demo purposes
    nativeInterface: window.CDV.FB, 
    useCachedDialogs: false
  }); 

  ezfbProvider.setLoadSDKFunction(function ($ionicPlatform, ezfbAsyncInit) {
    $ionicPlatform.ready( function () {
      console.log("ezfb async init");
      ezfbAsyncInit();
    });
  });

})

When opening the app on the mobile I get the following alert Cordova Facebook Connect plugin fail on init! then everything work If I clicked on my fb login button it open the native interface and make the login.

But with each any request I received the following error object as I am not logged in or the fb sdk does not send the pervious access token with the api request, unless i click the login button again and refresh the request it show the following the error object:

Before login again I checked if the access token is saved in localStorage and find it with the key cdv_fb_session, Most of the code problems is related to the phonegap plugin but when using their examples I don't have to login again for everything to work.

Your prompt response is highly appreciated. Thank You :)

When the web app is in Facebook's Canvas on IE11 on Windows 7, everything seems to work fine. When it is in Facebook's Canvas on IE11 on Windows 8.1, it does not work. ezfb.getLoginStatus() and ezfb.login() do not run.

I reviewed the console messages, and I do not see any clues or differences between the messages in IE11 on Windows 7 versus IE11 on Windows 8.1.

Can you suggest how we can debug this? Is there anything that we can write out to the console to make sure that everything else is working, such as the SDK is initialized and loaded?

Please update to the latest angular js.

The original FB.Event.unsubscribe require the exact same listener function fed to FB.Event.subscribe.

Need to find a way to map the original listener function to new generated listener function in order to feed the original FB.Event.unsubscribe with the exact same listener function (wrapped by angular-easyfb).

It doesn't seem to work on iOS 7, the popup goes away and nothing happens, is it normal ?

Get this error while trying to use a facebook comments.

div(class="fb-comments" data-href="{{getAbsUrl()}}" 
     data-numposts="5" data-colorscheme="light" data-width="100%")

TypeError: Cannot read property 'childNodes' of undefined
    at nodeLinkFn (base.js:19233)
    at compositeLinkFn (base.js:18587)
    at nodeLinkFn (base.js:19233)
    at compositeLinkFn (base.js:18587)
    at compositeLinkFn (base.js:18590)
    at publicLinkFn (base.js:18466)
    at base.js:12959
    at Scope.$get.Scope.$eval (base.js:25910)
    at Scope.$get.Scope.$apply (base.js:26009)
    at bootstrapApply (base.js:12957)

and

TypeError: Cannot set property 'textContent' of undefined
    at Object.ngBindWatchAction [as fn] (base.js:31832)
    at Scope.$get.Scope.$digest (base.js:25752)
    at Scope.$get.Scope.$apply (base.js:26015)
    at bootstrapApply (base.js:12957)
    at Object.invoke (base.js:15694)
    at doBootstrap (base.js:12955)
    at bootstrap (base.js:12975)
    at angularInit (base.js:12869)
    at HTMLDocument.<anonymous> (base.js:37634)
    at jQuery.Callbacks.fire (base.js:3073)

Running With AngularJS 1.3. Error only happen with the above line of code enabled.

Any idea why?

According to Facebook document,
data-width="100%" will make the comment box full width of the parent element
I've tested it and it's working with standard Facebook init

However, this is not working on angular-easyfb. The whole comment box is gone
I inspect the element created by FB sdk, and found that the width becomes 0, which causes the comment box invisible.

I've tried other width such as 500px and 1000px and it's working.

Plunkr: (Please select comment tab)
http://plnkr.co/edit/ZILG9JG9PnzOB9xjuc6q?p=preview

I implemented this code into my AngularJS (version 1.2.6) app and it enables me to login with Facebook on Chrome, but not IE9 (I have not tested on other versions of IE). When I run ezfb.login(), I get Facebook's dialog popup. After I enter my login info and click "Log In", the popup goes blank and nothing happens after that (though, if I open Facebook.com in another tab, it has logged me in there). Nothing runs after the ezfb.login() line and nothing shows in the console for the Facebook popup.

Has anyone got it to work on IE? Any suggestions on what I need to do?

There is an issue - if you have markup like this:

<div id="FB"></div>

plugin will fail to initialize.

It is caused by using FB in global scope - in angular-easyfb.js

 $window.FB.init(ezfbInitParams);

https://github.com/pc035860/angular-easyfb/blob/master/angular-easyfb.js#L130

How to use this module with yeoman server(Local development)?

https://github.com/phonegap/phonegap-facebook-plugin
http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

Hi,

I'm trying to use your plugin to catch if is clicked on like with likebox
but event.subscribe is not working can this be handled with your plugin?

  $FB.Event.subscribe('edge.create', likeOrNot);

  likeOrNot = function(url, elm) {
    $scope.variable = "event"
  };

BTW: nice work :)

Does the library support the FB.AppEvents functions?

https://developers.facebook.com/docs/canvas/appevents

Hi,

I'm trying to use ezfb and I have this issue

Error: ezfb.getLoginStatus is not a function

the module seems to be correctly initialised in my index.html.
The controller is located in a sub page rooted by ngRoute.

Config in index.html

        (function() {
            angular.module('app', ['720kb.socialshare', 'ui.bootstrap', 'gridster', 'ngRoute', 'dndLists', 'ngFileUpload', 'ezfb'])

                .config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider, ezfbProvider) {

                    $locationProvider.html5Mode({enabled: true});

                    $routeProvider
                        .when('/12', {
                            templateUrl: 'kit/12/view.html',
                            controller: 'MainCtrl'
                        })
                        .when('/13', {
                            templateUrl: 'kit/13/test.html',
                            controller: 'MainCtrl'
                        })
                        .otherwise({
                            redirectTo: '/12'
                        });
                    }

                    ezfbProvider.setInitParams({
                        appId: '1468678883433799',
                        version: 'v2.3'
                    });  

                ])


                .controller('RootCtrl', function($scope) {
                    $scope.$on('$locationChangeStart', function(e, next, current) {
                        $scope.page = next.split('/').splice(-1);
                        if ($scope.page!=''){
                            $scope.styleUrl = 'kit/' + $scope.page + '/style.css';
                        }
                    });
                })  

        })();

Controler in kit/12/view.html

.controller('MainCtrl', ['$scope', 'Upload', function($scope, ezfb, Upload) {

ezfb.getLoginStatus(function (res) {
    $scope.loginStatus = res;

    (more || angular.noop)();
  });

  ezfb.api('/me', function (res) {
    $scope.apiMe = res;
  });

…

}

I can't find any help about this issue,
Can I get some help ?

Thanks
Vincent

Hi Robin,

First of all, thank you for sharing angular-easyfb with us.

I have a angular controller that calls $FB.api when loaded. It works fine when the user arrives at this controller after a $FB.login.

But... when the user hits F5 and refresh the page, this call to $FB.api does not include any access_token, and I get a response with the message: "An active access token must be used to query information about the current user".

Let me know if I'm doing something wrong.

Thank you!

Best regards,
Daniel Silva

Any particular reason why is possible to use the directive via class? I see in the source that it is either element or class.

My concern is that there is significant number of class names that the directive reserves and could easily collide unintentionally.

Hi,
Thanks for this module, it's great. However, I found it very confusing to use. THe demos are great, but the documentation is not very clear. You should maybe add what the different callback functions are expecting. As an example,

function updateMe () {
ezfb.getLoginStatus()
.then(function () {
return ezfb.api('/me');
})
.then(function (me) {
$scope.me = me;
});
}

The argument of the resolve callback of the getLoginStatus promise is empty, can we use it though ? It would be great not to have to dig into the code to find out.

Hi,

First of all thanks a lot for sharing, saved me lot's of time!

I'm using ui-router and resolving if a given user has "liked a page" or not. If not I need to display the facebook like button. The issue I'm finding is that, by returning a promise at the moment it's resolved, the facebook button is not generated but I keep the original html code.

This is my code main.js:

http://pastie.org/private/w4kuxi34qivj7snm729aba

I've got this view to display or not the like button:

http://pastie.org/private/ynjvlqq28zmagbq1p4ymg

I'd really appreciate if someone could have a look :)

Thanks a lot!

Hi, I want to report that the demo2, present in the README isn't working anymore. I have a blank page.

http://plnkr.co/edit/gFM1LV?p=preview

Hi ,

I saw only an example of ezfb.api('/me') access in the tests file.
I'm trying to access page's data using
ezfb.api('/Page_ID') and it returns an error "message: "An access token is required to request this resource."

Is there a way to do it with this library ?

Hey there,

Out of the blue, my application using ezfb started to throw this error.

http://docs.angularjs.org/error/$injector/modulerr?p0=ripple&p1=Error:%20%5B$injector:unpr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.2.9%2F$injector%2Funpr%3Fp0%3D%2524FBProvider%0A%20%20%20%20at%20Er

Thanks!

This plugin is really helpful, thank you for that, is there a way to catch event or some other way when someone posted a comment or does a 'like'?

Hi,

currently I am only using the plugin to show the Facebook "Like" button, but I am planning on using it for API alls in the future.

Everything seems to work ok with the button, but I am getting the warning:
FB.init has already been called - this could indicate a problem
with the page load.

Any clues why this is happening?

I am using angular 1.3.15

after trying so many unsuccessful attempt to integrate phonegap with facebook-plugin i found this plugin , i just have one question before trying this on phonegap

does this use native sdk or should i install inappbrowser

In v1.4.0 the directory structure was changed but this change was not applied in the bower.json

I keep getting this error when I used the method outlined in your plunker. The thing is that i'm using your solution with Ionic framework but also I am using Firebase for login authentication. I tried using there method for log-out but it doesn't completely log me out of the Facebook API. Thus the reason I'm trying to use yours for complete logout will I keep Firebase for login due some other requirements I have in my app. Thanks.

Hi,

I'm building an app using your easyfb and it worked great!. But the client wants our app to be encapsulated into a web view. So when we tried wrapping it into a mobile web view it gave us a blank page.

Our problem is very very similar to this link: https://groups.google.com/forum/#!topic/rdio-api/NnYlqqXmkCA. Suggesting adding an redirect but how do you add this to your easyFb library? https://groups.google.com/forum/#!topic/rdio-api/NnYlqqXmkCA

Hi there,

Can this plugin work with the latest develop branch of the phonegap plugin as it's a rewrite of the cordova js api?

Thanks..

Hi,

I'm using the last version of Cordova.
In order to benefit from Native SDK using Cordova, I'm stuck on this code snippet:

        ezfbProvider.setInitParams({
            appId: '123456789',
            nativeInterface: CDV.FB,
            useCachedDialogs: false
        });
        ezfbProvider.setLoadSDKFunction(function ($document, ezfbAsyncInit) {
            $document.on('deviceready', function () {
                ezfbAsyncInit();
            });
        });

When I set this part of the following code, as your tutorial shows, it complains about this "basic" error that I can't figure it out:

Unknown provider: aProvider <- a <- ezfb

However there is no error when I just write:

            ezfbProvider.setInitParams({
                appId: '123456789',
                nativeInterface: CDV.FB,
                useCachedDialogs: false
            });

How could I fix it?

Thanks a lot

I would like to ask how to inject the $rootScope in the code below?

.config(function ($rootScope, $FBProvider) {
$FBProvider.setInitParams({
// This is my FB app id for plunker demo app
appId: '386469651480295'
});
})

The reason why I'm doing it this way cause I have a config file where the appId is stored.

Thanks

I suggest renaming $FB to something else. $ is reserved for Angular.

I am facing this issue in my application where facebook login is used.

ISSUE

Users need to press F5/refresh the page before facebook login prompt comes up. otherwise it doesn't come up and nothing happens on button click.

Here is the button tag for Facebook Login, which calls "Login()" method {angularJS is used}.

Login Using Facebook

app.controller('DemoCtrl', ['$scope', 'ezfb', '$window', 'PFactory', '$location', function ($scope, ezfb, $window, PFactory, $location) {

updateLoginStatus(updateApiMe);

$scope.login = function () {
ezfb.login(function (res) {
/**
* no manual $scope.$apply, I got that handled
*/
if (res.authResponse) {
updateLoginStatus(updateApiMe);
}
}, {scope: 'email,user_likes,user_status,user_about_me,user_birthday,user_hometown,user_location,user_relationships,user_relationship_details,user_work_history'});

$location.path('/view9');

};

$scope.logout = function () {
ezfb.logout(function () {
updateLoginStatus(updateApiMe);
});
};

$scope.share = function () {
ezfb.ui(
{
method: 'feed',
name: 'angular-easyfb API demo',
picture: 'http://plnkr.co/img/plunker.png',
link: 'http://plnkr.co/edit/qclqht?p=preview',
description: 'angular-easyfb is an AngularJS module wrapping Facebook SDK.' +
' Facebook integration in AngularJS made easy!' +
' Please try it and feel free to give feedbacks.'
},
null
);
};

var autoToJSON = ['loginStatus', 'apiMe'];
angular.forEach(autoToJSON, function (varName) {
$scope.$watch(varName, function (val) {
$scope[varName + 'JSON'] = JSON.stringify(val, null, 2);
}, true);
});

function updateLoginStatus(more) {
ezfb.getLoginStatus(function (res) {
$scope.loginStatus = res;
$scope.promotion = 'promotion';
(more || angular.noop)();
});
}

function updateApiMe() {
ezfb.api('/me', function (res) {
$scope.apiMe = res;
});
}

}]);

app.controller('DemoCtrl', ['$scope', 'ezfb', '$window', 'PFactory', '$location', function ($scope, ezfb, $window, PFactory, $location) {

updateLoginStatus(updateApiMe);

$scope.login = function () {
ezfb.login(function (res) {
/**
* no manual $scope.$apply, I got that handled
*/
if (res.authResponse) {
updateLoginStatus(updateApiMe);
}
}, {scope: 'email,user_likes,user_status,user_about_me,user_birthday,user_hometown,user_location,user_relationships,user_relationship_details,user_work_history'});

$location.path('/view9');

};

$scope.logout = function () {
ezfb.logout(function () {
updateLoginStatus(updateApiMe);
});
};

$scope.share = function () {
ezfb.ui(
{
method: 'feed',
name: 'angular-easyfb API demo',
picture: 'http://plnkr.co/img/plunker.png',
link: 'http://plnkr.co/edit/qclqht?p=preview',
description: 'angular-easyfb is an AngularJS module wrapping Facebook SDK.' +
' Facebook integration in AngularJS made easy!' +
' Please try it and feel free to give feedbacks.'
},
null
);
};

var autoToJSON = ['loginStatus', 'apiMe'];
angular.forEach(autoToJSON, function (varName) {
$scope.$watch(varName, function (val) {
$scope[varName + 'JSON'] = JSON.stringify(val, null, 2);
}, true);
});

function updateLoginStatus(more) {
ezfb.getLoginStatus(function (res) {
$scope.loginStatus = res;
$scope.promotion = 'promotion';
(more || angular.noop)();
});
}

function updateApiMe() {
ezfb.api('/me', function (res) {
$scope.apiMe = res;
});
}

}]);

I am using easyfb for my angularjs app but it work fine on page reload but when i am going to another page then this is not working but when i reload page it's working fine.

I want to use this with two different controller and this controller have their own html view page.

Hey There,

I've got angular-easyfb integrated into a basic app with a button that calls ezfb.login. I'm running on localhost and I'm getting the following error message on page load, and when the login button is clicked (in a popup).

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

I understand that this is returned by Facebook because I supposedly have the wrong Web URL but I can't seem to get it to work no matter what I set it to.

After trying localhost in the Facebook App settings with no luck I set example.com to forward to 127.0.0.1 in my hosts file and set my Facebook App domain to example.com and the web url to http://example.com/www/index.html

Still nothing no matter how much I tweak the url in the Facebook app settings.

Anyone else run into this?

I use AngularJs v1.2.26 and
'ui.router',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTagsInput',
'angular-flash.service',
'angular-flash.flash-alert-directive',
'ui.bootstrap',
'restangular',
'angularFileUpload',
'ngProgress',
'hc.marked',
'ngAnimate',

when i include EasyFB to my app:
"TypeError: Cannot read property 'ng339' of undefined".

Hi,
I would like to use this together with Parse.com facebook wrapper. Here is the documentation from parse how to initialize fb using their wrapper https://www.parse.com/docs/js_guide#fbusers
Instead of using FB.init() you will have to use theirs specific init method

window.fbAsyncInit = function() {
  Parse.FacebookUtils.init({
    appId      : 'YOUR_APP_ID', // Facebook App ID
    status     : true, // check login status
    cookie     : true, // enable cookies to allow Parse to access the session
    xfbml      : true  // parse XFBML
  });
};

Any idea how to do this integration?

Hello,, is there a way to track the facebook comment and like,, I want to add a custom event whenever the user like, shares a page in my website using the facebook socail plugins, as well as whenever the user comments using the facebook comment box.. any thoughts?

Hi,

Would be nice to to see this published as a NPM

https://docs.npmjs.com/cli/publish

Thanks in advance

easyfb is great, thanks!

feature request - have you considered integration with http://passportjs.org/ for handling User authentication?

otherwise how do you best recommend integrating an apps own User data based off the FB authentication that easyfb provides?