-
-
Save ruiwen/4722499 to your computer and use it in GitHub Desktop.
| // 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> |
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
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); });
you can use one service only https://gist.github.com/mazhekin/287b69fb947cf4587865
Thank you for your gist! This is very helpful!
Can you please explain what this part does?
Thank you