Request Dialog 2.0


FB.ui({
method: 'apprequests',
message: 'ข้อความที่จะแสดงให้ผู้รับเห็น',
filters: ['all'],
exclude_ids:['123'],
max_recipients: 20
}, function(response){
// ตรวจสอบว่าได้มีการเลือกเพื่อนอย่างน้อย 1 คนจึงจะทำงานต่อไป
if (response != null && response.to.length > 0){
for (var i=0; i < response.to.length; i++) {
alert(response['to'][i]); // วนลูปทดลองสั่งให้แสดงเลข user_id ของเพื่อนที่เลือกไป
}
}
}
);


จาก code ด้านบน ขออธิบายดังนี้

• method (string) – บังคับระบุเป็น apprequests
• message (string) – คือข้อความที่ต้องการให้ผู้รับเห็น
• filters (array) – ต้องการให้แสดง list ของกลุ่มผู้ใช้กลุ่มใดบ้าง ระบุได้มากกว่าหนึ่งอย่าง โดยสามารถระบุได้ 3 อย่างได้แก่
  • all – แสดงเพื่อนทั้งหมดของผู้ใช้
  • app_users – แสดงเฉพาะเพื่อนที่ใช้งาน application ตัวนี้เหมือนกัน
  • app_non_users – แสดงเฉพาะเพื่อนที่ยังไม่เคยเข้ามาใช้งาน application ตัวนี้มาก่อน
• exclude_ids (array) – ระบุยกเว้น user_id ใดๆ ที่ไม่ต้องการให้แสดง โดยกรอกเป็น array ของ user_id (ตัวอย่างการใช้งานเช่น ใช้กับการห้ามส่ง gift หาเพื่อนซ้ำคนเดิมในวันเดียวกันได้)
• max_recipients (int) – กำหนดให้ผู้ใช้เลือกเพื่อนได้สูงสุดกี่คน
• callback (function) – ใน parameter ตัวสุดท้ายจะเป็น callback function ซึ่งจะส่งค่า response กลับเข้าไปใน function นี้โดย response เป็นตัวแปรชนิด Object มีโครงสร้างดังนี้
  • request (int) – เป็น id การ request ครั้งนี้
  • to (array) – array ของ user_id ของเพื่อนที่ได้เลือกไป

เมื่อส่ง request เสร็จแล้ว และผู้รับได้กดรับ request แล้วเราจะต้องสั่งลบ request นั้นๆ เอง ไม่เช่นนั้นจะมี request ค้างอยู่ในหน้า app request หรือ game request อยู่อย่างนั้น โดยวิธีการลบคือให้นำ request id ที่ส่งมาต่อกับ user_id ของคนที่กดรับ request โดยคั่นกลางด้วย _ จะได้เลขอ้างอิงสำหรับลบเช่น โครงสร้าง javascript object ที่ได้รับมาเป็น {request:123, to:[3,4,5]} จะได้เป็น 123_3 ใช้ลบ request ของ user_id 3 ได้ 123_4 ใช้ลบ request ของ user_id 4 เป็นต้น วิธีการสั่งลบคือให้เรียก Graph API (ใช้ access_token ของ application ในการใช้สิทธิลบ) เพื่อลบเช่น (php นะครับ)
$facebook->api(“/123_3″,’DELETE’);
ก็จะลบ request ที่ user_id 3 กดรับไปแล้วออกจากหน้า app/game request ครับ

อันที่จริงในส่วนของการลบ request ไม่จำเป็นต้องทำก็ได้ application ยังคงทำงานได้ตามปกติแม้ไม่ลบ หากไม่เข้าใจขั้นตอนในการลบ request สามารถข้ามไปได้ครับ เพียงแต่ใน facebook เค้าว่า “เป็นหน้าที่ของ developer ที่จะต้องลบ request ที่ใช้งานแล้วทิ้งเอง” ซึ่งก็ไม่ได้บอกว่าถ้าไม่ลบจะเกิดอะไรขึ้นครับ ฮาๆ ขอให้สนุกกับการสร้าง application บน facebook นะครับ

