pc035860 / angular-easyfb Goto Github PK
View Code? Open in Web Editor NEWSuper easy AngularJS + Facebook JavaScript SDK.
License: MIT License
Super easy AngularJS + Facebook JavaScript SDK.
License: MIT License
Please update to the latest angular js.
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.
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.
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
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
How to use this module with yeoman server(Local development)?
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".
It doesn't seem to work on iOS 7, the popup goes away and nothing happens, is it normal ?
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
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?
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.
I suggest renaming $FB
to something else. $
is reserved for Angular.
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 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?
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
).
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}.
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;
});
}
}]);
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
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
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,
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
In v1.4.0 the directory structure was changed but this change was not applied in the bower.json
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'?
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?
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?)
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?
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,
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.
Hi,
Would be nice to to see this published as a NPM
https://docs.npmjs.com/cli/publish
Thanks in advance
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 :)
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 ?
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?
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
.config(function ($FBProvider) {
// Disable loading SDK
$FBProvider.setLoadSDK(false); // default: true
})
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 :)
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?
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
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
Hey there,
Out of the blue, my application using ezfb started to throw this error.
Thanks!
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?
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?
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,
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,
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
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
.
Does the library support the FB.AppEvents functions?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.