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

27
Aug
9

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

Invite Friend (FBML)

Facebook Invite1
Facebook Invite2

<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)

Facebook Invite1

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

Enjoy this article?

Consider subscribing to our RSS feed!

9 Comments

  1. oarvoodoo
    23:37 on August 27th, 2009

    สู้ๆครับ รอติดตามอยู่ครับ กำลังสนใจ

  2. takky
    14:22 on September 21st, 2009

    ติดตามอยู่นะคะ บทความดีมากเลยค่ะ

  3. metha
    14:34 on September 29th, 2009

    รับทำ app บน facebook ไหมครับ อยากจะโม Fanpage บน facebook นะครับ

  4. ปอ
    12:01 on September 30th, 2009

    ติดตามอยู่นะครับ รีบเขียนด่วน!! ฮ่าๆ

  5. nanami
    16:39 on February 26th, 2010

    มีแบบเป็นไฟล์แนบไหมครับ เขียนดูแล้วยังไม่ถูกครับ อยากได้แบบไฟล์ตัวอย่างจะดีมากเลยครับ

  6. Gel
    16:35 on August 18th, 2010

    สอบถามหน่อยค่ะ ใช้พวก popup calendar javascript จะต้องทำไงค่ะ เพราะลองแล้วไม่ได้ค่ะ รบกวนตอบหน่อยน่ะค่ะ

  7. kate007
    21:00 on March 22nd, 2011

    อ่านต่อมากจาก ตอนที่ 1 ค่ะ กำลังเข้าทางเลยค่ะ

Leave a comment

RSS feed for comments on this post