angular-easyfb

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

angular-easyfb

AngularJS + Facebook JavaScript SDK.

Features

  • 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

Demos

Getting started

Include the angular-easyfb module with AngularJS script in your page. html <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <script src="http://pc035860.github.io/angular-easyfb/angular-easyfb.min.js"></script>

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

Install with Bower

Usage

$FB service

Configuration

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); }); ```

$FB.init

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.

Changelog

See the changelog here.

Todo

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