<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 นะครับ

Update ล่าสุดตามได้ที่บทความใหม่อันนี้ครับ บทความนี้ใช้ได้แค่ตั้งแต่ข้อ 7 ลงไปนะครับ ส่วนข้อ 1-6 มันเก่าเกินไปแล้ว ใช้ไม่ได้แล้วครับ

องค์ประกอบการทำเกม Facebook เกมหนึ่งมีดังนี้

ในบทความนี้จะกล่าวถึงข้อ 4 นะครับ สิ่งที่ต้องทำมีดังนี้

1. http://www.facebook.com/developers/ เข้าหน้านี้แล้วกด Allow Access จะเป็นการอนุญาตการใช้ App เหมือน App บน facebook ทั่วไป
2. คลิก SetUp New Application ทางมุมขวาบน
3. ช่อง Application Name ก็กรอกชื่อ App ที่เราจะสร้างตามสะดวก
4. ติ๊ก Agree แล้ว Save Change
5. จะเข้าสู่หน้า Application Setting ซึ่งส่วนที่เราต้องไปเซ็ตค่ามีดังนี้ (ส่วนอื่นนอกจากนี้ ถ้าไม่ต้องการใช้อะไรที่ Advance จริงๆก็ไม่ต้องยุ่งครับ จะมีอะไรให้เซ็ตเยอะมาก)
   1. Tab About ต้องเซ็ตดังนี้
      • Application Name – อันเดียวกับที่ใส่ไปแล้ว
      • Description – รายละเอียด Application ที่จะให้แสดงตอนขึ้น Allow Access ให้ดึง friend มาได้
      • Icon – icon เวลา bookmark และ publish ลง wall
      • Logo – แสดง logo ตอน Allow Access และอื่นๆ
      • Developers – ถ้ามีเพื่อนหลายคนช่วยกัน จะแบ่ง permission ให้เข้ามาแก้ Application Setting ได้ด้วยก็ใส่เพิ่มตรงนี้
      • Contact Email – หากผู้ใช้ Application ของเราติดปัญหาใดๆ แจ้ง Report ผ่าน Facebook จะมีอีเมล์ยิงเข้าอีเมล์ที่ระบุในช่องนี้
   2. Tab Website
      • Site URL – กรอก URL host เราเข้าไปเหมือนเดิมครับ แต่ให้ใส่ ROOT URL นะครับ เช่นเราเก็บ code facebook app จริงๆ ไว้ที่ http://www.mydomain.com/myfacebookapp ก็ใส่เป็น http://www.mydomain.com ไม่งั้นจะมี bug cookie ในภายหลัง
      • Site Domain – ใส่เป็น mydomain.com (ไม่มี www และ http://) เพื่อป้องกัน bug cookie เช่นกัน
   3. Tab Facebook Integration
      • Application ID – หมายเลข application ของเรา ให้ copy เก็บไว้อ้างอิงตอนใช้ SDK ภายหลัง
      • Application Secret – รหัสลับของ application ของเรา ให้ copy ไว้อ้างอิงตอนใช้ SDK ภายหลังเช่นกัน
      • Canvas Page URL – URL ที่ใช้เข้าถึง Application ของเรา (จะเปลี่ยน URL เมื่อไหร่ก็ได้ตามต้องการ และไม่กระทบกับผู้ใช้ที่ bookmark app เราไว้)
      • Canvas Callback URL – URL ที่เชื่อมโยงกับเว็บจริงของเราที่ทำการประมวลผลต่างๆ ใน app และส่งมาให้ผู้ใช้ได้ใช้ (host ของเรานั่นเองแหละ) เช่น http://www.myserver.com/facebook_app/ (ต้องมี / ปิดท้าย ไม่งั้นจะไม่ได้)
      • Render Method – อันนี้ให้เลือกเป็น Iframe อีกไม่นาน Facebook จะยกเลิกการใช้งาน FBML แล้ว ดังนั้นไม่ต้องไปสนใจมันแล้วครับ
      • IFrame Size – อันนี้เลือกเป็น Auto-resize เพื่อให้เราสามารถใช้ script สั่งให้ขนาด iframe สูงตาม application จริงๆ ของเราโดยอัตโนมัติ
   4. Tab Mobile – tab นี้ใช้เมื่อ application ของเราเขียนโดยใช้ Android SDK หรือ iPhone SDK โดยตรงเท่านั้นครับ
   5. Tab Advanced
      • Sandbox Mode – ถ้าเลือกเป็น Enable จะอนุญาตให้เฉพาะ Developer ของ App นี้เท่านั้นที่สามารถใช้งานทดสอบ App นี้ได้ (ตามช่อง Developers ที่ได้กรอกไว้ใน Tab About) ซึ่งหากเป็น App ที่อยากให้เพื่อนช่วยทดสอบก็ปล่อย Disable ไปเถอะครับ
      • Migrations – จะมีส่วนย่อยๆ 4 ส่วนได้แก่
        • JSON Encoding Empty Arrays – Enabled เลยครับ ตรงนี้
        • Stream post URL security – หากต้องการให้ wall ที่โพสต์โดย app นี้ link ไปเว็บอื่นๆ นอกเหนือจากเว็บที่เก็บ app นี้เองได้ให้คง Disabled ไว้ แต่หากใช้แค่เว็บเดียวก็ Enabled เลยครับ
        • Canvas Session Parameter – Enabled เลยครับ
        • OAuth 2.0 for Canvas (beta) – Enabled เลยเช่นกัน
6. คลิก Save Changes ก็จะแสดงหน้า Profile ของ Application เราขึ้นมา อย่าลืมจำค่า Application ID และ Application Secret เอาไว้ให้ดี เพราะต้องเอาไปใช้ใน code ของเราตอนเชื่อมกับ Facebook ครับ
7. ในหน้าเดียวกันกับข้อที่แล้วให้เลื่อนลงมาด้านล่าง คลิก Download the Client Library แล้วจะเข้าสู่เว็บไซต์ Git-hub ให้คลิก Download Source ที่ขวาบน
8. Extract Client Library ออกมาจะพบ folder src ให้เข้าไป upload ไฟล์ facebook.php ขึ้น server
9. เข้าไป Copy File ตัวอย่างของผม แล้วสร้างเป็นไฟล์ index.php upload ขึ้นไปไว้ที่เดียวกับ facebook.php
10. แก้ไข $appId และ $secret โดยกรอก Application ID และ Application Secret ที่เราจำมาเมื่อกี้ สำหรับ $start_page คือ URL ที่จะย้อนกลับมาหลังจากผ่านหน้า allow access ไปแล้ว
11. upload ขึ้น server ตาม Canvas URL ที่กรอกไว้ และทดสอบลองเข้า http://apps.facebook.com/facebook_app (Canvas Page ที่ตั้งไว้)

จบแล้วครับ ไฟล์ตัวอย่างของผมนี้แก้ไขจาก example.php ให้ใช้ง่ายขึ้นแล้ว โดยไฟล์นี้จะมีตัวอย่างการใช้งาน code ง่ายๆ ด้วยเรียบร้อยครับ สำหรับใครต้องการดูข้อมูล Graph API เพิ่มเติมสามารถดูได้จาก Documentation ของ Facebook ที่นี่ ครับ (เข้าไปแล้วคลิก Graph API เพื่อดูตัวอย่างคำสั่งอื่นๆ ที่เหลือครับ) ขอให้สนุกกับการสร้าง Application บน Facebook นะครับ

function streamPublish มี parameter ที่ต้องส่งไปดังนี้

• user_message – คือข้อความที่จะ default ปรากฏให้ผู้ใช้กรอก แต่เนื่องจาก policy ของ facebook กำลังจะเปลี่ยนห้ามปรากฏข้อความ default ให้ผู้ใช้พิมพ์เองทั้งหมด ผมจึงแนะนำให้เว้นว่างไว้ครับ (จริงๆ มันก็ไม่ได้สำคัญมากอยู่แล้ว)
• attachment – ตรงนี้สำคัญมาก คือต้องการแทรกข้อความอะไร และจะแทรกอะไรแนบไปกับข้อความ (รายละเอียดเพิ่มเติมดูที่ wiki facebook หน้านี้) สามารถ attach หลายๆ อย่างพร้อมกันได้ แต่ไม่แนะนำเนื่องจากจะรก มีรายละเอียดดังนี้
  • name – หัวเรื่องที่ต้องการ publish (ส่วนที่เป็นตัวหนังสือหนา)
  • href – link ที่กดจากข้อความ name แล้วให้ไปที่ใด
  • caption – รายละเอียดของการ publish (ปรากฏใต้ตัวหนังสือหนา) สามารถแทรกข้อความ {*actor*} เข้าไปเพื่อให้ facebook แทนที่ข้อความด้วยชื่อของผู้ publish ได้ หากเกิด 300 ตัวอักษรจะถูกซ่อนใน link See More
  • media – ส่วนของการแนบไฟล์ต่างๆ ตัวไฟล์แนบนั้นสามารถแบ่งเป็น3 ประเภท มีดังนี้
  • image – ไม่ว่าจะแนบรูปขนาดเท่าไรไป facebook จะทำการย่อรูปให้เหลือขนาด 90×90 เสมอ และ 1 แถวสามารถแสดงรูปได้สูงสุด 4 รูป (หากใส่มากกว่านั้นจะถูกดันลงไปอีกบรรทัดหนึ่ง) แต่อย่างไรก็ตาม ขณะนี้หากมีการแนบรูปมากกว่า 1 รูป รูปที่ไม่ใช่รูปแรกจะถูกซ่อนภายใน link Read More ดังนั้นรูปแรกจะเป็นรูปที่สื่อความหมายมากที่สุด เนื่องจากผมเชื่อว่ามีคนกว่า 70% ที่จะไม่คลิกปุ่ม Read More นี้ มีโครงสร้างโค้ดดังนี้ (หากต้องการใส่หลายรูป ให้ใส่เป็น array ดังตัวอย่างโค้ดที่แสดง)
    var attachment = {‘media’:
    [{'type': 'image',
    'src':  'http://levelup.in.th/planet/wall/first.jpg',
    'href': 'http://apps.facebook.com/lvup_planet'},
    {'type': 'image',
    'src':  'http://levelup.in.th/planet/wall/second.jpg',
    'href': 'http://apps.facebook.com/lvup_planet'}]}
  • flash – มักจะเป็นวิดีโอจาก youtube โดยสามารถใส่ thumbnail เองได้ ต้องคลิกก่อนจึงจะเริ่มมีการใช้งาน มีโครงสร้างดังนี้
    var attachment = {‘media’:
    [{'type': 'flash',
    'swfsrc': 'http://www.mapsofwar.com/photos/EMPIRE17.swf',
    'imgsrc': 'http://icanhascheezburger.files.wordpress.com/2009/04/funny-pictures-hairless-cat-phones-home.jpg',
    'width': '100',
    'height': '80',
    'expanded_width': '160',
    'expanded_height': '120'}]}
    • type – ใส่ flash
    • swfsrc – URL ต้นฉบับ
    • imgsrc – thumbnail
    • width – ความยาว thumbnail
    • height – ความสูง thumbnail
    • expanded_width – ความยาววิดีโอเมื่อคลิกที่ thumbnail
    • expanded_height – ความสูงวิดีโอเมื่อคลิกที่ thumbnail
  • mp3 – ใส่ได้เพียงอันเดียวเช่นกัน facebook จะมีโปรแกรมเล่นเสียงให้ในตัว ใส่เพียง URL, title, artist, album มีโครงสร้างดังนี้
    var attachment = {‘media’:
    {‘media’:
    [{'type': 'mp3',
    'src': 'http://www.looptvandfilm.com/blog/Radiohead%20-%20In%20Rainbows/01%20-%20Radiohead%20-%2015%20Step.MP3',
    'title': '20 Step',
    'artist': 'Radiohead',
    'album': 'In Rainbows'}]}
    • type – ใส่ mp3
    • src – URL ต้นฉบับ
    • title – ชื่อเพลง
    • artist – ชื่อศิลปิน
    • album – อัลบั้ม
• actionLinks – คือ link ด้านล่างสุด ใต้ข้อความอธิบาย มักใส่ข้อความว่า “Play Now”, “Play Planet” (ใส่สัญลักษณ์แปลกๆ บางตัวเช่น [Play Planet] ไม่ได้ จะโดนลบให้เองโดยอัตโนมัติ) ใส่ได้สูงสุง 25 ตัวอักษร มีโครงสร้างโค้ดดังนี้
  var actionLinks = [{ "text": 'Play Planet', "href": 'http://apps.facebook.com/lvup_planet'}];
• targetId – ต้องการโพสต์ลง wall ของใคร อาจใส่เป็น user id ของเพื่อนของผู้ใช้ที่เล่นอยู่ก็ได้ แต่ทั่วไปแล้วแนะนำให้ใส่เป็น null เพื่อให้โพสต์ลง wall ของตัวผู้เล่นเองครับ จะได้ผลดีกว่ามาก (โพสต์ลง wall เพื่อนอาจเกิดความรำคาญได้)
• prompt – ข้อความด้านบนที่ชี้แจงว่าให้ผู้ใช้กรอกข้อความอะไร ทั่วไปแล้วมักจะนึกไม่ออกกัน (ฮา) และใส่ไปว่า “Write something…” อันนี้เรื่องจริงไม่ได้ล้อเล่นครับ เป็นกันหลาย app เลยทีเดียว
• callback – เมื่อ publish ข้อความเสร็จสิ้นหรือมีการปิดหน้าต่างทิ้ง หรือกด skip function นี้จะทำงานครับ มี parameter สองตัวที่ส่งมาคือ
  function defaultCallback (post_id, exception) {
  // script ตามต้องการ อาจมีการยิง AJAX เพิ่มเติมหากต้องการเก็บข้อมูลบางอย่าง
  }

และสำหรับ code ส่วน attachment เต็มๆ ที่ผมใช้มีดังนี้

และนี่คือรายละเอียดทั้งหมดของการ Publish ลง wall ครับ ส่วนนี้จำเป็นมากๆ ต่อ Viral Marketing เป็นช่องทางหนึ่งที่ได้ผลดีที่สุดมากกว่า invite friend กันตรงๆ หรือการส่ง notification เสียอีก หากออกแบบรูปที่ publish ลง wall ให้เด่นสะดุดตาแล้วจะมีผู้เล่นคลิกมาเล่น app มากมายผ่านทาง wall สิ่งที่จะตัดสินชะตา app เราก็คือรูปๆ แรกก่อนคลิก See More นี่แหละครับ ส่วนช่องทางโปรโมทที่ได้ผลอีกทางที่เหลืออยู่คือลง Ads นั่นเองแหละครับ ขอให้ทุกคนโชคดีกับการทำ app บน facebook นะครับ

Invite Friend (FBML)

<fb:serverfbml style=”width: 500px;”>
<script type=”text/fbml”>
<fb:fbml>
<fb:request-form action=’paoyingchup/invite’ method=’POST’
invite=’true’
type=’Pao Ying Chup hit Afro’
content=’This is an invitation to fight with me! <fb:req-choice url=”http://apps.facebook.com/paoyingchup_afro/choose_weapon/444444” label=”Accept and fight with me!” />  ‘>
<fb:multi-friend-selector showborder=’false’ actiontext=’Invite your friends to fight you!’ cols=’4′ rows=’3′  exclude_ids=’55,67′ bypass=’cancel’>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>

จาก code ที่ยกมาจะมีส่วนของ tag <fb:serverfbml> ที่ต้องใส่คร่อมคำสั่งนี้ด้วยหาก app ที่เราใช้เป็นแบบ Iframe และ <script type=”text/fbml”> ซึ่งต้องใส่ อันนี้ไม่รู้เหมือนกันว่าใส่ทำไม แต่ผมใส่ตามตัวอย่างใน facebook (ฮา) จะขออธิบาย parameter เรียงตาม code จากบนลงล่าง ซ้ายไปขวา ดังนี้

Tag <fb:request-form> - อันนี้เทียบได้กับ tag <form> ใน HTML ธรรมดาทั่วไปครับ

• action – URL หลังคลิก Invite แล้วจะไปที่ไหน
• invtie – ใส่เป็น True แล้วในรูปหมายเลข 5 จะแสดงคำว่า Invite แต่ถ้าไม่ใส่หรือใส่เป็น false ตรงส่วนรูปหมายเลข 5 นี้แหละส่วนอื่นๆ ที่มีคำว่า invite หรือ invitation จะแสดงคำว่า Request แทน (โดยหลักการทำงานแล้ว สองแบบนี้แทบไม่แตกต่างกัน แต่ Invite จะจำกัดการใช้งานมากกว่า Request หรือเปล่าผมยังไม่แน่ใจ)
• type – ข้อความที่แสดงในรูปหมายเลข 1
• content – ข้อความที่แสดงในรูปหมายเลข 3 นอกจากนี้ยังใช้ใส่ปุ่มพิเศษเช่น tag <fb:req-choice> อีกด้วย (ต้องมีเสมอ ไม่งั้นคนใช้จะทำอะไรกับ invite ที่เราส่งไปไม่ได้นอกจากด Ignore ทิ้ง)
  • tag <fb:req-choice> – ซึ่งจะอยู่ใน content คือปุ่มที่แสดงในรูปหมายเลข 4 ครับ โดยจะมี parameter ย่อยเข้าไปอีกคือ
    • url – URL ที่ผู้รับ Invite ได้รับและกดปุ่มๆ นี้แล้วจะนำทางไปที่ไหน มักแอบใส่เลขผู้ invite ต่อท้าย URL ไปด้วย (ใน code คือ inviter_id) เพื่อที่เราจะได้ไป update ข้อมูลในฐานข้อมูลได้ว่าผู้ใช้คนใด invite ใครไป แล้วใครคนนั้นคลิก Accept ไปหรือยัง เป็นต้น
    • label – ข้อความที่แสดงในปุ่มที่อยู่ในรูปหมายเลข 4

tag <fb:multi-friend-selector> - อันนี้เทียบได้กับ selectbox แบบ multiple ใน HTML ทั่วไปครับ

• showborder – แสดงเส้นกรอบไหม
• actiontext – ข้อความที่แสดงในรูปหมายเลข 5
• cols – จำนวน friend ที่จะให้แสดงใน 1 แถว (มันคือคอลัมภ์ตามชื่อน่ะแหละ เป็นตัวกำหนดขนาดของกล่อง Invitation นี้)
• rows – จำนวนแถวของ friend ที่จะให้แสดง (เป็นตัวกำหนดขนาดของกล่อง Invitation นี้)
• exclude_ids – คือไม่ต้องแสดง friend ที่มี id ที่กำหนด เช่น ไม่ต้องการแสดง friend หมายเลข 55 และ 67 ให้ใส่เป็น “55,67″ มักใช้สำหรับป้องกันไม่ให้คนที่ส่ง Invite ไปหาใครแล้ว ส่ง Invite ซ้ำได้อีก
• bypass – อันนี้ใส่ cancel เพราะปกติมันจะมีปุ่ม Cancel ให้คลิกได้ครับ ใครอยากให้มันคงไว้ก็ไม่ต้องใส่ก็ได้

Facebook Popup (Javascript Client Library)

FB.ensureInit(function() {
FB.Connect.requireSession(function() {
FB_RequireFeatures(["XFBML"], function(){
var fbml = ‘bla bla bla’;
var dialog = new FB.UI.FBMLPopupDialog(‘Invite your friends to fight you!’, fbml);
dialog.setContentWidth(630);
dialog.setContentHeight(400);
dialog.show();
}
}
}

• ‘Invite your friends to fight you!’ – แทนตรงนี้ด้วย title ที่จะให้แสดงใน popup ได้เลย
• fbml – เป็นตัวแปร ตรงนี้ใส่ tag fbml ที่อยากให้แสดงเข้าไปได้เลยทุกอย่าง โดยไม่ต้องสนใจว่าจะเป็น iframe App หรือเปล่าก็ได้ สะดวกมากครับ
• dialog.setContentWidth(630); – เซ็ตความกว้างของ popup ตามชื่อเลยครับ
• dialog.setContentHeight(400); – เซ็ตความยาวของ popup ตามชื่อ
• dialog.show(); – สั่ง show popup โดยที่มันจะเซ็ตตัวเองให้อยู่ตรงกลางหน้าให้เองอัตโนมัติ

Invite Friend Popup (Javascript Client Library)

function show_invite_popup(inviter_id, exclude_ids) {
FB.ensureInit(function() {
FB.Connect.requireSession(function() {
FB_RequireFeatures(["XFBML"], function(){
var fbml = “<center><fb:fbml>  <fb:request-form action=’paoyingchup/invite’ method=’POST’ invite=’true’ type=’Pao Ying Chup hit Afro’ content=’This is an invitation to fight with me! <fb:req-choice url=\”http://apps.facebook.com/paoyingchup_afro/choose_weapon/” + inviter_id + “\” label=\”Accept and fight with me!\” />  ‘>  <fb:multi-friend-selector showborder=’false’ actiontext=’Invite your friends to fight you!’ cols=’4′ rows=’3′  exclude_ids=’” + exclude_ids + “‘ bypass=’cancel’>  </fb:request-form>  </fb:fbml></center> “;
var dialog = new FB.UI.FBMLPopupDialog(‘Invite your friends to fight you!’, fbml);
dialog.setContentWidth(630);
dialog.setContentHeight(400);
dialog.show();
})
})
})
}

อันนี้คือลูกผสมของสองอันข้างบนที่ผมนำมาใช้จริงครับ เขียนเป็น function javascript ให้เรียบร้อยพร้อม call ส่ง parameter สองตัวคือ inviter_id ผู้เชิญ และ exclude_ids คือกำหนดให้ไม่แสดง friend คนไหนบ้าง(เป็น string ครับ) จะสังเกตว่า title ของ popup ถูกแสดงในรูปหมายเลข 6

คำสั่งอื่นๆ ใน Facebook (PHP)

• $facebook->api_client->friends_get() – ขอเลข id ของ friend ทั้งหมดของ user ที่ login อยู่ขณะนั้น (ไม่ค่อยได้ใช้ เพราะมักจะเยอะเกินไป)
• $facebook->api_client->friends_getAppUsers() – ขอเลข id ของ friend ทั้งหมดที่ใช้งาน Application ของเราด้วย ของ user ที่ login อยู่ขณะนั้น (ใช้บ่อยสุด)
• $this->facebook->api_client->users_getInfo($user_id, $profile_data) – ขอข้อมูลส่วนตัวของ user ที่กำหนด สามารถขอพร้อมกันหลายๆ คน และหลายๆ อย่างได้เช่น $this->facebook->api_client->users_getInfo(’66,67,68′, array(‘first_name’, ‘last_name’, ‘locale’, ‘pic_square’, ‘profile_url’, ‘birthday_date’, ‘sex’)) เป็นต้น ดูรายละเอียดเพิ่มเติมเช่นมี field อะไรที่ร้องขอได้อีกบ้างได้ที่หน้านี้ (มีเยอะมากๆ)
• $facebook->api_client->notifications_send($user_id, $msg) – ส่ง notification จาก user ที่ login อยู่ไปยัง $user_id ที่กำหนดด้วย $msg ที่กำหนด (Notification คือข้อความ Alert ที่มุมขวาล่างข้างๆ Chat)

ในที่สุดก็เสร็จไปอีกหนึ่งบท ฮาๆๆๆ ยังเหลืออีกอันคือ Publish ลง Wall ซึ่งมีขั้นตอนที่ซับซ้อนวุ่นวายพอสมควร ต่อคราวหน้าละกันครับ