Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Introduction to Facebook Javascript SDK
1. API
Introduction to Facebook Javascript API
Social Network and Applications, 2011
LittleQ, The department of Computer Science, NCCU
f Introduction to
Facebook JS API
2. Objectives
• Learn the concepts of Facebook API
• Learn how to use Facebook API with
Javascript
f Introduction to
Facebook JS API
3. Core Topics
• Facebook Developers website
• Graph API
• Facebook Javascript SDK
• Resources
f Introduction to
Facebook JS API
4. Facebook Developers
• Provide you online documentations
• Forum for discussion
• Management of your applications
f Introduction to
Facebook JS API
6. Social Plugins
• Like Button, Send Button, Login Button
• Comments
• Registration
• Activity Feed, Live Stream
f
Introduction to
Facebook JS API
7. 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
8. 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
10. Graph Model
information from graph API
with access token
f Introduction to
Facebook JS API
11. 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
16. HTTP(S) Graph API
http://graph.facebook.com/littleq0903
Result:
{
"id":
"1681390745",
"name":
"u8607u82d1u9716",
//翻譯:蘇苑霖
"first_name":
"u82d1u9716",
//翻譯:苑霖
"last_name":
"u8607",
//翻譯:蘇
"link":
"https://www.facebook.com/littleq0903",
"username":
"littleq0903",
"gender":
"male",
"locale":
"en_US"
}
f Introduction to
Facebook JS API
17. 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
18. 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
19. 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
20. 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
21. 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
22. Components
• Core Methods
• Event Handling
• XFBML Methods
• Data Access Utilities
• Canvas Methods
f Introduction to
Facebook JS API
23. 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
24. 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
25. 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
26. More Topics
• Event Handling
• XFBML
• FQL
• Other SDKs for Facebook Graph API
f Introduction to
Facebook JS API
27. Tools
• Javascript Console
• Debug version of Facebook JS SDK
• Test users
• URL Linter
f Introduction to
Facebook JS API
28. 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
29. 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
30. 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