+
+ ember-cli-facebook-js-sdk
+ A simple Facebook SDK for Javascript addon for your Ember CLI app
+
+ by Matteo Centenaro / @bugant
+
+
+
+
+ Facebook SDK for JavaScript
+ 
+
+
+
+ Basic setup
+
+ Add the below code just after the opening
+
+
+
+
+
+
+
+ How to integrate the SDK in your Ember.js app?
+
+
+ - Add the setup code in your
index.html file
+ - Use the SDK as described in the Facebook documentation
+
+
+
+
Problems?
+
+ - DRY
+ - Callback style code
+
+
+
+
+ ember-cli-facebook-js-sdk
+
+ - talk to the Facebook API using Promises
+ - use the same API as the original SDK
+
+
+
+
+ Supported methods
+
+ - Core Methods
+
+
+ - Facebook Login Methods
+
+ - getLoginStatus
+ - login
+ - logout
+ - getAuthResponse
+
+
+
+
+
+ Installation
+
+
+
+npm install ember-cli-facebook-js-sdk --save-dev
+
+
+
+
+
+ Usage: init
+
+
+ Define a new initializer for your app:
+
+
+ app/initializes/fb.js
+
+import FB from 'ember-cli-facebook-js-sdk/fb';
+
+export default {
+ name: 'fb',
+ initialize: function() {
+ return FB.init({
+ appId: 'YOUR APP ID',
+ version: 'v2.3',
+ xfbml: true
+ });
+ }
+};
+
+
+
+
+
+ Example: add the Facebook Login button
+
+ app/templates/index.hbs
+
+
+
+
+
+
+ TODO: Handle events in an "Ember way", any idea?
+
+
+
+ Example: Share on Facebook
+
+ app/routes/index.jsimport Ember from 'ember';
+import FB from 'ember-cli-facebook-js-sdk/fb';
+
+export default Ember.Route.extend({
+ actions: {
+ shareOnFacebook: function() {
+ FB.ui({method: 'share',
+ href: '...'}).then(function(response) {
+ console.log('Share done!', response);
+ }).catch(function(reason) {
+ console.log('Share failed', reason);
+ });
+ }
+ }
+})
+
+ app/templates/index.hbs<button {{action 'shareOnFacebook'}}>Share on Facebook</button>
+
+
+
+ Example: Say Hello!
+
+ app/routes/index.jsimport Ember from 'ember';
+import FB from 'ember-cli-facebook-js-sdk/fb';
+
+export default Ember.Route.extend({
+ actions: {
+ sayHello: function() {
+ FB.api('/me').then(function(response) {
+ console.log(response);
+ alert('Hello ' + response.first_name);
+ }).catch(function(reason) {
+ console.error('Cannot get user data', reason);
+ });
+ }
+ }
+})
+
+ app/templates/index.hbs<button {{action 'sayHello'}}>Hi there!</button>
+
+
+
+