Angular service to handle facebook
Installation
- Download the package, you can download the zip file, or use bower:
bower install ng-facebook - Modify your application to include
ngFacebookin your application dependencies - Configure the ngFacebook module using the configuration steps outlined in the section titled "Configuration" below.
- Load the Facebook SDK for javascript, BUT DO NOT call
FB.initor setwindow.fbAsyncInit. These steps are automatically done by the ngFacebook module.
Example:
angular.module('<your-app>', ['ngFacebook']) .config( function( $facebookProvider ) { $facebookProvider.setAppId('<your-facebook-app-id>'); }) .run( function( $rootScope ) { // Cut and paste the "Load the SDK" code from the facebook javascript sdk page. // Load the facebook SDK asynchronously (function(){ ... }()); }) ; var DemoCtrl = function ($scope, $facebook) { ... function refresh() { $facebook.api("/me").then( function(response) { $scope.welcomeMsg = "Welcome " + response.name; }, function(err) { $scope.welcomeMsg = "Please log in"; }); } };
For more details check out this plunker which uses ngFacebook.
Configuration
You must configure your facebook application ID in your app, for example:
app.config(function(FacebookProvider) {
$facebookProvider.setAppId(11111111111);
});
Additional configurations
You can also configure the next properties.
Use set and get. For example $facebookProvider.setAppId(11111)
-
permissions(<string>)for permissions which required by your app.Example:
$facebookProvider.setPermissions("email,user_likes"); -
customInit(<object>)custom initial p.Example to set:
$facebookProvider.setCustomInit({ channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html' });
Using
Methods
-
$facebook.config(property)- Return the config property. -
$facebook.getAuthResponse()- Return theAuthResponse(assuming you already connected) -
$facebook.getLoginStatus()- Return promise of the result. -
$facebook.login()- Logged in to your app by facebook. Return promise of the result. -
$facebook.logout()- Logged out from facebook. Return promise of the result. -
$facebook.ui(params)- Do UI action(see facebook sdk docs). Return promise of the result. -
$facebook.api(args...)- Do API action(see facebook sdk docs). Return promise of the result. -
$facebook.cachedApi(args...)- Do API action(see above), but the result will cached. Return promise of the result.Example:
app.controller('indexCtrl', function($scope, $facebook) { $scope.user=$facebook.cachedApi('/me'); });
Events
The service will broadcast the facebook sdk events with the prefix fb..
In return you will get the next arguments to your $on handler: event,response,FB (FB is the facebook native js sdk).
fb.auth.loginfb.auth.logoutfb.auth.promptfb.auth.sessionChangefb.auth.statusChangefb.auth.authResponseChangefb.xfbml.renderfb.edge.createfb.edge.removefb.comment.createfb.comment.removefb.message.send
For additional information about the events see the sdk docs.
License
This project is released over MIT license