Super easy AngularJS + Facebook JavaScript SDK.
8 people use it
Author: 811518?v=3 pc035860


AngularJS + Facebook JavaScript SDK.


  • Full Facebook JavaScript SDK support
  • Seemless FB SDK initialization(asynchronouslly load script and FB.init)
  • All SDK API callbacks are automatically applied with AngularJS context
  • Bundled a handy directive for parsing Facebook XFBML plugins dynamically
  • Support both callback and $q promise


Getting started

Include the angular-easyfb module with AngularJS script in your page. html <script src="//"></script> <script src=""></script>

Add ezfb to your app module's dependency. js angular.module('myApp', ['ezfb']);

Install with Bower


$FB service


getLocale / setLocale

Configure the locale of the original FB script file. Default locale is en_US.

getInitParams / setInitParams

Configure paramters for the original FB.init with $FBProvider.setInitParams. (See also $FB.init)

getInitFunction / setInitFunction

Customize the original FB.init function call with services injection support. The initialization parameters set in setInitParams are available via local injection $fbInitParams.

Customization example: ```js angular.module('myApp')

.config(function ($FBProvider) { var myInitFunction = function ($window, $rootScope, $fbInitParams) { $window.FB.init({ appId: '386469651480295' }); // or // $window.FB.init($fbInitParams);


$FBProvider.setInitFunction(myInitFunction); }); ```


In the case that you don't want to(or you can't) configure your FB.init parameters in configuration block, you may use $FB.init in run block. And any $FB API call will not run until $FB.init is called.

using $FB

This is the original FB wrapping service, all FB.* APIs are available through $FB.*.

No need to worry about FB script loading and Angular context applying at all.

Watch the demo to see it in action.

$q promise support

Support of $q promise create more possibility for $FB service.

Only the APIs with callback support returning promise.

Combine multiple api calls
Convenient view integration (deprecated in AngularJS 1.2.0-rc3)

Output: html <p>Robin Fan</p>

Watch the promise version api demo to see them in action.

ezfb-xfbml directive

Simply put XFBML contents inside the directive.

ezfb-xfbml paramater

The directive itself may work as an reload trigger, it will reload directive contents when ezfb-xfbml evaluates as true.

Moreover, it'll try to reset ezfb-xfbml value to false after reload triggered(if the value is fed through an scope variable rather than an expression).

onrender parameter

onrender expression will be evaluated every time the ezfb-xfbml target gets rendered(via FB event xfbml.render).

Watch the demo to see them in action.


See the changelog here.


  • Test
  • Better documentation?
comments powered by Disqus
This page was last updated over 4 years ago.