ember-cli-facebook-js-sdk

Introduction to ember-cli-facebook-js-sdk, a simple addon for the Facebook SDK for Javascript to use in your Ember-cli app.

Talk done at the first Ember Treviso Meetup.

Transcript

1. EMBER-CLI-FACEBOOK- JS-SDK A SIMPLE FACEBOOK SDK FOR JAVASCRIPT ADDON FOR YOUR EMBER CLI APP by Matteo Centenaro / @bugant
2. FACEBOOK SDK FOR JAVASCRIPT
3. BASIC SETUP Add the below code just after the opening tag. < s c r i p t > < / s c r i p t > w i n d o w . f b A s y n c I n i t = f u n c t i o n ( ) { F B . i n i t ( { a p p I d : ' y o u r - a p p - i d ' , x f b m l : t r u e , v e r s i o n : ' v 2 . 3 ' } ) ; } ; ( f u n c t i o n ( d , s , i d ) { v a r j s , f j s = d . g e t E l e m e n t s B y T a g N a m e ( s ) [ 0 ] ; i f ( d . g e t E l e m e n t B y I d ( i d ) ) { r e t u r n ; } j s = d . c r e a t e E l e m e n t ( s ) ; j s . i d = i d ; j s . s r c = " / / c o n n e c t . f a c e b o o k . n e t / e n _ U S / s d k . j s " ; f j s . p a r e n t N o d e . i n s e r t B e f o r e ( j s , f j s ) ; } ( d o c u m e n t , ' s c r i p t ' , ' f a c e b o o k - j s s d k ' ) ) ;
4. HOW TO INTEGRATE THE SDK IN YOUR EMBER.JS APP? Add the setup code in your i n d e x . h t m l file Use the SDK as described in the Facebook documentation PROBLEMS? DRY Callback style code
5. EMBER-CLI-FACEBOOK-JS-SDK talk to the Facebook API using Promises use the same API as the original SDK
6. SUPPORTED METHODS Core Methods init api ui Facebook Login Methods getLoginStatus login logout getAuthResponse
7. INSTALLATION n p m i n s t a l l e m b e r - c l i - f a c e b o o k - j s - s d k - - s a v e - d e v
8. USAGE: INIT Define a new initializer for your app: a p p / i n i t i a l i z e s / f b . j s i m p o r t F B f r o m ' e m b e r - c l i - f a c e b o o k - j s - s d k / f b ' ; e x p o r t d e f a u l t { n a m e : ' f b ' , i n i t i a l i z e : f u n c t i o n ( ) { r e t u r n F B . i n i t ( { a p p I d : ' Y O U R A P P I D ' , v e r s i o n : ' v 2 . 3 ' , x f b m l : t r u e } ) ; } } ;
9. EXAMPLE: ADD THE FACEBOOK LOGIN BUTTON a p p / t e m p l a t e s / i n d e x . h b s < f b : l o g i n - b u t t o n s c o p e = " p u b l i c _ p r o f i l e , e m a i l " > < / f b : l o g i n - b u t t o n > TODO: Handle events in an "Ember way", any idea?
10. EXAMPLE: SHARE ON FACEBOOK a p p / r o u t e s / i n d e x . j s i m p o r t E m b e r f r o m ' e m b e r ' ; i m p o r t F B f r o m ' e m b e r - c l i - f a c e b o o k - j s - s d k / f b ' ; e x p o r t d e f a u l t E m b e r . R o u t e . e x t e n d ( { a c t i o n s : { s h a r e O n F a c e b o o k : f u n c t i o n ( ) { F B . u i ( { m e t h o d : ' s h a r e ' , h r e f : ' . . . ' } ) . t h e n ( f u n c t i o n ( r e s p o n s e ) { c o n s o l e . l o g ( ' S h a r e d o n e ! ' , r e s p o n s e ) ; } ) . c a t c h ( f u n c t i o n ( r e a s o n ) { c o n s o l e . l o g ( ' S h a r e f a i l e d ' , r e a s o n ) ; } ) ; } } } ) a p p / t e m p l a t e s / i n d e x . h b s < b u t t o n { { a c t i o n ' s h a r e O n F a c e b o o k ' } } > S h a r e o n F a c e b o o k < / b u t t o n >
11. EXAMPLE: SAY HELLO! a p p / r o u t e s / i n d e x . j s i m p o r t E m b e r f r o m ' e m b e r ' ; i m p o r t F B f r o m ' e m b e r - c l i - f a c e b o o k - j s - s d k / f b ' ; e x p o r t d e f a u l t E m b e r . R o u t e . e x t e n d ( { a c t i o n s : { s a y H e l l o : f u n c t i o n ( ) { F B . a p i ( ' / m e ' ) . t h e n ( f u n c t i o n ( r e s p o n s e ) { c o n s o l e . l o g ( r e s p o n s e ) ; a l e r t ( ' H e l l o ' + r e s p o n s e . f i r s t _ n a m e ) ; } ) . c a t c h ( f u n c t i o n ( r e a s o n ) { c o n s o l e . e r r o r ( ' C a n n o t g e t u s e r d a t a ' , r e a s o n ) ; } ) ; } } } ) a p p / t e m p l a t e s / i n d e x . h b s < b u t t o n { { a c t i o n ' s a y H e l l o ' } } > H i t h e r e ! < / b u t t o n >
12. THANK YOU! Contacts: && https://github.com/pitchtarget/ember-cli-facebook-js-sdk @bugant https://github.com/bugant www.pitchtarget.com http://hackatron.org/ Ember.js Treviso Meetup