ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...
สร้างปุ่ม post ข้อความแนะนำเว็บไซด์ไปที่ Wall และ News feed ด้วย Facebook JavaScript SDK Graph API
เมื่อ :
26-Jan-12 14:58
อ่าน :
55
ความเห็น :
0
Tag :
javascript jquery facebooksdk
บทความนี้จะขอแนะนำการสร้างปุ่มเพื่อ post ข้อความไปที่ Wall และ News Feed ของผู้ใช้ที่ log in App ของเราอยู่
เป็นการให้ผู้ใช้ช่วยแนะนำเว็บไซด์ของเราให้กับเพื่อนๆ ของเขา
note: หากผู้อ่านยังไม่มีพื้นฐานของ Facebook JavaScript SDK แนะนำให้อ่านบทความเหล่านี้ก่อน
- ขั้นตอนง่ายๆ ในการสร้าง Facebook Applicaiton
- เริ่มต้นใช้งาน Facebook JavaScript SDK เขียนโปรแกรมเชื่อมต่อ Facebook
- เขียนคำสั่งในการ log in, log out Facebook ด้วย JavaScript SDK และ jQuery
- เขียนคำสั่งเรียกดูข้อมูลผู้ใช้ที่ log in application ด้วย Facebook Graph API
มาเริ่มกันเลยนะครับ
เขียนคำสั่งสร้างปุ่มแนะนำเว็บไซด์ ภายใน div id fb-root ดังนี้
<div id="fb-root">
<input type="button" id="btnRecommend" value="แนะนำ codesanook.com ให้กับเพื่อนๆ "/>
</div>
ผูกปุ่ม id btnRecommend กับ event click ผ่าน jQuery เขียนคำสั่งต่อจาก window.fbAsyncInit ดังนี้
$("#btnRecommend").click(function(){
});
เพิ่มคำสั่งเข้าไปใน callback function ของ $("#btnRecommend") เพื่อทำการ post ข้อความไปยัง home feed ของผู้ใช้ ด้วยเมธอด FB.api ดังนี้
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//post message to show on user's Wall & News Feed
var postMessage = "ขออนุญาตแนะนำ codesanook.com - "+
"blog สำหรับนักพัฒนาชาวไทย \n\n" +
"http://codesanook.com มีบทความเกี่ยวกับ \n" +
"ASP.NET MVC \n"+
"C# \n" +
"PHP \n"+
"Entity Framework \n"+
"JavaScript, jQuery \n"+
"Facebook Development \n"+
"iPhone Development \n"+
"SQL Server, MySQL \n"+
"Tip ต่างๆ \n\n" +
"พร้อมทั้งมีบริการฟรีให้ใช้งานกัน \n\n"+
"CodeSanook Terminal ใช้งาน Command Prompt บนเว็บด้วยคำสั่งต่างๆ \n"+
"อ่านเพิ่มเติมได้จาก http://tiny.cc/codesanookterminal \n\n"+
"CodeSanook C# IDE เขียนคำสั่ง C# บนเว็บ แล้ว run ดูผลลัพธ์ได้ทันที \n"+
"อ่านเพิ่มเติมได้จาก http://tiny.cc/codesanookide \n\n"+
"เปิดดูแล้วถูกใจกด Facebook Like ให้กับ codesanook.com ด้วยนะครับ \n\n"+
"ขอบคุณครับ ^^";
//post link to Wall and also show in News Feed
FB.api('/me/links','post',
{
message : postMessage,
picture: "http://codesanook.com/uploads/images/codesanook-logo.jpg",
link : "http://codesanook.com",
name:"codesanook.com",
caption:"codesanook.com",
description:"blog สำหรับนักพัฒนาชาวไทย web and mobile development - " +
"C#, ASP.NET MVC, iPhone, Facebook Developement"
}, function(response) {
if(response.error != undefined)
{
//if post with error
alert(response.error.message);
}else{
//post successfully
alert("ขอบคุณที่แนะนำ codesanook.com ครับ");
}
});//end FB.api
}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.");
}
},{perms: 'read_stream, publish_stream, offline_access'});
}
});//end FB.getLoginStatus
คำอธิบาย
คำสั่งเริ่มทำงานด้วยการตรวจสอบสถานะของผู้ใช้ว่าได้ทำการ log in App ของเราด้วย facebook แล้วหรือไม่ หากยังไม่ได้ log in ให้นำผู้ใช้เข้าสู่กระบวนการ log in ด้วย FB.login
** FB.login ในบทความนี้จะแตกต่างกับบทความที่ผ่านมา เนื่องจาก App ของเราต้องการ post ข้อความไปยัง Wall ของผู้ใช้ ดังนั้นการ log in จึงต้องมาการระบุ permission ที่ App ของเราต้องการ เพื่อให้สามารถ post ข้อมูลได้ permission ที่ส่งเป็นอาร์กิวเมนต์ในที่นี้คือ
read_stream, publish_stream, offline_access
สามารถอ่านเพิ่มเติมเรื่อง permission ได้จาก http://developers.facebook.com/docs/reference/api/permissions/
ถ้าผู้ใช้ log in App ด้วย Facebook และเปิดสิทธิ์ให้ App post link ไปที่ Wall ได้ คำสั่ง FB.api ก็จะถูกเรียกใช้งานทันที
อาร์กิวเมนต์ ของ FB.api ที่ส่งไปเป็นดังนี้
'/me/links' เป็น path สำหรับการ post link ไปยัง user profile (Wall) และจะแสดงที่ News Feed ด้วย
อ่านเพิ่มเติม object ที่สามารถ post ไปที่ facebook ได้ http://developers.facebook.com/docs/reference/api/#publishing
'post' เป็นเมธอดในการส่งข้อมูลเนื่องจากการส่งข้อมูลเป็นแบบไปสร้างข้อมูลที่ Facebook จีงต้องใช้เมธอด post
{ message : postMessage,
picture: "http://codesanook.com/uploads/images/codesanook-logo.jpg",
link : "http://codesanook.com",
name:"codesanook.com",
caption:"codesanook.com",
description:"blog สำหรับนักพัฒนาชาวไทย web and mobile development - " + "C#, ASP.NET MVC, iPhone, Facebook Developement"
} ค่าเหล่านี้เป็นพารามิเตอร์ที่ส่งไปเป็นข้อมูลที่เกี่ยวข้องกับ link และจะแสดงใน Facebook
อยู่ในรูปแบบ JSON Object property : value
callback function จะรับค่า reponse ที่เป็นผลลัพธ์ของการทำงาน ตรวจสอบว่ามีความผิดพลาดเกิดขึ้นหรือไม่ด้วย ถ้ามีข้อผิดพลาด response.error != undefined เป็นจริง และแสดงข้อความที่ระบุถึงความผิดพลาดออกมา response.error.message
ถ้าไม่มีความผิดพลาดเกิดขึ้นก็ให้แสดงข้อความขอบคุณผู้ใช้
คำสั่งทั้งหมดใน facebook-recommend.html
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>call Graph API</title>
<style type="text/css">
#fb-root{
font-size: 16px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- include jQuery JavaScript library -->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="fb-root">
<input type="button" id="btnRecommend" value="แนะนำ codesanook.com ให้กับเพื่อนๆ"/>
</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
oauth : true
});
//additional code
$("#btnRecommend").click(function(){
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//post message to show on user's Wall & News Feed
var postMessage = "ขออนุญาตแนะนำ codesanook.com - "+
"blog สำหรับนักพัฒนาชาวไทย \n\n" +
"http://codesanook.com มีบทความเกี่ยวกับ \n" +
"ASP.NET MVC \n"+
"C# \n" +
"PHP \n"+
"Entity Framework \n"+
"JavaScript, jQuery \n"+
"Facebook Development \n"+
"iPhone Development \n"+
"SQL Server, MySQL \n"+
"Tip ต่างๆ \n\n" +
"พร้อมทั้งมีบริการฟรีให้ใช้งานกัน \n\n"+
"CodeSanook Terminal ใช้งาน Command Prompt บนเว็บด้วยคำสั่งต่างๆ \n"+
"อ่านเพิ่มเติมได้จาก http://tiny.cc/codesanookterminal \n\n"+
"CodeSanook C# IDE เขียนคำสั่ง C# บนเว็บ แล้ว run ดูผลลัพธ์ได้ทันที \n"+
"อ่านเพิ่มเติมได้จาก http://tiny.cc/codesanookide \n\n"+
"เปิดดูแล้วถูกใจกด Facebook Like ให้กับ codesanook.com ด้วยนะครับ \n\n"+
"ขอบคุณครับ ^^";
//post link to Wall and also show in News Feed
FB.api('/me/links','post',
{
message : postMessage,
picture: "http://codesanook.com/uploads/images/codesanook-logo.jpg",
link : "http://codesanook.com",
name:"codesanook.com",
caption:"codesanook.com",
description:"blog สำหรับนักพัฒนาชาวไทย web and mobile development - " +
"C#, ASP.NET MVC, iPhone, Facebook Developement"
}, function(response) {
if(response.error != undefined)
{
//if post with error
alert(response.error.message);
}else{
//post successfully
alert("ขอบคุณที่แนะนำ codesanook.com ครับ");
}
});//end FB.api
}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.");
}
},{perms: 'read_stream, publish_stream, offline_access'});
}
});//end FB.getLoginStatus
});//end $("#btnRecommend").click
};//end window.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>
ทดลองเปิด facebook-recommend.html ด้วย web browser ตัวอย่าง url เช่น http://localhost/FacebookJavascriptSdk/facebook-recommend.html
note: วิธีการจัดการกับกระบวนการ log in ในตัวอย่างนี้อาจจะไม่ใช่วิธีการที่ดีที่สุด เพื่อความเข้าใจและความง่ายของคำสั่งในตัวอย่าง แนะนำให้ผู้อ่าน log out ออกจาก facebook ก่อน ทดลองเปิด face-recommend.html
ผลลัพธ์ที่ได้
กดปุ่ม แนะนำ codesanook.com ให้กับเพื่อนๆ
หน้าต่างให้ทำการ log in เข้าใช้งาน facebook
กรอกข้อมูล Email และ Password แล้วกดปุ่ม Log In เพื่อ log in เข้าใช้งาน facebook จะมีหน้าต่างให้ผู้ใช้เปิดสิทธิ์การเข้าถึงข้อมูลให้กับ App ของเรา
เปิดสิทธิ์โดยการกดปุ่ม Allow มีหน้าต่างแสดงว่าผู้ใช้ได้ log in App ของเราด้วย Facebook และทำการเปิดสิทธิ์เรียบร้อยแล้ว
กดปุ่ม OK
กดปุ่ม แนะนำ codesanook.com ให้กับเพื่อนๆ อีกครั้ง รอสักครู่จะมี alert แสดงข้อความขอบคุณ ดังรูป
ตรวจสอบว่าข้อความได้ถูก post ไปยัง Wall และ News Feed ของผู้ใช้
ที่ Wall
ที่ News Feed
ลองนำไปใช้งานกันดูนะครับ อาจจะเป็นแนวทางในการเพิ่ม trafic ให้กับเว็บไซด์ของเราได้ ^^
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 (6)
- holiday (3)
- iis (1)
- javascript (11)
- jquery (9)
- log4php (1)
- mac-os (3)
- mcts (1)
- mind-map (1)
- monotouch (1)
- mysql (3)
- nant (1)
- nuget (1)
- objective-c (1)
- 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)
- jirawat.in.th
- เรื่องราวเกี่ยวกับตี๋ ประวัติของตี๋
- ผลงาน บทความงานเขียน
- รางวัล ประสบการณ์
- จิรวัฒน์ กรัณย์วิทยาการ
- clipdonjai.com
- Clipdonjai คลิปดลใจ แหล่งรวมคลิปสร้างสรรค์เพื่อแรงบรรดาลใจ
- janawat.wordpress.com MVP Blog
- ความรู้ ประสบการณ์สำหรับผู้สนใจ...
- และโปรแกรมเมอร์น้องใหม่ทุกๆ คน...
