5 ขั้นตอนการทำ Realtime Facebook Live reaction คอนเทนต์

ช่วงนี้ Facebook Live ได้รับความนิยมสูงมาก แค่มีโทรศัพท์เครื่องเดียวต่อเนตก็สามารถ Live ได้แล้ว แต่ช่วงหลังมานี้เราจะเริ่มเห็น Live ที่อลังการมากขึ้น เช่น Live สด 2 กล้อง มีตัวหนังสือวิ่ง และล่าสุดใส่ตัวเลข Facebook Reaction (รูปไลก์, หัวใจ, ร้องไห้, หน้ายิ้ม) แบบสดๆ บนคอนเทนต์ที่เรา Live ได้แล้ว

• บทความนี้จะแนะนำขั้นตอนการสร้างคอนเทนต์ Realtime Facebook Live reaction (ตัวอย่างคอนเทนต์ด้านบน) ถ้าไม่เห็นภาพ ลองกดเข้าไปเล่นที่คอนเทนต์นี้ดูครับ
• บทความนี้ผมได้นำข้อมูลและไฟล์การทำคอนเทนต์มาจากเว็บ Socialwall.me ซึ่งผมได้ทำการปรับปรุงและอัพเดทข้อมูลให้เหมาะสมกับคนไทยมากขึ้น

คำแนะนำสำหรับบทความนี้ คุณต้องมีสกิลการเขียน/อ่าน โค้ด HTML และ CSS เบื้องต้น

1.เตรียมข้อมูลให้พร้อม

ขั้นตอนแรกสิ่งที่เราต้องเตรียมมีทั้งหมด 5 ส่วนด้วยกันไล่ไปทีละหัวข้อนะครับ

1. Index.html (หน้าแรกที่เป็น Layout สำหรับ Live)
2. Logo – Logo ที่เราต้องการจะโชว์เวลา Live
3. Background – พื้นหลังที่จะใช้ตอน Live
4. Emoji (Like, Love, Haha, Sad) – ไอค่อนรูปเดียวกับ Facebook reaction
5. Script – โค้ดสำหรับดึงค่า Facebook reaction มาโชว์แบบ Real-time

โชคดีสำหรับคนที่ไม่ค่อยมีความรู้เรื่องการเขียนโปรแกรมอย่างผมทางเว็บ Socialwall.me ให้ทำไฟล์สำหรับการทำคอนเทนต์ประเภทนี้ไว้ให้เรียร้อยแล้ว (ครบทั้ง 5 ข้อ)

สิ่งที่เราต้องทำคือ Download ไฟล์ และเปลี่ยนข้อมูลใน Index.html, Logo, Background

ผมได้ปรับแก้ไฟล์ต้นฉบับของ Socialwall.me นิดหน่อยโดยเพิ่มภาษาไทยเข้าไปในไฟล์ Index.html สำหรับใครที่ไม่ถนัดภาษาอังกฤษก็โหลดไฟล์ของผมไปแทน

Download ไฟล์ต้นฉบับ
Download ไฟล์ปรับปรุงเพิ่มภาษาไทยโดย mewSocial 

2.หา Facebook Access Token

ขั้นตอนนี้จะเป็นขั้นตอนการหาค่า Facebook Access Token ซึ่งของแต่ละคนจะไม่เหมือนกัน ก่อนที่จะหาค่านี้ได้เราจะต้องสร้าง Facebook App ขึ้นมาก่อน

• เข้าไปที่ https://developers.facebook.com/apps
• Add New app เลือก Website
• ใส่ชื่อ Facebook App ที่เราต้องการ
• กรอก Email  เลือก Categories เป็น App for Pages

หลังจากสร้างเสร็จขั้นตอนนี้จะเป็นการหา Facebook Access Token

• ไปที่ https://developers.facebook.com/tools/explorer/
• ตรง Graph API Explorer : Application: [?] เลือกเป็นแอพที่เราเพิ่งสร้างเมื่อกี้
• คลิก Get Token > Get User Access Token ให้เลือก user_videos  แล้วคลิก Get Access Token
• Copy ตัวอักษายาวๆ ในช่อง Acess Token ไปใส่ในไฟล์ Index.html บรรทันที่ 105

3.เซตอัพ Facebook Live

ขั้นตอนนี้เป็นการเซตคอนเทนต์ Facebook Live บนหน้าเพจที่เราต้องการ Live โดยให้เราไปที่เมนู Publishing Tools เลือกหัวข้อ Video Library และเลือก +LIVE

Copy Stream Key ไว้เพื่อนำไปใส่โปรแกรมสำหรับ Live Stream แล้วกด Next

Stream Key สำหรับ Live 1 Key ต่อ 1 คอนเทนต์ และระยะเวลาของ Key จะอยู่ที่ 24 ชั่วโมง หรือต่อการ Live 4 ชั่วโมงเท่านั้น

