เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) (4) by heha
30
Nov5
Nov5
ต่อจากคราวที่แล้ว เริ่มต้นกับการเขียน Facebook Application สำหรับผู้เริ่มต้น (PHP) (3) มาครั้งนี้ขอแนะนำ Facebook Connect function สำหรับ publish ลง wall ครับ ตัวนี้เป็น code ตัวใหม่สำหรับ publish ลง wall ก่อน code เก่าจะเลิกใช้งานในเดือนธันวานี้(แบบเก่าที่ต้องสร้าง Template ก่อนใช้งาน)
FB_RequireFeatures(["XFBML"], function() {
FB.init(FB_API_KEY, BASE_URL+”assets/xd_receiver.htm”);
FB.Connect.requireSession();
});
try {
//FB_RequireFeatures(["CanvasUtil"], function() {
FB_RequireFeatures(["XFBML"], function(){
FB.ensureInit(function() {
FB.Connect.requireSession(function() {
FB.Connect.streamPublish(user_message, attachment, actionLinks, targetId, prompt, callback);
})
})
});
}catch(e){};
FB.init(FB_API_KEY, BASE_URL+”assets/xd_receiver.htm”);
FB.Connect.requireSession();
});
try {
//FB_RequireFeatures(["CanvasUtil"], function() {
FB_RequireFeatures(["XFBML"], function(){
FB.ensureInit(function() {
FB.Connect.requireSession(function() {
FB.Connect.streamPublish(user_message, attachment, actionLinks, targetId, prompt, callback);
})
})
});
}catch(e){};
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 เต็มๆ ที่ผมใช้มีดังนี้
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'}],
‘name’: ‘You got new creatures in Planet!’,
‘href’: ‘http://apps.facebook.com/lvup_planet’,
‘caption’: ‘Join us and find your favourite creatures in Planet’
};
‘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'}],
‘name’: ‘You got new creatures in Planet!’,
‘href’: ‘http://apps.facebook.com/lvup_planet’,
‘caption’: ‘Join us and find your favourite creatures in Planet’
};
และนี่คือรายละเอียดทั้งหมดของการ Publish ลง wall ครับ ส่วนนี้จำเป็นมากๆ ต่อ Viral Marketing เป็นช่องทางหนึ่งที่ได้ผลดีที่สุดมากกว่า invite friend กันตรงๆ หรือการส่ง notification เสียอีก หากออกแบบรูปที่ publish ลง wall ให้เด่นสะดุดตาแล้วจะมีผู้เล่นคลิกมาเล่น app มากมายผ่านทาง wall สิ่งที่จะตัดสินชะตา app เราก็คือรูปๆ แรกก่อนคลิก See More นี่แหละครับ ส่วนช่องทางโปรโมทที่ได้ผลอีกทางที่เหลืออยู่คือลง Ads นั่นเองแหละครับ ขอให้ทุกคนโชคดีกับการทำ app บน facebook นะครับ
Enjoy this article?
Consider subscribing to our RSS feed!
12:55 on January 6th, 2010
น่าสนใจครับ
ใจจริงอยากได้ไปประยุกต์เข้ากับเวปบอร์ดของตัวเองมากกว่า
ประมาณว่าโพสต์ในบอร์ดของตัวเองแล้วข้อความไปโพล่ใน Fackbook ด้วยเพื่อทราบความเคลื่อนไหว
พอจะมีวิธีไหมครับ ?
ปล. ขอบคุณที่นำความรู้มาแบ่งปันครับ
14:46 on June 29th, 2010
ไม่ทราบว่า พอจะแนะแนวการเขียนด้วย C# ได้บ้างมั้ยค่ะ
17:05 on July 30th, 2010
อยากทราบว่า ถ้าต้องการให้ php แสดงเฉพาะชื่อเพื่อนที่เล่น app จะต้องทำยังไงค่ะ (เหมือนกับ playfish อะค่ะ)
21:48 on March 1st, 2011
ขอบคุณนะครับ กำลังหาอยู่เลย มีเมลไหมครับ เผื่อจะเมลไปขอคำปรึกษาน่ะครับ
00:05 on September 26th, 2015
It’s really great that people are sharing this inrofmation.