Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Wrapping and initialising the Facebook SDK with Angular JS

View fb-angular.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
// Facebook SDK
angular.module('facebook', [])
.directive('fb', ['$FB', function($FB) {
return {
restrict: "E",
replace: true,
template: "<div id='fb-root'></div>",
compile: function(tElem, tAttrs) {
return {
post: function(scope, iElem, iAttrs, controller) {
var fbAppId = iAttrs.appId || '';
 
var fb_params = {
appId: iAttrs.appId || "",
cookie: iAttrs.cookie || true,
status: iAttrs.status || true,
xfbml: iAttrs.xfbml || true
};
 
// Setup the post-load callback
window.fbAsyncInit = function() {
$FB._init(fb_params);
 
if('fbInit' in iAttrs) {
iAttrs.fbInit();
}
};
 
(function(d, s, id, fbAppId) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk', fbAppId));
}
}
}
};
}])
 
.factory('$FB', ['$rootScope', function($rootScope) {
 
var fbLoaded = false;
 
// Our own customisations
var _fb = {
loaded: fbLoaded,
_init: function(params) {
if(window.FB) {
// FIXME: Ugly hack to maintain both window.FB
// and our AngularJS-wrapped $FB with our customisations
angular.extend(window.FB, _fb);
angular.extend(_fb, window.FB);
 
// Set the flag
_fb.loaded = true;
 
// Initialise FB SDK
window.FB.init(params);
 
if(!$rootScope.$$phase) {
$rootScope.$apply();
}
}
}
}
 
return _fb;
}]);
View fb-angular.js
1 2 3 4 5 6 7 8
<!DOCTYPE html>
<html ng-app='app'>
<head></head>
<body>
<fb app-id='123123'></fb>
</body>
</html>

Thank you for your gist! This is very helpful!
Can you please explain what this part does?

                    // Setup the post-load callback
                    window.fbAsyncInit = function() {
                      $FB._init();
                        if('fbInit' in iAttrs) {
                            iAttrs.fbInit();
                        }
                    };

Thank you

Owner
ruiwen commented

Hi! Glad you found it useful!

window.fbAsyncInit is the function the FB SDK attempts to execute once it's successfully loaded. Here, I point window.fbAsyncInit to a wrapper function that executes some standard init code in $FB_init(), while giving users the option to pass their own initialisation function in the fb-init attribute of the widget, like so

<fb app-id="12312312" fb-init="someFunction()">

So if there was custom code you'd like to run after the FB SDK was loaded, you'd stick it in someFunction().

Great Work. You should consider making this a repository!

I also got a question: How would you add more services like one for example which would try to get the like status of a person?

Thanks ! , I made a fork for use FB.api after verify authentication to avoid the "token problem" and an example about how to use this on controllers , https://gist.github.com/devnieL/5846169

Thanks, this is fantastic! I suggest, as an alternative to the 'ugly hack', provide a wrapper around the 'api' function (and maybe others) that calls $apply for you, and perhaps $broadcast on $rootScope for the FB events like authResponseChange ... cool stuff!

This is a BIG ONE!!!!!!!!

great

Hi I want ti integrate Facebook Login integration in Angularjs
Ur above code for html and angularjs i have seen.....

What is the code for controller

Perfect, Solved my whole problem. Thanks man

deanq commented

Thank you for starting this. I have modified it for my purpose. I am using it for PhoneGap + Parse. Check it out here: https://gist.github.com/deanq/11274826

This is awesome! You saved me days of work! thanks a lot!

You can also watch the loaded flag from a Controller, this works fine.

scope.$watch( function(){ return $FB.loaded }, function(){ console.log('$FB.loaded', $FB.loaded); });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.