Introduction to Facebook Javascript SDK (NEW)

Introduction to Facebook Javascript SDK (NEW)

• 1.
  API Introduction to FacebookJavascript API Social Network and Applications, 2011 LittleQ, The Department of Computer Science, NCCU f Introduction to Facebook JS API
• 2.
  Requirement • HTML • BasicJavascript • Graph API • Optional: AJAX, jQuery, CSS... f Introduction to Facebook JS API
• 3.
  Javascript SDK • Letyou 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 f Introduction to Facebook JS API
• 4.
  Load the Script •You must specify a <div> element with id “fb-root” in your web pages <div  id=”fb-­‐root”></div> • The location of the script http://connect.facebook.net/          /all.js zh_TW en_US f Introduction to Facebook JS API
• 5.
  Initialization FB.init({        appId    :  'YOUR  APP  ID',        status  :  true,  //  check  login  status        cookie  :  true,  //  enable  cookies        xfbml    :  true    //  parse  XFBML    }); • Do this after the “fb-root” div element has been built f Introduction to Facebook JS API
• 6.
  Components • Core Methods •Event Handling • XFBML Methods • Data Access Utilities • Canvas Methods f Introduction to Facebook JS API
• 7.
  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 f Introduction to Facebook JS API
• 8.
  FB.api() • make aAPI call to the Graph API • depending on the connect status and the permissions Call if success. function  SuccessCall(res){ alert(res.name); } FB.api('/me',  SuccessCall); f Introduction to Facebook JS API
• 9.
  Example - GetProfile 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 f } Introduction to Facebook JS API
• 10.
  Example - GetFriends 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 f Introduction to Facebook JS API
• 11.
  Example - GetPosts FB.api(“/me/feed”  ,  {  limit:  10  }  , function(response){ console.log(response.data); } ); Check the response.data by yourself! f Introduction to Facebook JS API
• 12.
  Example - SendPost FB.api(“/me/feed”  ,   “post”  ,   {  message:  “Hello  World”  }  , function  (response)  {   if(!response  ||  response.error)  { alert(“error”); }  else  { //success,  and  then  refresh  feed } } ); f Introduction to Facebook JS API
• 13.
  FB.ui() 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!'      }  ); • Triggering iframe dialogs or popups with Facebook f Introduction to Facebook JS API
• 14.
  More Topics • EventHandling • XFBML • FQL • Other SDKs for Facebook Graph API f Introduction to Facebook JS API
• 15.
  Tools • Javascript Console •Debug version of Facebook JS SDK • Test users • URL Linter f Introduction to Facebook JS API
• 16.
  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 f Introduction to Facebook JS API
• 17.
  Temporary HTTP Server • python  -­‐m  SimpleHTTPServer  5000 • http://127.0.0.1:5000/ • Facebook app allow only one domain access at a time f Introduction to Facebook JS API
• 18.
  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 f Introduction to Facebook JS API
• 19.
  Q&A Time Thanks foryour listening f Introduction to Facebook JS API