เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (Javascript) by heha

ต่อจากบทความก่อน เริ่มต้นกับการเขียน 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 นะครับ