Your SlideShare is downloading. ×
Introduction to Facebook Javascript SDK (NEW)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Facebook Javascript SDK (NEW)

6,117
views

Published on

New version of Introduction to Facebook Javascript SDK …

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
6,117
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
121
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. APIIntroduction to Facebook Javascript APISocial Network and Applications, 2011LittleQ, The Department of Computer Science, NCCU f Introduction to Facebook JS API
  • 2. Requirement• HTML• Basic Javascript• Graph API• Optional: AJAX, jQuery, CSS... f Introduction to Facebook JS API
  • 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. 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 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. 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. 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. 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. 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. 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• Event Handling• 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 TimeThanks for your listening f Introduction to Facebook JS API

×