New version of Introduction to Facebook Javascript SDK More focus on implementation Social Network and Applications - TA Session LittleQ

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. Requirement
• HTML
• Basic Javascript
• Graph API
• Optional: AJAX, jQuery, CSS...
f Introduction to
Facebook JS API

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

4. 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
zh_TW
en_US
f Introduction to
Facebook JS API

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

6. Components
• Core Methods
• Event Handling
• XFBML Methods
• Data Access Utilities
• Canvas Methods
f Introduction to
Facebook JS API

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

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

9. Example - Get Profile
FB.api(“/me”
,
function(response){
console.log(response.data);
}
response.data
=>
{
email:
"littleq0903@gmail.com",
first_name:
"Colin",
gender:
"male",
id:
"1681390745",
last_name:
"Su",
link:
"https://www.facebook.com/littleq0903",
locale:
"en_US",
name:
"Colin
Su",
timezone:
8,
updated_time:
"2011-­‐12-­‐16T09:43:06+0000",
username:
"littleq0903",
verified:
true
f
}
Introduction to
Facebook JS API

10. Example - Get Friends
FB.api(“/me/friends”
,
function(response){
console.log(response.data);
}
response.data
=>
[
{
id:
4
,
name:
“Mark
Zurgberg”},
{
id:
123
,
name:
“Spiderman”
},
{
id:
49973
,
name:
“Steve
Jobs”
},
{
id:
55688
,
name:
“Taiwan
Taxi”
},
...
]
response will be an array with your friends data
f Introduction to
Facebook JS API

11. Example - Get Posts
FB.api(“/me/feed”
,
{
limit:
10
}
,
function(response){
console.log(response.data);
}
);
Check the response.data by yourself!
f Introduction to
Facebook JS API

12. Example - Send Post
FB.api(“/me/feed”
,
“post”
,
{
message:
“Hello
World”
}
,
function
(response)
{
if(!response
||
response.error)
{
alert(“error”);
}
else
{
//success,
and
then
refresh
feed
}
}
);
f Introduction to
Facebook JS API

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

14. More Topics
• Event Handling
• XFBML
• FQL
• Other SDKs for Facebook Graph API
f Introduction to
Facebook JS API

15. Tools
• Javascript Console
• Debug version of Facebook JS SDK
• Test users
• URL Linter
f Introduction to
Facebook JS API

16. Examples
• js_new_ex.html - template file
• js_new_ex1.html - Get Friend List
• js_new_ex2.html - Custom Feed
• js_new_ex3.html - Using Dialog
• Download URL: http://goo.gl/3Fwml
f Introduction to
Facebook JS API

17. Temporary HTTP Server
• python
-­‐m
SimpleHTTPServer
5000
• http://127.0.0.1:5000/
• Facebook app allow only one domain
access at a time
f Introduction to
Facebook JS API

18. Resources
[1] Facebook Developers -
developers.facebook.com/docs/reference/
javascript/
[2] jQuery - jquery.com
[3] Javascript tutorial - www.study-area.org/coobila/
category_Javascript_u6559_u5B78.html
[4] Google - www.google.com
f Introduction to
Facebook JS API

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