Your SlideShare is downloading. ×
Introduction to Facebook Javascript SDK
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

6,867

Published on

TA Session, Facebook JS SDK introduction …

TA Session, Facebook JS SDK introduction
National Chengchi University,
The department of Computer Science
Social Network and Applications

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • this comment box may manage to display my Facebook username but i wish to do something similar and it has been very hard for me
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,867
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
96
Comments
1
Likes
3
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. Objectives• Learn the concepts of Facebook API• Learn how to use Facebook API with Javascript f Introduction to Facebook JS API
  • 3. Core Topics• Facebook Developers website• Graph API• Facebook Javascript SDK• Resources f Introduction to Facebook JS API
  • 4. Facebook Developers• Provide you online documentations• Forum for discussion• Management of your applications f Introduction to Facebook JS API
  • 5. Where is it? f Introduction to Facebook JS API
  • 6. Social Plugins• Like Button, Send Button, Login Button• Comments• Registration• Activity Feed, Live Stream f Introduction to Facebook JS API
  • 7. Graph API Response Data Aggregate Information Access Token Request DataApplication Graph API Facebook Database • Facebook’s core • Social graph • Connections f Introduction to Facebook JS API
  • 8. Graph Model• Composed of objects and connections• Identify entities and relationships by id• Data will be stored with smallest spaces and keep being updated f Introduction to Facebook JS API
  • 9. Object Modelinformation from graph API without access token f Introduction to Facebook JS API
  • 10. Graph Model information from graph API with access token f Introduction to Facebook JS API
  • 11. Connection Model• All of the object in the Facebook social graph are connected to each other via connections• Objects are just like entities while connections are like relationship• For example, users, pages and groups are objects and likes, friends and feeds are connections f Introduction to Facebook JS API
  • 12. Connection Model f Introduction to Facebook JS API
  • 13. Access to Graph• HTTP(S) Graph API• SDKs ‣ Javascript SDK ‣ iOS SDK ‣ Android SDK ‣ PHP SDK ‣ Python SDK f Introduction to Facebook JS API
  • 14. HTTP(S) Graph API• RESTful HTTP request & response• Response data-type: JSON• Access URL: graph.facebook.com f Introduction to Facebook JS API
  • 15. HTTP(S) Graph APIhttp://graph.facebook.com/<id-­‐or-­‐username>• Request information of an object with id or username• id-or-username can be “me” with the access token f Introduction to Facebook JS API
  • 16. HTTP(S) Graph API http://graph.facebook.com/littleq0903Result: {      "id":  "1681390745",      "name":  "u8607u82d1u9716",  //翻譯:蘇苑霖      "first_name":  "u82d1u9716",  //翻譯:苑霖      "last_name":  "u8607",  //翻譯:蘇      "link":  "https://www.facebook.com/littleq0903",      "username":  "littleq0903",      "gender":  "male",      "locale":  "en_US" } f Introduction to Facebook JS API
  • 17. HTTP(S) Graph API• Access token should be transferred as a HTTP GET variablehttp://graph.facebook.com/littleq0903?access_token=...• More information: developers.facebook.com/docs/ reference/api/ f Introduction to Facebook JS API
  • 18. Access Token• A long string to denote the authentication of users, which request facebook information with your application• The information behind the access token ‣ user id ‣ app id ‣ expired time ‣ secret f Introduction to Facebook JS API
  • 19. 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
  • 20. 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 en_US zh_TW f Introduction to Facebook JS API
  • 21. 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
  • 22. Components• Core Methods• Event Handling• XFBML Methods• Data Access Utilities• Canvas Methods f Introduction to Facebook JS API
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. More Topics• Event Handling• XFBML• FQL• Other SDKs for Facebook Graph API f Introduction to Facebook JS API
  • 27. Tools• Javascript Console• Debug version of Facebook JS SDK• Test users• URL Linter f Introduction to Facebook JS API
  • 28. Examples• js_ex1.html - Social Plugins• js_ex2.html - FB.api()• js_ex3.html - FB.api()• js_ex4.html - FB.ui() & Dialogs• Download URL: http://goo.gl/3YnnK f Introduction to Facebook JS API
  • 29. Temporary HTTP Server • python  -­‐m  SimpleHTTPServer • http://127.0.0.1:8000/ • Facebook app allow only one domain access at a time f Introduction to Facebook JS API
  • 30. Resources[1] Facebook Developers[2] jQuery - http://jquery.com[3] Javascript tutorial - http://www.study-area.org/coobila/category_Javascript_u6559_u5B78.html[4] Google - http://www.google.com f Introduction to Facebook JS API
  • 31. Q&A TimeThanks for your listening f Introduction to Facebook JS API

×