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

30
Sep
7

ต่อจากบทความก่อน เริ่มต้นกับการเขียน 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:serverFbml style=”width: 600px;”>
<script type=”text/fbml”>
<fb:fbml>
<fb:request-form
action=”http://heha.levelup.in.th/graph_api/invitefriend.php”
method=”POST”
invite=”true”
type=”Pro Game Training Asia”
content=’Invite your friends to myApp  <fb:req-choice url=”http://heha.levelup.in.th/graph_api/” label=”Join” />  ’ >
<fb:multi-friend-selector showborder=”false” actiontext=”Invite Your Friends to myApp” exclude_ids=”>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
สำหรับรายละเอียดการใช้งานกล่อง Invite สามารถอ่านได้ในบทความเก่าของผมบทความนี้ครับ
นอกจากนี้ยังใช้คำสั่ง FB.api() สำหรับเรียก Graph API ได้เช่นเดียวกับ $facebook->api() ของทาง PHP เลย มีตัวอย่างการใช้งานดังนี้
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!

7 ความเห็น

  1. นายอบ
    16:45 on December 14th, 2010

    สรุปให้ทีครับว่าใช้แบบบทความก่อนหน้านี้ดี หรือว่าใช้ตามบทความนี้จะดีกว่ากันครับ
    ขอบคุณสำหรับบทความดี ๆ กับการทำ app facebook

  2. heha
    23:31 on January 14th, 2011

    อันนี้เป็นเวอร์ชั่นใหม่กว่าครับ

  3. ่ปรึกษาหน่อยนะคะ
    16:02 on November 2nd, 2011

    พอดีได้รับ pj ให้ทำ app บน facebook แต่ ไม่ค่อยรู้เรื่องเลยคะ คือ app ที่ต้องการต้องขึ้นในแฟนเพจ คะ ต้องการให้คนที่มากด like สามารถเลือกการรับข้อมูลกลับ โดยทำเป็น checkbox จะทำได้หรือเปล่าคะ ขอบคุณล่วงหน้านะคะ

  4. heha
    16:25 on November 2nd, 2011

    ส่วนของการส่งข้อมูลกลับเป็นส่วนของการทำเว็บธรรมดาทั่วๆ ไปแล้วครับ ขึ้นอยู่กับลักษณะการเขียนของคุณเอง ซึ่งโดยทั่วไปก็คือการสร้าง form ขึ้นมารับค่าเหมือนเว็บทั่วไปครับ

  5. ่ปรึกษาหน่อยนะคะ
    15:29 on November 3rd, 2011

    พี่เปิดสอนมั้ยคะ อีฟเดือดร้อนจิงๆ TT

  6. heha
    15:31 on November 3rd, 2011

    ไม่มีครับ ขออภัยด้วย ลองติดต่อ Cubic Creative ดูนะครับ เหมือนจะมีเปิดสอน

ใส่ความเห็น

RSS feed for comments on this post