Introduction to Facebook Javascript SDK (NEW)

19
f Introduction to Facebook JS API API Introduction to Facebook Javascript API Social Network and Applications, 2011 LittleQ, The Department of Computer Science, NCCU

description

New version of Introduction to Facebook Javascript SDKMore focus on implementationSocial Network and Applications - TA SessionLittleQ

Transcript of Introduction to Facebook Javascript SDK (NEW)

Page 1: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

APIIntroduction to Facebook Javascript APISocial Network and Applications, 2011LittleQ, The Department of Computer Science, NCCU

Page 2: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Requirement

• HTML

• Basic Javascript

• Graph API

• Optional: AJAX, jQuery, CSS...

Page 3: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook 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

Page 5: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook 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    });

Page 6: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Components

• Core Methods

• Event Handling

• XFBML Methods

• Data Access Utilities

• Canvas Methods

Page 7: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook 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

Page 8: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook 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.

Page 9: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Example - Get ProfileFB.api(“/me”  ,  function(response){

console.log(response.data);}

response.data  =>  {email:  "[email protected]",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

}

Page 10: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Example - Get FriendsFB.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

Page 11: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Example - Get Posts

FB.api(“/me/feed”  ,  {  limit:  10  }  ,function(response){

console.log(response.data);}

);

Check the response.data by yourself!

Page 12: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Example - Send PostFB.api(“/me/feed”  ,  

“post”  ,  {  message:  “Hello  World”  }  ,function  (response)  {  

if(!response  ||  response.error)  {alert(“error”);

}  else  {//success,  and  then  refresh  feed

}}

);

Page 13: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook 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!'      }  );

Page 14: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

More Topics

• Event Handling

• XFBML

• FQL

• Other SDKs for Facebook Graph API

Page 15: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Tools

• Javascript Console

• Debug version of Facebook JS SDK

• Test users

• URL Linter

Page 16: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

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

Page 17: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Temporary HTTP Server

• python  -­‐m  SimpleHTTPServer  5000

• http://127.0.0.1:5000/

• Facebook app allow only one domain access at a time

Page 18: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

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

Page 19: Introduction to Facebook Javascript SDK (NEW)

f Introduction toFacebook JS API

Q&A TimeThanks for your listening