Introduction to Facebook Javascript SDK (NEW)

download Introduction to Facebook Javascript SDK (NEW)

of 19

  • date post

  • Category


  • view

  • download


Embed Size (px)


New version of Introduction to Facebook Javascript SDKMore focus on implementationSocial Network and Applications - TA SessionLittleQ

Transcript of Introduction to Facebook Javascript SDK (NEW)

  • 1. APIIntroduction to Facebook Javascript APISocial Network and Applications, 2011LittleQ, The Department of Computer Science, NCCUf Introduction toFacebook 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 GraphAPI or dialogs via Javascript Authentication Rendering the XFBML versions ofSocial Plugins Most functions in the FB JavascriptSDK require an app idf Introduction toFacebook JS API 4. Load the Script You must specify a

element withid fb-root in your web pages The location of the script /all.js zh_TW en_US f Introduction to Facebook JS API 5. InitializationFB.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 elementhas been built f Introduction to Facebook JS API 6. Components Core Methods Event Handling XFBML Methods Data Access Utilities Canvas Methodsf Introduction toFacebook 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 dialogsf Introduction toFacebook JS API 8. FB.api() make a API call to the Graph API depending on the connect status andthe permissions Call if success. function SuccessCall(res){alert(; } FB.api(/me, SuccessCall);f Introduction toFacebook JS API 9. Example - Get ProleFB.api(/me , function(response){console.log(;} => { email: "", first_name: "Colin", gender: "male", id: "1681390745", last_name: "Su", link: "", locale: "en_US", name: "Colin Su", timezone: 8, updated_time: "2011-12-16T09:43:06+0000", username: "littleq0903", verified: truef}Introduction toFacebook JS API 10. Example - Get Friends FB.api(/me/friends , function(response){ console.log(; } => [{ 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 dataf Introduction toFacebook JS API 11. Example - Get Posts FB.api(/me/feed , { limit: 10 } ,function(response){console.log(;} );Check the by yourself! f Introduction to Facebook JS API 12. Example - Send PostFB.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:, picture:, 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 Facebookf Introduction toFacebook 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 Linterf Introduction toFacebook 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: Introduction toFacebook JS API 17. Temporary HTTP Server python -m SimpleHTTPServer 5000 Facebook app allow only one domain access at a timef Introduction toFacebook JS API 18. Resources[1] Facebook Developers[2] jQuery -[3] Javascript tutorial -[4] Google - f Introduction to Facebook JS API 19. Q&A TimeThanks for your listeningf Introduction toFacebook JS API