Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Wrapping and initialising the Facebook SDK with Angular JS
// 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;
}]);
<!DOCTYPE html>
<html ng-app='app'>
<head></head>
<body>
<fb app-id='123123'></fb>
</body>
</html>
@valentinvieriu

This comment has been minimized.

Show comment Hide comment
@valentinvieriu

valentinvieriu Apr 21, 2013

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

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

@ruiwen

This comment has been minimized.

Show comment Hide comment
@ruiwen

ruiwen May 5, 2013

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().

Owner

ruiwen commented May 5, 2013

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().

@johannesjo

This comment has been minimized.

Show comment Hide comment
@johannesjo

johannesjo Jun 21, 2013

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?

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?

@devnieL

This comment has been minimized.

Show comment Hide comment
@devnieL

devnieL Jun 23, 2013

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

devnieL commented Jun 23, 2013

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

@blak3mill3r

This comment has been minimized.

Show comment Hide comment
@blak3mill3r

blak3mill3r Oct 16, 2013

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!

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!

@MrLugh

This comment has been minimized.

Show comment Hide comment
@MrLugh

MrLugh Nov 15, 2013

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

MrLugh commented Nov 15, 2013

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

@xtrasmal

This comment has been minimized.

Show comment Hide comment
@xtrasmal

xtrasmal Jan 19, 2014

great

great

@ranjitpillai

This comment has been minimized.

Show comment Hide comment
@ranjitpillai

ranjitpillai Feb 15, 2014

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

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

@theraaz

This comment has been minimized.

Show comment Hide comment
@theraaz

theraaz Apr 9, 2014

Perfect, Solved my whole problem. Thanks man

theraaz commented Apr 9, 2014

Perfect, Solved my whole problem. Thanks man

@deanq

This comment has been minimized.

Show comment Hide comment
@deanq

deanq Apr 25, 2014

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

deanq commented Apr 25, 2014

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

@gonzalodiaz

This comment has been minimized.

Show comment Hide comment
@gonzalodiaz

gonzalodiaz Jul 16, 2014

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

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

@fatlinesofcode

This comment has been minimized.

Show comment Hide comment
@fatlinesofcode

fatlinesofcode Aug 11, 2014

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

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

@mazhekin

This comment has been minimized.

Show comment Hide comment
@mazhekin

mazhekin Dec 3, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment