Slide 1

Slide 1 text

fIntroduction to Facebook JS API API Introduction to Facebook Javascript API Social Network and Applications, 2011 LittleQ, The department of Computer Science, NCCU Saturday, November 12, 11

Slide 2

Slide 2 text

fIntroduction to Facebook JS API Objectives • Learn the concepts of Facebook API • Learn how to use Facebook API with Javascript Saturday, November 12, 11

Slide 3

Slide 3 text

fIntroduction to Facebook JS API Core Topics • Facebook Developers website • Graph API • Facebook Javascript SDK • Resources Saturday, November 12, 11

Slide 4

Slide 4 text

fIntroduction to Facebook JS API Facebook Developers • Provide you online documentations • Forum for discussion • Management of your applications Saturday, November 12, 11

Slide 5

Slide 5 text

fIntroduction to Facebook JS API Where is it? Saturday, November 12, 11

Slide 6

Slide 6 text

fIntroduction to Facebook JS API Social Plugins • Like Button, Send Button, Login Button • Comments • Registration • Activity Feed, Live Stream Saturday, November 12, 11

Slide 7

Slide 7 text

fIntroduction to Facebook JS API Graph API • Facebook’s core • Social graph • Connections Application Graph API Facebook Database Access Token Request Data Aggregate Information Response Data Saturday, November 12, 11

Slide 8

Slide 8 text

fIntroduction to Facebook JS API Graph Model • Composed of objects and connections • Identify entities and relationships by id • Data will be stored with smallest spaces and keep being updated Saturday, November 12, 11

Slide 9

Slide 9 text

fIntroduction to Facebook JS API Object Model information from graph API without access token Saturday, November 12, 11

Slide 10

Slide 10 text

fIntroduction to Facebook JS API Graph Model information from graph API with access token Saturday, November 12, 11

Slide 11

Slide 11 text

fIntroduction to Facebook JS API 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 Saturday, November 12, 11

Slide 12

Slide 12 text

fIntroduction to Facebook JS API Connection Model Saturday, November 12, 11

Slide 13

Slide 13 text

fIntroduction to Facebook JS API Access to Graph • HTTP(S) Graph API • SDKs ‣ Javascript SDK ‣ iOS SDK ‣ Android SDK ‣ PHP SDK ‣ Python SDK Saturday, November 12, 11

Slide 14

Slide 14 text

fIntroduction to Facebook JS API HTTP(S) Graph API • RESTful HTTP request & response • Response data-type: JSON • Access URL: graph.facebook.com Saturday, November 12, 11

Slide 15

Slide 15 text

fIntroduction to Facebook JS API HTTP(S) Graph API • Request information of an object with id or username • id-or-username can be “me” with the access token http://graph.facebook.com/ Saturday, November 12, 11

Slide 16

Slide 16 text

fIntroduction to Facebook JS API HTTP(S) Graph API {      "id":  "1681390745",      "name":  "\u8607\u82d1\u9716",  //翻譯:蘇苑霖      "first_name":  "\u82d1\u9716",  //翻譯:苑霖      "last_name":  "\u8607",  //翻譯:蘇      "link":  "https://www.facebook.com/littleq0903",      "username":  "littleq0903",      "gender":  "male",      "locale":  "en_US" } http://graph.facebook.com/littleq0903 Result: Saturday, November 12, 11

Slide 17

Slide 17 text

fIntroduction to Facebook JS API HTTP(S) Graph API • Access token should be transferred as a HTTP GET variable • More information: developers.facebook.com/docs/ reference/api/ http://graph.facebook.com/littleq0903?access_token=... Saturday, November 12, 11

Slide 18

Slide 18 text

fIntroduction to Facebook JS API 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 Saturday, November 12, 11

Slide 19

Slide 19 text

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 Saturday, November 12, 11

Slide 20

Slide 20 text

fIntroduction to Facebook JS API Load the Script • You must specify a
element with id “fb-root” in your web pages • The location of the script
http://connect.facebook.net/          /all.js en_US Saturday, November 12, 11

Slide 21

Slide 21 text

fIntroduction to Facebook JS API Load the Script • You must specify a
element with id “fb-root” in your web pages • The location of the script
http://connect.facebook.net/          /all.js zh_TW Saturday, November 12, 11

Slide 22

Slide 22 text

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    }); Saturday, November 12, 11

Slide 23

Slide 23 text

fIntroduction to Facebook JS API Components • Core Methods • Event Handling • XFBML Methods • Data Access Utilities • Canvas Methods Saturday, November 12, 11

Slide 24

Slide 24 text

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 Saturday, November 12, 11

Slide 25

Slide 25 text

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); Saturday, November 12, 11

Slide 26

Slide 26 text

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. Saturday, November 12, 11

Slide 27

Slide 27 text

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!'      }  ); Saturday, November 12, 11

Slide 28

Slide 28 text

fIntroduction to Facebook JS API More Topics • Event Handling • XFBML • FQL • Other SDKs for Facebook Graph API Saturday, November 12, 11

Slide 29

Slide 29 text

fIntroduction to Facebook JS API Tools • Javascript Console • Debug version of Facebook JS SDK • Test users • URL Linter Saturday, November 12, 11

Slide 30

Slide 30 text

fIntroduction to Facebook JS API 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 Saturday, November 12, 11

Slide 31

Slide 31 text

fIntroduction to Facebook JS API Temporary HTTP Server • python  -­‐m  SimpleHTTPServer • http://127.0.0.1:8000/ • Facebook app allow only one domain access at a time Saturday, November 12, 11

Slide 32

Slide 32 text

fIntroduction to Facebook JS API 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 Saturday, November 12, 11

Slide 33

Slide 33 text

fIntroduction to Facebook JS API Q&A Time Thanks for your listening Saturday, November 12, 11

Slide 34

Slide 34 text

fIntroduction to Facebook JS API Q&A Time Thanks for your listening Saturday, November 12, 11