Professional Documents
Culture Documents
f Introduction to
Facebook JS API
Objectives
f Introduction to
Facebook JS API
Core Topics
f Introduction to
Facebook JS API
Facebook Developers
f Introduction to
Facebook JS API
Where is it?
f Introduction to
Facebook JS API
Social Plugins
• Facebook’s core
• Social graph
• Connections
f Introduction to
Facebook JS API
Graph Model
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
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
f Introduction to
Facebook JS API
HTTP(S) Graph API
http://graph.facebook.com/<id-‐or-‐username>
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
• 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
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>
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
});
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()
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!'
}
);
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
f Introduction to
Facebook JS API
Temporary HTTP Server
• 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