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

ต่อเนื่องจากคราวที่แล้ว หัวข้อ เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) (2) คราวนี้จะเป็นการแนะนำ function การใช้งานที่ใช้บ่อยๆ สรุปให้ครับ

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 ซึ่งมีขั้นตอนที่ซับซ้อนวุ่นวายพอสมควร ต่อคราวหน้าละกันครับ