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

Objectives

• Learn the concepts of Facebook API

• Learn how to use Facebook API with Javascript

f Introduction toFacebook JS API

Core Topics

• Facebook Developers website

• Graph API

• Facebook Javascript SDK

• Resources

f Introduction toFacebook JS API

Facebook Developers

• Provide you online documentations

• Forum for discussion

• Management of your applications

f Introduction toFacebook JS API

Where is it?

f Introduction toFacebook JS API

Social Plugins

• Like Button, Send Button, Login Button

• Comments

• Registration

• Activity Feed, Live Stream

f Introduction toFacebook JS API

Graph API

• Facebook’s core

• Social graph

• Connections

Application Graph API Facebook Database

Access Token Request Data

Aggregate InformationResponse Data

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

f Introduction toFacebook JS API

Object Modelinformation from graph API

without access token

f Introduction toFacebook JS API

Graph Modelinformation from graph API

with access token

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

f Introduction toFacebook JS API

Connection Model

f Introduction toFacebook JS API

Access to Graph

• HTTP(S) Graph API

• SDKs‣ Javascript SDK

‣ iOS SDK

‣ Android SDK

‣ PHP SDK

‣ Python SDK

f Introduction toFacebook JS API

HTTP(S) Graph API

• RESTful HTTP request & response

• Response data-type: JSON

• Access URL: graph.facebook.com

f Introduction toFacebook 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/<id-­‐or-­‐username>

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

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

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

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

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_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 toFacebook JS API

Temporary HTTP Server

• python  -­‐m  SimpleHTTPServer

• http://127.0.0.1:8000/

• Facebook app allow only one domain access at a time

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

f Introduction toFacebook JS API

Q&A TimeThanks for your listening