Last active
July 5, 2017 10:40
-
-
Save ruiwen/4722499 to your computer and use it in GitHub Desktop.
Wrapping and initialising the Facebook SDK with Angular JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| }]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app='app'> | |
| <head></head> | |
| <body> | |
| <fb app-id='123123'></fb> | |
| </body> | |
| </html> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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