ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...
เริ่มต้นใช้งาน Facebook JavaScript SDK เขียนโปรแกรมเชื่อมต่อ Facebook
เมื่อ :
21-Jan-12 22:13
อ่าน :
497 ครั้ง
Tag :
javascript facebooksdk
Facebook มี JavaScript SDK สำหรับให้ Web Develper เขียนคำสั่งภาษา JavaScript เพื่อดึงข้อมูลผู้ใช้ เพื่อน หรือ post ข้อความไปยัง wall, news feed และอื่นๆ
โดยขั้นตอนการติดตั้ง SDK เป็นดังนี้
1. สร้าง HTML ไฟล์ขึ้นมา ตั้งชื่อว่า index.html
2. เปิด index.html ด้วย text editor เพิ่มคำสั่งต่อไปนี้เข้าไปใน index.html
ใน html tag เพิ่ม xml namespace ดังนี้
xmlns:fb="http://www.facebook.com/2008/fbml"
3. เพิ่ม div element ต่อไปนี้ต่อจาก open body tag
<div id="fb-root"> </div>
4. เพิ่มคำสั่งในการ initialize SDK ต่อจาก div element ในข้อที่ 3
<script type="text/javascript">
//fbAsyncInit is executed as soon as the JavaScript SDK is loaded asynchronously
window.fbAsyncInit = function() {
//initialize SDK
FB.init({
appId : 'appId', // App ID
channelUrl : 'channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
appId คือ id ของ Application ที่สามารถสร้างใหม่ได้ที่หน้า https://developers.facebook.com/apps อ่าน ขั้นตอนง่ายๆ ในการสร้าง Facebook Applicaiton
channelUrl เป็น channel.html ซึ่งเป็น chanel file ที่สร้างขึ้นมาแก้ไขปัญหาการส่งค่า cross domain สำหรับ browser บางตัว คำสั่งภายใน channel.html มีเพียง อ่านคำอธิบาย เพิ่มเติม FB.init เป็นอย่างน้อย
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
5. เพิ่มคำสั่งในการ include SDK เข้ามาใช้งานใน index.html ด้วยคำสั่งต่อไปนี้ เพิ่มต่อจากฟังก์ชัน window.fbAsyncInit
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
6. คำสั่งทั้งหมดใน setup.html เป็นดังนี้
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>set up JavaScript SDK</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
//fbAsyncInit is executed as soon as the JavaScript SDK is loaded asynchronously
window.fbAsyncInit = function() {
//initialize application
FB.init({
appId : 'appId', // App ID
channelUrl : 'channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});//end
};//end fbAsyncInit
// load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
7. ทดลองเปิด setup.html ด้วย Web Browser จะเห็นแต่หน้าจอว่าง blank เนื่องจากคำสั่งทั้งหมดที่เขียนไปเป็นเพียงการติดตั้ง SDK แต่เรายังไม่ได้เรียกใช้งาน API ของ SDK ต่อไปเราจะเขียนคำสั่งเพิ่มเติม เพื่อตรวจสอบว่า ผู้ใช้ได้ Login Facebook แล้วหรือไม่
ต้องเปิด setup.html ผ่าน Web Server ตัวอย่าง URL ที่เปิดผ่าน Web Server เช่น http://localhost/FacebookJavascriptSdk/setup.html และต้องแก้ไขค่า Site URL เป็น http://localhost ใน setting ของ App ที่เราได้สร้างขึ้นมา
เขียนคำสั่งตรวจสอบว่าผู้ใช้ได้ Login Facebook อยู่แล้วหรือไม่
1. เพิ่มคำสั่งต่อไปนี้ ต่อจากฟังก์ชั่น window.fbAsyncInit
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}else{
//the user hasn't even logged in to Facebook
//show pop up window for user to log in
//or not logged in this app with facebook
alert("User is not logged in facebook or not logged in this app with facebook.")
FB.login(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}
else {
alert("User is not logged in this app with facebook.");
}
});
}
});//end FB.getLoginStatus
คำอธิบาย
FB.getLoginStatus(fb_cb) เป็นฟังก์ชันในการตรวจสอบสถานะการ login ของผู้ใช้ รับค่า call back function (fb_cb ย่อจาก facebook callback) โดยที่ cb จะรับค่า response ที่จะถูกส่งมาให้หลังจากได้สถานะของผู้ใช้แล้ว ภายใน response object จะมี property ที่ชื่อว่า status ที่เก็บสถานะของผู้ใช้ connected คือ login application ด้วย facebook อยู่แล้ว อ่านเพิ่มเติม
FB.login(fb_cb) เป็นฟังก์ชันในการแสดง pop up window ให้ผู้ใช้ทำการ login ในคำสั่งข้างต้น ฟังก์นี้ถูกเรียกใช้งานหลังจากตรวจสอบแล้วว่าผู้ใช้ไม่ได้ทำการ login อยู่ อ่านเพิ่มเติม
2. คำสั่งทั้งหมดใน setup.html
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>set up JavaScript SDK</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script>
//fbAsyncInit is executed as soon as the JavaScript SDK is loaded asynchronously
window.fbAsyncInit = function() {
//initialize SDK
FB.init({
appId : 'appId', // App ID
channelUrl : 'channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}else{
//the user hasn't even logged in to Facebook
//show pop up window for user to log in
//or not logged in this app with facebook
alert("User is not logged in facebook or not logged in this app with facebook.")
FB.login(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}
else {
alert("User is not logged in this app with facebook.");
}
});
}
});//end FB.getLoginStatus
};//end fbAsyncInit
// load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
3. ทดสอบการทำงานโดย index.html ด้วย web browser
กรณีที่ผู้ใช้ ยังไม่ได้ log in ใช้งาน facebook จะมี Alert ดังรูป
กดปุ่ม OK จะมีหน้าต่างให้ log in เข้าใช้งาน facebook
กรอกข้อมูล Email และ Password แล้วกดปุ่ม Log In เพื่อ log in เข้าใช้งาน facebook จะมีหน้าต่างให้ทำการ Log In เข้าใช้ App ของเราด้วย facebook ดังรูป
กดปุ่ม Log In with Facebook เพื่อเป็นการอนุญาตให้ App ที่เราสร้างขึ้นสามารถเชื่อมต่อกับ Facebook ได้
ในขั้นตอนนี้หากผู้ใช้กดปุ่ม Cancel แทน App ของเราจะไม่มีสิทธ์เข้าไปดึงข้อมูลจากผู้ใช้ได้ และจะมี Alert ดังรูป
ทดลองผลลัพธ์การทำงานอีกครัั้งด้วยการกดปุ่ม F5
มี Alert แสดงเหมือนตอนที่ผู้ใช้ยังไม่ได้ log in
แต่หลังจากกดปุ่ม OK จะมีหน้าต่างให้ทำการ Log In เข้าใช้ App ของเราด้วย facebook ทันที ไม่มีหน้าต่างให้ log in เข้าใช้งาน facebook แสดงอีก เพราะผู้ใช้ได้ log in เข้าใช้งาน facebook แล้ว ดังรูป
กดปุ่ม Log In with Facebook มี Alert แสดงข้อความว่าผู้ใช้ได้ Log in app นี้ด้วย facebook แล้ว
หวังว่าผู้อ่านจะได้เข้าใจการติดตั้งและใช้งาน Facebook JavaScript SDK เบื้องต้น ความน่าสนใจของ JavaScript SDK คือเข้าได้กับทุก Server Side Technology เช่น ASP.NET , JSP, PHP, Ruby ก็ใช้งาน SDK ตัวนี้ได้ ต่างจาก PHP SDK ที่ค่อนข้างจำกัดอยู่ที่ฝั่ง Server ต้องเป็น PHP
ในบทความต่อๆ ไปผมก็จะอธิบายการใช้งาน SDK รวมถึง API ที่เป็นประโยชน์ คอยติดตามกันนะครับ
download souce code ตัวอย่าง (NetBeanProject)
ความเห็น
- apache (4)
- asp-net (1)
- asp-net-mvc (4)
- c (1)
- c# (17)
- cms (1)
- comunity (2)
- edge (1)
- entity-framework (2)
- excel (2)
- facebooksdk (7)
- holiday (3)
- iis (1)
- javascript (12)
- jquery (9)
- log4php (1)
- mac-os (3)
- mcts (1)
- mind-map (1)
- monotouch (1)
- mysql (3)
- nant (2)
- nuget (1)
- objective-c (1)
- orchard (2)
- phonegap (1)
- php (8)
- phpmyadmin (2)
- selector (1)
- simple-test (1)
- sql-server-ce (2)
- string (1)
- svn (1)
- tool (9)
- ubuntu (1)
- unit-test (2)
- vba (2)
- visual-studio (3)
- xcode (3)
Friends
jirawat.in.th clipdonjai.com janawat.wordpress.com csharp89.blogspot.com 108blog.net