เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (Javascript) by heha
Sep7
ต่อจากบทความก่อน เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) ฉบับปรับปรุง Graph API นะครับ มาครั้งนี้ลองมาดู Javascript API กันบ้าง โดย Application ทุกตัวมีความจำเป็นอย่างหลีกเลี่ยงไม่ได้ที่จะต้องใช้ Javascript API มาทำงานร่วม เพราะต้องใช้ตอน publish หรือสร้างหน้าต่าง invite ซึ่งเป็น UI ของทาง facebook ที่สร้างมาให้ใช้ โดย Javascript Library ตัวนี้เป็นคนละตัวกับในบทความเก่าของผมนะครับ ไม่สามารถใช้ร่วมกันได้ ก่อนอื่นมาดู ก่อนอื่นต้องสร้าง code ส่วนของการ Authenticate ผ่าน Javascript ไว้ด้วย ลองดูไฟล์ตัวอย่างที่นี่ จะมี code ส่วน Authenticate ดังนี้
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>',
session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
window.location.reload();
});
FB.Canvas.setAutoResize();
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
มีจุดที่น่าสนใจสองจุดดังนี้
- appId – Application ID ของ app ที่เราสมัครไว้
- session - Session ที่ตัว php set ไว้ก่อน หากมีการใช้ Facebook API เวอร์ชั่น PHP ควรจะใช้ session ตัวเดียวกันเพราะจะได้ไม่ต้องเสียเวลา Authenticate สองรอบ (รอบแรก php รอบสอง javascript)
หาก Authenticate สำเร็จจะสามารถใช้ XFBML (tag ที่มี fb: นำหน้า)ได้ ซึ่งเป็น component สำเร็จรูปเช่น
- ปุ่ม Login - <fb:login-button></fb:login-button>
- กล่อง comment – <fb:comments></fb:comments>
- แสดงชื่อเต็ม ของ facebook user id ที่ระบุใน uid – <fb:name uid=”550734390″ capitalize=”true”></fb:name>
- ปุ่ม share - <fb:share-button href=”http://www.levelup.in.th/” type=”box_count”></fb:share-button>
- และสุดท้าย กล่อง invite friend ครับ
FB.api('/me', function(response) {
alert(response.name);
});
สุดท้ายคือ code publish ลง wall ของ Javascript API ตัวนี้ครับ
FB.ui(
{
method: 'stream.publish',
message: 'getting educated about Facebook Connect',
attachment: {
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
'media': [{ 'type': 'image', 'src': 'http://www.blognone.com/themes/blognone4/images/logo.png', 'href' : 'http://apps.facebook.com/sipa_gamepro/'}],
href: 'http://apps.facebook.com/sipa_gamepro/'
},
action_links: [
{ text: 'Code', href: 'http://apps.facebook.com/sipa_gamepro/' }
],
user_message_prompt: 'Share your thoughts about Connect'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
ส่วนที่ต้องแก้เพื่อใช้งานมีดังนี้ครับ
- message – ข้อความที่จะพิมพ์ให้ผู้ใช้นำก่อนเลย ส่วนมากแล้วมักใส่เป็น string เปล่าเว้นไว้ครับ
- name – ชื่อหัวข้อ publish (ส่วนที่ตัวหนา)
- caption – รายละเอียดข้อความที่จะแสดง
- media – มีสามตัวย่อยที่ต้องใส่คือ
- type – สามารถใส่เป็น image, flash, sound ได้ โดยทั่วไปมักใส่เป็น image
- src – URL รูปภาพ, flash, เสียง
- href – URL ที่จะ link ไปหาเมื่อผู้ใช้คลิกภาพนี้
- href – URL ที่ผู้ใช้คลิกที่ตัวหนาแล้วจะไปหา
- action_links – มีสองตัวย่อยที่ต้องใส่คือ
- text – ข้อความที่แสดงใต้ post ต่อจาก Comment และ Like
- href – URL ที่จะ link ไปหาเมื่อผู้ใช้คลิกที่ข้อความนี้
- user_message_prompt – ข้อความที่แสดงบนกล่องข้อความที่ให้ผู้ใช้พิมพ์
เอาล่ะ ขอให้ทุกคนโชคดีกับการทำ app facebook นะครับ
Enjoy this article?
Consider subscribing to our RSS feed!
16:45 on December 14th, 2010
สรุปให้ทีครับว่าใช้แบบบทความก่อนหน้านี้ดี หรือว่าใช้ตามบทความนี้จะดีกว่ากันครับ
ขอบคุณสำหรับบทความดี ๆ กับการทำ app facebook
23:31 on January 14th, 2011
อันนี้เป็นเวอร์ชั่นใหม่กว่าครับ
16:02 on November 2nd, 2011
พอดีได้รับ pj ให้ทำ app บน facebook แต่ ไม่ค่อยรู้เรื่องเลยคะ คือ app ที่ต้องการต้องขึ้นในแฟนเพจ คะ ต้องการให้คนที่มากด like สามารถเลือกการรับข้อมูลกลับ โดยทำเป็น checkbox จะทำได้หรือเปล่าคะ ขอบคุณล่วงหน้านะคะ
16:25 on November 2nd, 2011
ส่วนของการส่งข้อมูลกลับเป็นส่วนของการทำเว็บธรรมดาทั่วๆ ไปแล้วครับ ขึ้นอยู่กับลักษณะการเขียนของคุณเอง ซึ่งโดยทั่วไปก็คือการสร้าง form ขึ้นมารับค่าเหมือนเว็บทั่วไปครับ
15:29 on November 3rd, 2011
พี่เปิดสอนมั้ยคะ อีฟเดือดร้อนจิงๆ TT
15:31 on November 3rd, 2011
ไม่มีครับ ขออภัยด้วย ลองติดต่อ Cubic Creative ดูนะครับ เหมือนจะมีเปิดสอน