Date post: | 17-May-2015 |
Category: |
Technology |
Upload: | colin-su |
View: | 6,918 times |
Download: | 4 times |
f Introduction toFacebook JS API
APIIntroduction to Facebook Javascript APISocial Network and Applications, 2011LittleQ, The department of Computer Science, NCCU
f Introduction toFacebook JS API
Objectives
• Learn the concepts of Facebook API
• Learn how to use Facebook API with Javascript
f Introduction toFacebook JS API
Core Topics
• Facebook Developers website
• Graph API
• Facebook Javascript SDK
• Resources
f Introduction toFacebook JS API
Facebook Developers
• Provide you online documentations
• Forum for discussion
• Management of your applications
f Introduction toFacebook JS API
Where is it?
f Introduction toFacebook JS API
Social Plugins
• Like Button, Send Button, Login Button
• Comments
• Registration
• Activity Feed, Live Stream
f Introduction toFacebook JS API
Graph API
• Facebook’s core
• Social graph
• Connections
Application Graph API Facebook Database
Access Token Request Data
Aggregate InformationResponse Data
f Introduction toFacebook JS API
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 toFacebook JS API
Object Modelinformation from graph API
without access token
f Introduction toFacebook JS API
Graph Modelinformation from graph API
with access token
f Introduction toFacebook JS API
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 toFacebook JS API
Connection Model
f Introduction toFacebook JS API
Access to Graph
• HTTP(S) Graph API
• SDKs‣ Javascript SDK
‣ iOS SDK
‣ Android SDK
‣ PHP SDK
‣ Python SDK
f Introduction toFacebook JS API
HTTP(S) Graph API
• RESTful HTTP request & response
• Response data-type: JSON
• Access URL: graph.facebook.com
f Introduction toFacebook JS API
HTTP(S) Graph API
• Request information of an object with id or username
• id-or-username can be “me” with the access token
http://graph.facebook.com/<id-‐or-‐username>
f Introduction toFacebook JS API
HTTP(S) Graph API
{ "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"}
http://graph.facebook.com/littleq0903
Result:
f Introduction toFacebook JS API
HTTP(S) Graph API
• Access token should be transferred as a HTTP GET variable
• More information: developers.facebook.com/docs/reference/api/
http://graph.facebook.com/littleq0903?access_token=...
f Introduction toFacebook JS API
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 toFacebook 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 toFacebook JS API
Load the Script
• You must specify a <div> element with id “fb-root” in your web pages
• The location of the script
<div id=”fb-‐root”></div>
http://connect.facebook.net/ /all.jsen_USzh_TW
f Introduction toFacebook JS API
Initialization
• Do this after the “fb-root” div element has been built
FB.init({ appId : 'YOUR APP ID', status : true, // check login status cookie : true, // enable cookies xfbml : true // parse XFBML });
f Introduction toFacebook JS API
Components
• Core Methods
• Event Handling
• XFBML Methods
• Data Access Utilities
• Canvas Methods
f Introduction toFacebook JS API
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 toFacebook JS API
FB.api()
• make a API call to the Graph API
• depending on the connect status and the permissions
function SuccessCall(res){alert(res.name);
}
FB.api('/me', SuccessCall);
Call if success.
f Introduction toFacebook JS API
FB.ui()
• Triggering iframe dialogs or popups with Facebook
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 toFacebook JS API
More Topics
• Event Handling
• XFBML
• FQL
• Other SDKs for Facebook Graph API
f Introduction toFacebook JS API
Tools
• Javascript Console
• Debug version of Facebook JS SDK
• Test users
• URL Linter
f Introduction toFacebook JS API
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 toFacebook JS API
Temporary HTTP Server
• python -‐m SimpleHTTPServer
• http://127.0.0.1:8000/
• Facebook app allow only one domain access at a time
f Introduction toFacebook 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 toFacebook JS API
Q&A TimeThanks for your listening