Introduction to Facebook Javascript SDK (NEW)
6 likes5,022 views
The document provides an introduction to the Facebook JavaScript API, detailing requirements such as HTML and basic JavaScript, and outlining key components including core methods and event handling. It discusses the usage of the API for accessing user data, posting to feeds, and utilizing dialogs, along with code examples for common tasks like retrieving profiles and friend lists. The document also includes information on initialization, tools, and additional resources for developers.
![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](https://image.slidesharecdn.com/facebookjsapi-new-111228040649-phpapp01/85/Introduction-to-Facebook-Javascript-SDK-NEW-10-320.jpg)
![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](https://image.slidesharecdn.com/facebookjsapi-new-111228040649-phpapp01/85/Introduction-to-Facebook-Javascript-SDK-NEW-18-320.jpg)
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: "[email protected]", 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