ng-facebook

Angular Facebook

Angular service to handle facebook

Installation

• Download the package:
  • download using npm: npm install ng-facebook
  • download using the zip file
  • download using bower: bower install ng-facebook
• Modify your application to include ngFacebook in 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.init or set window.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 following properties. Both set and get methods are available for each property.

• permissions(<string>) - permissions required by your app.

  Example:

   $facebookProvider.setPermissions("email,user_likes");
  

• customInit(<object>) - the parameters to pass to FB.init(). The 'appId' parameter is automatically specified using the value passed to '$facebookProvider.setAppId()', however the remaining parameters are configurable.

  Example to set:

   $facebookProvider.setCustomInit({
     channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
     xfbml      : true
   });
   
  

• version(<string>) - specify the version of the api (v1.0 by default).

  Example to set:

   $facebookProvider.setVersion("v2.2");
  

Using

Methods

• $facebook.config(property) - Return the config property.

• $facebook.getAuthResponse() - Return the AuthResponse(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.

• $facebook.setVersion(version) - Set another SDK version

• $facebook.getVersion() - Get current SDK version 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.login
• fb.auth.logout
• fb.auth.prompt
• fb.auth.sessionChange
• fb.auth.statusChange
• fb.auth.authResponseChange
• fb.xfbml.render
• fb.edge.create
• fb.edge.remove
• fb.comment.create
• fb.comment.remove
• fb.message.send

For additional information about the events see the sdk docs.

License

This project is released over MIT license

Sponsors

Thanks to our sponsors for this project:

• GoDisco
• JetBrains - for providing the great IDE PhpStorm

Authors

• Almog Baku - by GoDisco
• Amir Valiani
• Tal Gleichger - by GoDisco