Introduction to Facebook Javascript SDK (NEW)

7,025 views
6,809 views

Published on

New version of Introduction to Facebook Javascript SDK
More focus on implementation
Social Network and Applications - TA Session
LittleQ

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • Here is a simple tutorial explaining how to retrieve complete facebook friend list using Javascript SDK and display them as an image grid: http://bit.ly/zIet9k
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,025
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
124
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Introduction to Facebook Javascript SDK (NEW)

  1. 1. APIIntroduction to Facebook Javascript APISocial Network and Applications, 2011LittleQ, The Department of Computer Science, NCCU f Introduction to Facebook JS API
  2. 2. Requirement• HTML• Basic Javascript• Graph API• Optional: AJAX, jQuery, CSS... f Introduction to Facebook JS API
  3. 3. 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 f Introduction to Facebook JS API
  4. 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. 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. 6. Components• Core Methods• Event Handling• XFBML Methods• Data Access Utilities• Canvas Methods f Introduction to Facebook JS API
  7. 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. 8. FB.api()• make a API 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. 9. 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 f} Introduction to Facebook JS API
  10. 10. 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 f Introduction to Facebook JS API
  11. 11. Example - Get Posts 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. 12. Example - Send PostFB.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. 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. 14. More Topics• Event Handling• XFBML• FQL• Other SDKs for Facebook Graph API f Introduction to Facebook JS API
  15. 15. Tools• Javascript Console• Debug version of Facebook JS SDK• Test users• URL Linter f Introduction to Facebook JS API
  16. 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. 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. 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. 19. Q&A TimeThanks for your listening f Introduction to Facebook JS API

×