TA Session, Facebook JS SDK introduction National Chengchi University, The department of Computer Science Social Network and Applications

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

5. Where is it?
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

9. Object Model
information from graph API
without access token
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

12. Connection Model
f Introduction to
Facebook JS API

13. Access to Graph
• HTTP(S) Graph API
• SDKs
‣ Javascript SDK
‣ iOS SDK
‣ Android SDK
‣ PHP SDK
‣ Python SDK
f Introduction to
Facebook JS API

14. HTTP(S) Graph API
• RESTful HTTP request & response
• Response data-type: JSON
• Access URL: graph.facebook.com
f Introduction to
Facebook JS API

15. 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

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

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