introduction to facebook javascript sdk
DESCRIPTION
TA Session, Facebook JS SDK introduction National Chengchi University, The department of Computer Science Social Network and ApplicationsTRANSCRIPT
![Page 1: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/1.jpg)
f Introduction toFacebook JS API
APIIntroduction to Facebook Javascript APISocial Network and Applications, 2011LittleQ, The department of Computer Science, NCCU
![Page 2: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/2.jpg)
f Introduction toFacebook JS API
Objectives
• Learn the concepts of Facebook API
• Learn how to use Facebook API with Javascript
![Page 3: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/3.jpg)
f Introduction toFacebook JS API
Core Topics
• Facebook Developers website
• Graph API
• Facebook Javascript SDK
• Resources
![Page 4: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/4.jpg)
f Introduction toFacebook JS API
Facebook Developers
• Provide you online documentations
• Forum for discussion
• Management of your applications
![Page 5: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/5.jpg)
f Introduction toFacebook JS API
Where is it?
![Page 6: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/6.jpg)
f Introduction toFacebook JS API
Social Plugins
• Like Button, Send Button, Login Button
• Comments
• Registration
• Activity Feed, Live Stream
![Page 7: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/9.jpg)
f Introduction toFacebook JS API
Object Modelinformation from graph API
without access token
![Page 10: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/10.jpg)
f Introduction toFacebook JS API
Graph Modelinformation from graph API
with access token
![Page 11: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/12.jpg)
f Introduction toFacebook JS API
Connection Model
![Page 13: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/13.jpg)
f Introduction toFacebook JS API
Access to Graph
• HTTP(S) Graph API
• SDKs‣ Javascript SDK
‣ iOS SDK
‣ Android SDK
‣ PHP SDK
‣ Python SDK
![Page 14: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/14.jpg)
f Introduction toFacebook JS API
HTTP(S) Graph API
• RESTful HTTP request & response
• Response data-type: JSON
• Access URL: graph.facebook.com
![Page 15: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/15.jpg)
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>
![Page 16: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/16.jpg)
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:
![Page 17: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/17.jpg)
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=...
![Page 18: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/21.jpg)
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 });
![Page 22: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/22.jpg)
f Introduction toFacebook JS API
Components
• Core Methods
• Event Handling
• XFBML Methods
• Data Access Utilities
• Canvas Methods
![Page 23: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/24.jpg)
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.
![Page 25: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/25.jpg)
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!' } );
![Page 26: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/26.jpg)
f Introduction toFacebook JS API
More Topics
• Event Handling
• XFBML
• FQL
• Other SDKs for Facebook Graph API
![Page 27: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/27.jpg)
f Introduction toFacebook JS API
Tools
• Javascript Console
• Debug version of Facebook JS SDK
• Test users
• URL Linter
![Page 28: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/28.jpg)
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
![Page 29: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/29.jpg)
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
![Page 30: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to Facebook Javascript SDK](https://reader036.vdocuments.net/reader036/viewer/2022081717/55585e0ad8b42a943b8b51af/html5/thumbnails/31.jpg)
f Introduction toFacebook JS API
Q&A TimeThanks for your listening