ขั้นตอนนี้เป็นการเตรียมคอนเทนต์สำหรับโพสต์ไปยังหน้าเพจ ให้เราเซตทุกอย่างให้เรียบร้อยเพื่อเตรียม Live (แต่อย่าเพิ่งกด Go Live)

4.ปรับแต่งโปรแกรม Livestream

ขั้นตอนนี้เป็นการติดตั้งโปรแกรม Livestream ซึ่งผมใช้โปรแกรมชื่อ OBS โดยผมจะใช้ OBS Stream วิดีโอจากคอมพิวเตอร์เพื่อยิงไปยัง Facebook เพจที่เรากำหนด (ข้อ 3)

1. ดาวน์โหลดโปรแกรม OBS (โปรแกรม Livestream ฟรี opensouce)
2. หลังจากติดตั้งเสร็จแล้วเปิดโปรแกรมขึ้นมาจะเจอจอดำๆ ให้เราข้ามไปกดที่ Setting ก่อน
3. เมนู Setting เลือกไปที่ Stream ให้เราเซตค่าตามนี้
   • Stream Type เลือก “Streaming Service”
   • Service เลือก Facebook Live
   • Server เลือก Default
   • Stream Key นำโค้ดที่ก็อปมาจากข้อสามมาใส่
4. คลิก Apply เป็นอันเสร็จการตั้งค่า

ขั้นต่อไปเป็นการเซตหน้าจอ Livestream ที่จะเปลี่ยนจากจอดำๆ ให้เป็นคอนเทนต์ที่เราจะโพสต์ โดยเลือกเมนู Sources คลิกเครื่องหมาย + เลือก BrowserSource

สร้างชื่อ Source สำหรับ Stream

ขั้นตอนนี้จะเป็นการเรียกไฟล์ Index.html (ที่เราได้โหลดมาตอนแรก) โดยติ๊กที่ Local File แล้วกด Browse เพื่อเลือกไฟล์ index.html กด OK

จากหน้าจอดำๆ ตอนนี้กลายเป็นคอนเทนต์ที่พร้อม Facebook Live แล้ว (ถ้าดูแล้วยังไม่ชอบสามารถปรับแก้ Logo, Background, Font ที่ไฟล์ index.html ได้เต็มที่)

หลังจากปรับแต่งเรียบร้อยแล้วกด “Start Streaming” ได้เลย

5.Publish สู่สาธารณะ

ขั้นตอนนี้เป็นขั้นตอนสุดท้ายคือการ Publish คอนเทนต์เพื่อ Live หรือถ่ายทอดสดนั้นเอง โดยให้เรากลับไปที่คอนเทนต์ที่เตรียมไว้ (ข้อ 3) แล้วทำการกด GO LIVE ได้เลย!

แต่คอนเทนต์เราจะไม่มีค่า Facebook Reaction แบบ Realtime

เราจำเป็นต้องเก็บค่า POST ID หรือตัวเลขเฉพาะของคอนเทนต์ Live ของเราเพื่อทำการกรอกค่านี้ที่ไฟล์ Index.html (บรรทัดที่ 106) เพื่อเช็คค่า Facebook Reaction ว่ามีคนกด Like, Love, Haha, Sad แบบ Real-time นั้นเอง

วิธีการหาค่า POST ID ง่ายๆ เพียงแค่ไปที่โพสต์ Live ของเรา เอาเมาส์ไปชี้ที่เวลา คลิกขวาเลือก Copy Link แล้วนำ URL นั้นไปวางที่ Text editor หรือ Notepad จากนั้นให้เรา Copy ตัวเลขหลังสุดของ URL นั้นมา (เอาเฉพาะตัวเลข) แล้วนำตัวเลขที่ได้ไปกรอกที่ไฟล์ Index.html จากนั้นทำการ Refresh OBS Livestream ใหม่ (Double Click หน้าจอ OBS ที่กำลัง Live) คราวนี้เราจะเห็นตัวเลข Facebook Reaction บนคอนเทนต์แล้ว 🙂

ตัวอย่างเอาเฉพาะตัวเลขหลังสุดนี้ https://www.facebook.com/AppgameThailand/videos/1256553691033637

สรุปสาระสำคัญ

ไฟล์ Index.html บรรทัดที่ 105 (Access Token) และบรรทัดที่ 106 (POST ID) เพื่อแสดงค่า Realtime Facebook reaction

บทความนี้เป็นเพียงแค่วิธีการใช้งานเบื้องต้น คุณสามารถนำไปประยุกต์ใช้ได้อีกมากมาย และสุดท้ายต้องขอบคุณ Socialwall.me ที่ได้ทำไฟล์และ Scripts พร้อมใช้งานมาให้คนที่ไม่มีสกิลเขียนโค้ดอย่างผมได้มีลูกเล่นสนุกๆ

สุดท้ายถ้าใครอ่านแล้วยังไม่เข้าใจสามารถสอบถามได้ที่ Facebook Inbox เพจ mewSocial ได้เลยนะครับ