Last Updated: February 25, 2016
·
2.974K
· ruiwen

AngularJS widget and service for Facebook SDK

It's pretty annoying trying to integrate the Facebook SDK into an AngularJS app primarily because most of the Facebook functions are exposed through a global FB object, and AngularJS doesn't like naked global objects (preferring instead to perform app-wide functions via services).

In this gist, we wrap the instantiation of the Facebook SDK into our custom AngularJS directive, and also expose a $FB service that can be injected into other parts of the AngularJS app.

Usage of the custom directive is as follows

<!-- Where you would normally have <div id="fb-root"></div> -->
<fb app-id="1234567">

The additional service exposes $FB, with the standard Facebook SDK functions, so you can call it from within your other controllers/directives/services in an AngularJS fashion, eg.

angular.module('facestagram')

    .controller('UserController', [
        '$scope',
        '$FB',
        function($scope, $FB) {    
            $scope.checkLogin = function(callback) {
                $FB.getLoginStatus(callback);
            }
        }
    }

1 Response
Add your response

I think getLoginStatus will be undefined if facebook SDK hasn't loaded yet.

over 1 year ago ·