You are on page 1of 31

API

Introduction to Facebook Javascript API


Social Network and Applications, 2011
LittleQ, The department of Computer Science, NCCU

f Introduction to
Facebook JS API
Objectives

• Learn the concepts of Facebook API


• Learn how to use Facebook API with
Javascript

f Introduction to
Facebook JS API
Core Topics

• Facebook Developers website


• Graph API
• Facebook Javascript SDK
• Resources

f Introduction to
Facebook JS API
Facebook Developers

• Provide you online documentations


• Forum for discussion
• Management of your applications

f Introduction to
Facebook JS API
Where is it?

f Introduction to
Facebook JS API
Social Plugins

• Like Button, Send Button, Login Button


• Comments
• Registration
• Activity Feed, Live Stream
f
Introduction to
Facebook JS API
Graph API
Response Data Aggregate Information

Access Token Request Data

Application Graph API Facebook Database

• Facebook’s core
• Social graph
• Connections
f Introduction 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

f Introduction to
Facebook JS API
Object Model
information from graph API
without access token

f Introduction to
Facebook JS API
Graph Model
information from graph API
with access token

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

f Introduction to
Facebook JS API
Connection Model

f Introduction to
Facebook JS API
Access to Graph
• HTTP(S) Graph API
• SDKs
‣ Javascript SDK

‣ iOS SDK

‣ Android SDK

‣ PHP SDK

‣ Python SDK

f Introduction to
Facebook JS API
HTTP(S) Graph API

• RESTful HTTP request & response


• Response data-type: JSON
• Access URL: graph.facebook.com

f Introduction to
Facebook JS API
HTTP(S) Graph API

http://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
HTTP(S) Graph API
http://graph.facebook.com/littleq0903

Result:
{
     "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"
}

f Introduction to
Facebook JS API
HTTP(S) Graph API

• Access token should be transferred as


a HTTP GET variable
http://graph.facebook.com/littleq0903?access_token=...

• More information:
developers.facebook.com/docs/
reference/api/

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

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

f Introduction to
Facebook JS API
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
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
Components

• Core Methods
• Event Handling
• XFBML Methods
• Data Access Utilities
• Canvas Methods

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

f Introduction to
Facebook JS API
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
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
More Topics

• Event Handling
• XFBML
• FQL
• Other SDKs for Facebook Graph API

f Introduction to
Facebook JS API
Tools

• Javascript Console
• Debug version of Facebook JS SDK
• Test users
• URL Linter

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

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

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

f Introduction to
Facebook JS API
Q&A Time
Thanks for your listening

f Introduction to
Facebook JS API

You might also like