Introduction to Facebook Javascript SDK - Updated

New version slides for introducing Facebook javascript SDK

Transcript

1. fIntroduction to Facebook JS API API Introduction to Facebook Javascript API Social Network and Applications, 2011 LittleQ, The Department of Computer Science, NCCU Wednesday, December 21, 11
2. fIntroduction to Facebook JS API Requirement • HTML • Basic Javascript • Graph API • Optional: AJAX, jQuery, CSS... Wednesday, December 21, 11
3. fIntroduction to Facebook JS API Javascript SDK • Let you access all features of the Graph API or dialogs via Javascript • Authentication • Rendering the XFBML versions of Social Plugins • Most functions in the FB Javascript SDK require an app id Wednesday, December 21, 11
4. fIntroduction to Facebook JS API Load the Script • You must specify a <div> element with id “fb-root” in your web pages • The location of the script <div  id=”fb-­‐root”></div> http://connect.facebook.net/          /all.js en_US Wednesday, December 21, 11
5. fIntroduction to Facebook JS API Load the Script • You must specify a <div> element with id “fb-root” in your web pages • The location of the script <div  id=”fb-­‐root”></div> http://connect.facebook.net/          /all.js zh_TW Wednesday, December 21, 11
6. fIntroduction to Facebook JS API Initialization • Do this after the “fb-root” div element has been built FB.init({        appId    :  'YOUR  APP  ID',        status  :  true,  //  check  login  status        cookie  :  true,  //  enable  cookies        xfbml    :  true    //  parse  XFBML    }); Wednesday, December 21, 11
7. fIntroduction to Facebook JS API Components • Core Methods • Event Handling • XFBML Methods • Data Access Utilities • Canvas Methods Wednesday, December 21, 11
8. fIntroduction to Facebook JS API Core Methods • FB.api(): Access the Graph API • FB.getLoginStatus() • FB.getSession() • FB.init(): Method of initialization • FB.login(): Login method • FB.logout(): Logout method • FB.ui(): Method to call dialogs Wednesday, December 21, 11
9. fIntroduction to Facebook JS API FB.api() • make a API call to the Graph API • depending on the connect status and the permissions function  SuccessCall(res){ alert(res.name); } FB.api('/me',  SuccessCall); Wednesday, December 21, 11
10. fIntroduction to Facebook JS API FB.api() • make a API call to the Graph API • depending on the connect status and the permissions function  SuccessCall(res){ alert(res.name); } FB.api('/me',  SuccessCall); Call if success. Wednesday, December 21, 11
11. fIntroduction to Facebook JS API Example - Get Profile FB.api(“/me”  ,  function(response){ console.log(response.data); } response.data  =>  { email:  "littleq0903@gmail.com", first_name:  "Colin", gender:  "male", id:  "1681390745", last_name:  "Su", link:  "https://www.facebook.com/littleq0903", locale:  "en_US", name:  "Colin  Su", timezone:  8, updated_time:  "2011-­‐12-­‐16T09:43:06+0000", username:  "littleq0903", verified:  true } Wednesday, December 21, 11
12. fIntroduction to Facebook JS API Example - Get Friends FB.api(“/me/friends”  ,  function(response){ console.log(response.data); } response.data  =>  [ {  id:  4  ,  name:  “Mark  Zurgberg”}, {  id:  123  ,  name:  “Spiderman”  }, {  id:  49973  ,  name:  “Steve  Jobs”  }, {  id:  55688  ,  name:  “Taiwan  Taxi”  }, ... ] response will be an array with your friends data Wednesday, December 21, 11
13. fIntroduction to Facebook JS API Example - Get Posts FB.api(“/me/feed”  ,  {  limit:  10  }  , function(response){ console.log(response.data); } ); Check the response.data by yourself! Wednesday, December 21, 11
14. fIntroduction to Facebook JS API Example - Send Post FB.api(“/me/feed”  ,   “post”  ,   {  message:  “Hello  World”  }  , function  (response)  {   if(!response  ||  response.error)  { alert(“error”); }  else  { //success,  and  then  refresh  feed } } ); Wednesday, December 21, 11
15. fIntroduction to Facebook JS API FB.ui() • Triggering iframe dialogs or popups with Facebook FB.ui(      {          method:  'feed',          name:  'Facebook  Dialogs',          link:  'https://developers.facebook.com/docs/reference/dialogs/',          picture:  'http://fbrell.com/f8.jpg',          caption:  'Reference  Documentation',          description:  'Dialogs  provide  a  simple,  consistent  interface  for   applications  to  interface  with  users.',          message:  'Facebook  Dialogs  are  easy!'      }  ); Wednesday, December 21, 11
16. fIntroduction to Facebook JS API More Topics • Event Handling • XFBML • FQL • Other SDKs for Facebook Graph API Wednesday, December 21, 11
17. fIntroduction to Facebook JS API Tools • Javascript Console • Debug version of Facebook JS SDK • Test users • URL Linter Wednesday, December 21, 11
18. fIntroduction to Facebook JS API Examples • js_new_ex.html - template file • js_new_ex1.html - Get Friend List • js_new_ex2.html - Custom Feed • js_new_ex3.html - Using Dialog • Download URL: http://goo.gl/3Fwml Wednesday, December 21, 11
19. fIntroduction to Facebook JS API Temporary HTTP Server • python  -­‐m  SimpleHTTPServer  5000 • http://127.0.0.1:5000/ • Facebook app allow only one domain access at a time Wednesday, December 21, 11
20. fIntroduction to Facebook JS API Resources [1] Facebook Developers - developers.facebook.com/docs/reference/ javascript/ [2] jQuery - jquery.com [3] Javascript tutorial - www.study-area.org/coobila/ category_Javascript_u6559_u5B78.html [4] Google - www.google.com Wednesday, December 21, 11
21. fIntroduction to Facebook JS API Q&A Time Thanks for your listening Wednesday, December 21, 11
22. fIntroduction to Facebook JS API Q&A Time Thanks for your listening Wednesday, December 21, 11