AWS SDK für JavaScript - Entwicklerhandbuch für SDK v2 · Abrufen Ihrer Anmeldeinformationen
Introduction to Facebook Javascript SDK (NEW)
-
Upload
colin-su -
Category
Technology
-
view
5.862 -
download
1
description
Transcript of Introduction to Facebook Javascript SDK (NEW)
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
Requirement
• HTML
• Basic Javascript
• Graph API
• Optional: AJAX, jQuery, CSS...
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
Example - Get ProfileFB.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 toFacebook JS API
Example - Get FriendsFB.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 toFacebook JS API
Example - Get Posts
FB.api(“/me/feed” , { limit: 10 } ,function(response){
console.log(response.data);}
);
Check the response.data by yourself!
f Introduction toFacebook JS API
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 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_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 toFacebook JS API
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 toFacebook JS API
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 toFacebook JS API
Q&A TimeThanks for your listening