ดึง Facebook Comment ที่ต้องการมาแสดงใน OBS Studio

สวัสดีครับ ปกติเวลาเราอยาก Comment จาก Facebook Live ใน OBS มันจะแสดงทั้งหมด ไม่สามารถเลือก comment มาแสดงแบบ Ecamm Live หรือ Streamyard ได้ วันนี้เรามาลองทำการเลือก comment ที่น่าสนใจมาแสดงบน OBS กันครับ

ตัวอย่าง

1. ติดตั้ง Extension

เริ่มด้วยการติดตั้งตัว Extension กันก่อนนะครับ เปิด Google Chrome ขึ้นมาแล้วเข้าลิงก์นี้ครับ : https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa

กดปุ่ม Add to Chrome

กดปุ่ม Add extension ครับ

เมื่อติดตั้งแล้วให้กด Pin Extensions รูปเข็มฉีดยาสีเหลืองจะแสดงขึ้นมาครับ

2. ตั้งค่า Extension

ให้เราเปิด Facebook Fan page ขึ้นมา กดตรงรูปเข็มฉีดยาสีเหลือง แล้วกด Tab Javascript

คัดลอก Code นี้ไปใส่ในช่อง Javascript นะครับ

	/*facebook*/
	var added_css ='.UFIRow.UFIComment:after, ._4eek ._42ef:after, .l9j0dhe7.ecm0bbzt.dati1w0a.hv4rvrfc.e5nlhep0.lzcic4wl.btwxx1t3.j83agx80:after {content: "Copy";position: absolute;right: 1em;top: 0;text-transform: uppercase;font-size: .6em;background: #b1cbff;padding: .4em 1em;border-radius: 6em;color: #fff;line-height: 1;transition:all .3s;cursor:pointer}._4eek ._42ef:hover:after, .l9j0dhe7.ecm0bbzt.dati1w0a.hv4rvrfc.e5nlhep0.lzcic4wl.btwxx1t3.j83agx80:hover:after, .UFIRow.UFIComment:hover:after{background: #4267b2}';
	var style = document.createElement('style');
		if (style.styleSheet) {style.styleSheet.cssText = added_css} else
			{style.appendChild(document.createTextNode(added_css))}
		document.getElementsByTagName('head')[0].appendChild(style);

		data_to_send = [];
		
		document.addEventListener('click',function(e){
			if (e.target.classList.contains("_42ef")) {
				closestElement = e.target.closest("._4eek");
				input_data = closestElement.innerHTML;
				data_to_send = ["comment", window.location.hostname, window.location.href, input_data].join("|");
				navigator.clipboard.writeText(data_to_send);
			}
			if (e.target.classList.contains("l9j0dhe7")) {
				closestElement = e.target.closest(".l9j0dhe7.ecm0bbzt.dati1w0a.hv4rvrfc.e5nlhep0.lzcic4wl.btwxx1t3.j83agx80");
				input_data = closestElement.innerHTML;
				data_to_send = ["live video comment", window.location.hostname, window.location.href, input_data].join("|");
				navigator.clipboard.writeText(data_to_send);
			}
			if (e.target.classList.contains("UFIComment")) {
				closestElement = e.target.closest(".UFIRow.UFIComment");
				input_data = closestElement.innerHTML;
				data_to_send = ["live video comment - single video", window.location.hostname, window.location.href, input_data].join("|");
				navigator.clipboard.writeText(data_to_send);
			}
			
		 });

ทำการกด F5 เพื่อทำการ Refresh 1 ครั้งนะครับ ตรง Comment แต่ละ Comment จะมีปุุ่ม Copy สีฟ้าแสดงขึ้นมาครับ

หมายเหตุ : ถ้า Facebook ของท่านเป็นแบบ New layout ให้เปลี่ยนเป็น Classic layout ก่อนนะครับ

ตอนนี้เราได้ทำการตั้งค่า Extension ของฝั่ง Browser เสร็จเรียบร้อยครับ เราจะไปตั้งค่าฝั่ง OBS กันต่อเลยครับ

3. ดาวน์โหลด Dock

ดาวน์โหลด Source

https://github.com/studiokrause/obs-load-comments

เมื่อดาวน์โหลดมาแล้วให้ท่านทำการแตกไฟล์ออกมานะครับ

ทำการดับเบิ้ลคลิกไฟล์ dock.html และ browser_source.html บน Browser เพื่อทำการคัดลอก URL ไปใช้งานได้นะครับ อันนี้ตัวอย่าง Location ทั้ง 2 ไฟล์ของผมนะครับ

dock.html
C:/Users/ITOSEC/Desktop/obs-load-comments-master/dock.html

browser_source.html
C:/Users/ITOSEC/Desktop/obs-load-comments-master/browser_source.html

4. ตั้งค่า OBS Studio

เปิด OBS ขึ้นมาแล้วไปที่เมนู View -> Docks -> Custom browser docks นะครับ
ตั้งชื่อตรง Dock Name และนำ URL ของไฟล์ dock.html มาใส่ในช่อง URL ครับ

กด Apply แล้วจะมีหน้าต่าง Facebook Comment แสดงขึ้นมานะครับ

ต่อไปให้กด Add Source : Browser ขึ้นมา แล้วนำ URL ของไฟล์ browser_source.html มาใส่นะครับ

5. การใช้งาน

เลือก Comment ที่ท่านต้องการและกดปุ่ม Copy สีฟ้า

กด Paste ใน Dock Facebook Comment

กดปุ่ม Load ตัวอย่าง Comment จะแสดงขึ้นมา สามารถกด Reactions ที่อยากให้แสดงได้เลยนะครับ

กดปุ่ม Show ตัวอย่าง Template 1

ตัวอย่าง Template 2

ถ้าไม่ต้องการให้แสดงให้กดปุ่ม Hide และถ้าต้องการเริ่มใหม่ ให้กดปุ่ม Reload Panel นะครับ

เสร็จเรียบร้อยครับ สำหรับการเลือก Comment มาแสดงหรือปักหมุดใน Live ของเรา ขั้นตอนการติดตั้งอาจจะเยอะไปสักหน่อยนะครับ ถ้าต้องการแบบรวดเร็วแนะนำใช้งาน Ecamm Live หรือ Streamyard ดีกว่าครับ ^^


The best solutions usually aren’t free
Contact Us : m.me/pramuan.pao

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top