Using Facebook JS SDK With Ember.js
This is my first blog post and it will be as simple as that.
Using the ember-facebook library
Once you done it include it right after the actual Ember.js file, and before your application one, do it as you are used to.
Right now you can use it like this, on your application creation include the Facebook Mixin:
And it will graciously load the Facebook JS SDK for you, you don’t have to do anything else. Now you are able to use the
FB object to call Facebook’s API, and we assigned a FBUser to your App to reffer to the logged in user.
If you want a login button you can do something like this:
1 2 3 4 5 6 7 8 9 10 11 12
Note that we are checking for the existance of App.FBUser and then displaying the user names and picture together with a logout link if the user is present OR we show a custom view called FacebookView that basically creates a view of the Facebook SDK, you can check more on their documentation.
Basically we create a button with the xlarge size and ask for the scopes “email” and “offline_access” with the content “Connect”.
You can customize it however. You could either create a link to that, just bindint the action “login” to the target “FB” (as we did with logout).
Creating the ember-facebook library
The sources for the library are really really simple. I basically observes the “appId” attribute and when that changes it loads the Facebook JS SDK for that app.
Whenever the user changes (login, logout, app authorization, etc) the method
updateFBUser is called, updating the App.FBUser object on your application. You can do whatever you want with this binding, observe it, put it in the DOM, whatever.
We also have a App.FBloading binding which is a boolean that basically tells that we are waiting a facebook response.
You might want to show something based on this:
1 2 3
That’s all folks
I hope you like it, as it being my first post it might look retarded, but I hope it was helpful for someone.