Facebook SDK

[mirko...@gmail.com]

I want to populate UI with users friends from the SDK. However Angular calls out my controller before SDK has had a chance to start up and I end up with splendid FB not defined.

How would I launch populate controller after Facebook SDK has loaded?

<div id="fb-root"></div>

<script>

 window.fbAsyncInit = function() {

   FB.init({

     appId      : '##' // App ID

     channelUrl : '//mathology.impereality.com/public/channel.html', // Channel File

     status     : true, // check login status

     cookie     : true // enable cookies to allow the server to access the session

   });

   // Additional initialization code here

                   POPULATE UI HERE

 };

 // Load the SDK Asynchronously

 (function(d){

    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];

    if (d.getElementById(id)) {return;}

    js = d.createElement('script'); js.id = id; js.async = true;

    js.src = "//connect.facebook.net/en_US/all.js";

    ref.parentNode.insertBefore(js, ref);

  }(document));

</script>

[mirko...@gmail.com]

I actually swapped to synchronous load, but we still miss a piece of the puzzle. Since we would like to bootstrap the application with some data from Facebook, it only makes sense to start it After "auth.login" event. I guess manual bootstrap will help with that.

On Friday, July 20, 2012 2:03:01 PM UTC+3, Christian Schmitz wrote:

After some moments of deep concentration I came up with something like this.

class FacebookService

constructor : (@$rootScope, @$log) ->

return

broadcast : (name, response) ->

@$rootScope.$broadcast 'facebookEvent',

name : name

response : response

class FacebookSdkDirective

constructor : (@facebookService, @$window) ->

@restrict = 'E'

@template = '<div id="fb-root"></div>'

@replace = true

@$window.fbAsyncInit = =>

FB.Event.subscribe 'auth.login', (response) =>

@facebookService.broadcast('auth.login', response)

FB.init

appId  : '...' # App ID

status : true  # check login status

cookie : true  # enable cookies to allow the server to access the session

xfbml  : true  # parse XFBML

Afterwards you are able to access the facebook events through $scope:

$scope.$on 'facebookEvent', (e, data) ->

   ...

Best regards

Christian

[zlys...@gmail.com]

Hi Christian,

Quite an old thread I know, but I was wondering if you'd be willing to shed a bit more light on this code for me?  I'm just beginning to learn AngularJS in the hopes of using it for a Facebook App (I'm maybe 10-15 hours deep), and I haven't even seen any syntax like in your code example: i.e. `class` keywords and `@` signs, etc.. (this is still JS right?)  Sorry if I'm being dense ;-)

[Joshua Miller]

It's actually CoffeeScript, a language that compiles into JavaScript: coffeescript.org. It's not necessary for any of this, but a lot of people like those additional constructs they feel are missing from JavaScript.

Josh

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.