Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Introduction to Facebook Javascript SDK (NEW)
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