f Introduction toFacebook JS API

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

f Introduction toFacebook JS API

Requirement

• HTML

• Basic Javascript

• Graph API

• Optional: AJAX, jQuery, CSS...

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

f Introduction toFacebook JS API

Load the Script

• You must specify a <div> element with id “fb-root” in your web pages

• The location of the script

<div  id=”fb-­‐root”></div>

http://connect.facebook.net/          /all.jsen_USzh_TW

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    });

f Introduction toFacebook JS API

Components

• Core Methods

• Event Handling

• XFBML Methods

• Data Access Utilities

• Canvas Methods

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

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.

f Introduction toFacebook JS API

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

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!

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

}}

);

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

f Introduction toFacebook JS API

More Topics

• Event Handling

• XFBML

• FQL

• Other SDKs for Facebook Graph API

f Introduction toFacebook JS API

Tools

• Javascript Console

• Debug version of Facebook JS SDK

• Test users

• URL Linter

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

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

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

f Introduction toFacebook JS API

Q&A TimeThanks for your listening