ใส่ Facebook comment box ในเว็บแบบมีเมล์แจ้งเตือน
Nov 2nd
บทความนี้สำหรับผู้ที่มีเว็บเป็นของตัวเองและมี facebook fanpage เรียบร้อยแล้ว สามารถนำปลั๊กอินต่างๆของ FB มาแปะที่เว็บตัวเอง เช่น กล่องด้านขวาของเว็บนี้ก็เป็น ปลั๊กอินที่ชื่อ like box ทำง่ายๆแค่ เข้าไปที่หน้านี้
http://developers.facebook.com/plugins
เลือก Like box แล้วระบุ url ของ FB fanpage ของเรา ใส่ค่าต่างๆตามต้องการ กด get code ก็เอาโค้ดมาแปะได้แล้ว
หรือจะเป็นปลั๊กอินที่ชื่อ Recommendations ก็ทำแบบเดียวกัน เอาไว้แสดงบทความของเราที่คนกด like หรือเอาไปแชร์ใน FB มากที่สุด
แต่วันนี้ที่เราจะพูดถึงคือตัว Comments ที่เอามาใส่ยากหน่อย ตัว comments box นี้หน้าตาเป็นอย่างไร ลองดูได้ที่ ตรงกลางด้านล่าง
http://www.toysmile.com/pig-rabbit-plush-35-cm-sound-record
ซึ่งผมเอามาแทนที่ตัว comments เดิมๆ เพราะว่าคนที่คอมเม้นจะแสดงคอมเม้นและลิ้งค์ของหน้าเว็บเราไปที่ FB ของคนที่คอมเม้นได้เลย (ต้องไม่เอาติ๊ก..Post comment to my Facebook profile.. ออก) มาดูขั้นตอนการทำได้เลย
วิธีใส่ facebook comments
1. ล็อกอิน facebook
2. ไปที่ http://developers.facebook.com/setup/
3. ใส่ Site name ใส่ Site URL
4. คลิก Create application
5. ใส่คำยืนยันป้องกันแสปม
6. คุณจะได้รับ App ID และ โค้ดตัวอย่างการใช้งาน จะเซฟหน้านี้เก็บไว้เลยก็ได้ครับ
โค้ดตัวอย่าง
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Divland</title> </head> <body> <h1>Divland</h1> <p><fb:login-button autologoutlink="true"></fb:login-button></p> <p><fb:like></fb:like></p> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'Your App ID', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.src = document.location.protocol + '//connect.facebook.net/th_TH/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script> </body> </html>
7. จากนั้นไปที่ http://developers.facebook.com/docs/reference/plugins/comments ระบุค่าตามต้องการ
- Unique ID ถ้าคุณใส่ตัวคอมเม้นนี้ 1 อันต่อ 1 หน้า ก็เว้นว่างไว้ ถ้าใส่มากกว่า1อันก็ต้องระบุชื่อให้มันด้วย เช่น c1 c2
- ใส่จำนวนคอมเม้นที่จะให้แสดง
- ใส่ความกว้าง
- จากนั้นกด Get Code จะได้โค้ด
<div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script> <fb:comments width="425"></fb:comments>
8. นำโค้ดไปแปะตามตำแหน่งที่ต้องการ แก้ตรงคำว่า APP_ID เป็นหมายเลข App ID ของคุณ
9. เพิ่มโค้ดในส่วน Head นิดนึงเป็นอันใช้งานได้
เพิ่ม
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
เป็นอันเสร็จสำหรับการทำให้มี comments box ครับ แต่ว่า Facebook ไม่ได้ทำให้มีเมล์เตือน เวลามีคนมาคอมเม้น ดังนั้นเราจะแก้ไขเพิ่มเองดังนี้
วิธีทำให้มีอีเมล์แจ้งเตือนเวลามีคนคอมเม้น
1. นำโค้ดที่เราได้จากโค้ดตัวอย่างนี้ไปแทนที่ โค้ดคอมเม้นเดิมที่เราได้มา ใส่ หมายเลข App ID ของเราเข้าไปเหมือนเดิม
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR APP ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script> <fb:comments width="425"></fb:comments>
2. เพื่อให้รู้ว่าคอมเม้นมาจากหน้าไหน url อะไร จะต้องเพิ่มโค้ดดังนนี้
<fb:comments width="425" xid="1234" title="My page title" url="http://example.com/news/1234" notify="true"></fb:comments>
เช่น ถ้าคุณใช้ wordpress จะเป็นรูปแบบนี้
<fb:comments width="425" xid="<?php the_ID(); ?>" title="<?php the_title(); ?>" url="<?php the_permalink(); ?>" notify="true"></fb:comments>
3. ดาวน์โหลดไฟล์ php นี้แล้วอัพขึ้น server Download the PHP file
4. แทรกโค้ดสำหรับส่งเมล์ ดังนี้
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR APP ID', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); /* --- แทรก ส่วนนี้ Email Notifications begin --- */ // Send to email -เมล์ที่จะให้ส่งไปเวลามีคนคอมเม้น // var cn_sendtoemail = 'admin@example.com'; // From Name - จากใคร // var cn_fromname = 'My site name'; // From Email - อีเมล์ที่ใช้ส่งใส่เหมือนด้านบนก็ได้ // var cn_fromemail = 'info@example.com'; // Subject - เปลี่ยน subject ของเมล์ (default is 'false') // var cn_subject = 'false'; // Title - เปลี่ยน title (default is 'false') // var cn_title = 'false'; // SendPHP path - the path to the PHP file ใส่ path ของ php ที่เราอัพขึ้นไปให้ถูกต้อง// var cn_path = 'CommentsboxEmailNotifications.php'; commentsEmailNotifications(cn_sendtoemail,cn_fromname,cn_fromemail,cn_subject,cn_title,cn_path); /* ---แทรก ส่วนนี้ Email Notifications end --- */ }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>
5. แทรกโค้ดในส่วน head ดังนี้
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://fbcomments-email-notifications.googlecode.com/files/CommentsboxEmailNotifications.js"></script>
6. เสร็จแล้วครับ ลองทดสอบดูครับไม่ยากเลย ^^
ข้อมูลจาก
http://forum.developers.facebook.net/viewtopic.php?id=74644
กำลังหาอยู่พอดีเลยครับ วิธีการทำ อยากอ่านดูครับแต่ยังไม่ทำหรอก:-?
@@thailandfreelancer
เอ..ผมก็ทำตามคุณทุกอย่าง ทุกขั้นตอนแล้ว แต่…ทำไมเมล์มันไม่เห็นส่งมาที่ชื่ออีเมล์ที่ผมตั้งไว้ใน code เลยล่ะครับ แต่ comment box FB ขึ้นมาใช้งานได้ตามปกติครับ อย่างไรก็ขอบคุณ คุณมากๆๆ ครับ เขียนละเอียดมากเลยครับ :) :) :d
@พ่อไก่อู
อ่อ..เจอแล้วครับ อยู่ในเมล์ขยะทั้งหมดเลย :-?
comment มันไม่สามารถ link กับหน้า facebook page ของเราได้หรือไม่ครับ
อย่างปุ่ม like มันก็ไปที่หน้า facebook page ของเราเอง
ผมทดลองตามที่บอกมาแต่มัมไม่ได้อย่างที่คิด
สิ่งที่อยากได้คือ
มีช่อง commentที่หน้าเวปเรา เมื่อมีคนเม้ม
มันจะไปขึ้นที่ หน้า facebook page และ หน้าเวปเราพร้อมกัน
ไม่ได้ครับ มันคนละจุดประสงค์กันครับ ตัว page ยังทำอะไรไม่ได้อีกมากเลยครับ คงต้องรอให้มันพัฒนาไปเรื่อยๆครับ ไม่แน่ในอนาคตอาจจะทำได้ก็ได้ ตอนนี้ผมก็อยากให้มี เมล์แจ้งเตือนเวลามีคนมาเม้นในเพจเหมือนกันครับ แต่ทำไม่ได้ ต้องอาศัยเลื่อนๆดูเอาเอง :)
ขอบคุณมากเลยครับ
ผมลองมั่วดูตั้งนานก็ทำไม่ได้ซักที
แล้วมีวิธีเปลี่ยนภาษาจากอังกฤษเป็นไทยป่ะครับ :”>
@heng
เปลี่ยนตรงไหนครับ
ภาษาใน comment box อ่ะครับ เช่นตรงที่บอกว่ามีคนกด like แล้วกี่คนอ่ะครับ ( e.g 8 people like this )
ผมเห็นในบางเว็บที่เค้าเอาไปแปะ คำพวกนี้มันจะเป็นภาษาไทยอ่ะครับ
วิธีเซ็ตน่าจะอยู่ตรง หัวข้อ Changing the Language: หน้านี้อะครับ http://forum.developers.facebook.net/viewtopic.php?pid=221601
ขอรบกวนถามอีกอย่างสิครับ ตอนนี้ผมจะได้รับเมล์แจ้งเตือนพอมีคนเข้าเม้นท์ ส่งตรงถึง inbox ที่ผมตั้งไว้ตามที่คุณแนะนำครับ (ขอบคุณมาก) โดยผมตั้งทั้ง sent to และ from to เป็นชื่ออีเมล์เดียวกัน อย่างที่คุณแนะนำเลยครับ
/* — แทรก ส่วนนี้ Email Notifications begin — */
// Send to email -เมล์ที่จะให้ส่งไปเวลามีคนคอมเม้น //
var cn_sendtoemail = ‘mye-mail@gmail.com’;
———————————————————-
// From Email – อีเมล์ที่ใช้ส่งใส่เหมือนด้านบนก็ได้ //
var cn_fromemail = ‘mye-mail@gmail.com ‘;
แต่แแปลกใจอยู่ว่า พอมันส่งมาทีไร ทำไมต้องส่งมาทีเดียว 2 ฉบับ ทั้งๆ ที่ ข้อความ/วัน/เวลาส่ง เหมือนกันทุกอย่าง เป็นอย่างงี้ทุกทีเลยครับ คือผมได้เมล์แบบ double ตลอดเลย (พอไปเช็ค inbox ใน Gmail ที่ไร แบบว่ามา 10 ต้องลบออก 5 ถ้ามา 20 ก็ต้องลบออก 10 เพราะซ้ำกันทุกที) ไม่ทราบว่า ผมตั้งอะไรผิดพลาดไปหรือเปล่าครับ..???
เป็นเหมือนกันครับ ของผมบางทีมา 4 บางที มา 2 ไม่รู้แก้ตรงไหนเหมือนกันพยายาม จนปลงแล้ว #:-s
ถ้าแก้ได้เมื่อไรบอกผมด้วยครับ :”>
หะๆ อ้าวเหมือนกันเหรอครับ ผมเองแก้ไม่เป็นหรอกครับ เพราะไม่มีความรู้พื้นฐานเรื่องภาษาสคริปเอาเสียเลย แต่เห็นคุณนำโค้ดนี้มาจากใน http://developers.facebook.com ไม่ทราบว่า เค้ามี forum แบบให้สอบถามเรื่องการแก้ปัญหา bug กันหรือเปล่าอะครับ..? นี่..ถ้าภาษาปะกิดผมแข็งแรงกว่านี้ ก็อาจจะส่งปัญหานี้ไปถามดูเองก็ได้ครับ
อย่างไรก็ขอบคุณมากนะครับ บทความคุณเป็นประโยชน์มาก โดยเฉพาะยังเป็นภาษาไทยแบบละเอียดซะด้วย <:-p
ลองใส่โค้ดแล้วใช้ได้ครับ เหมือนจะแฮปปี้เอนดิ้งแต่มาสะดุดตรงปุ่ม Like ครับ
คือกดไลค์แล้วมัน ‘Error’ ข้อความขึ้นอย่างนี้ครับ
The app ID specified within the “fb:app_id” meta tag is not allowed on this domain. You must setup the Connect Base Domains for your app to be a prefix of http://inatmon.com.
จะทำยังไงดีครับ:((
ต้องแก้ที่ตัว app_id ของคุณนะครับ ตามที่ข้อความบอกมา
ผม ลองแล้ว คับ เจอปัญหา
ตอนใส่ URL website แล้ว errer
Validation failed.
URL must point to a directory (i.e., end with a ‘/’ or a dynamic page (i.e., have a ‘?’ somewhere).
บาง URL ก็ใช้ได้ ผมลองใช้ http://www.zalengedition.com แล้วไม่ได้ ใครเป็นเหมือนผม บ้าง
xid=”1234″ คืออะไรอ่ะครับ
id ที่ระบุว่า คอมเม้นมาจากหน้าไหน เช่น ถ้าคุณไปแปะหน้าที่ 1 ก็ใส่ xid=”1″ พอไปแปะหน้าที่ 2ก็ใส่ xid=”2″
ทำยังไงถึงจะได้ App ID คะ
มีข้อความขึ้นว่า
Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card.
เย้ๆ ตอนนี้ได้ App ID แล้วค่ะ หลังจากที่ใส่แล้วใส่อีกอยู่หลายที
ขอบคุณคับ
ทำไมมันไม่ได้ app id หรอคะ กดไปแล้วเจอแต่แบบนี้
Your account must be verified before you can take this action. Please verify your account by adding your โทรศัพท์มือถือ or credit card.
เค้าบอกให้ยืนยันตัวตนของ FB ส่วนตัวของคุณก่อนด้วยการใส่เบอร์โทรศัพท์ครับ
ถามนิดนึงครับ หากมีหลาย page แล้วไม่มีวิธีไหนเอา curent url ยัดใส่ไปไหมครับใน url ที่ส่งไป email
ขอบคุณมากๆครับ บทความดีมาก
เช่นใส่ พวก java url={location.href} มันจะไม่ทางยอมไหมครับ
ขอรบกวนถามอีกสักหน่อยนะครับ รู้สึกว่าทาง FB จะมีการเปลี่ยนแปลงสคริปใหม่ (ช่วง 2-3 เดือนนี้เอง) ทำให้ comment box มีหน้าตาเปลี่ยนไปจากเดิม และโค้ดเก่าที่คุณลงสอนไว้ในโพสนี้ ไม่สามารถใช้ได้แล้วอ่ะครับ (คือไม่มีเมล์แจ้งเตือน อย่างที่เคยส่งมาเหมือนเมื่อก่อนอีกแล้ว) อยากทราบว่า จะสามารถปรับปรุงสคริปใหม่อย่างไรครับ เปลี่ยนโค้ดตรงไหน จุดใดบ้าง เพื่อให้รับกับโค้ดที่ถูกพัฒนาใหม่ของ FB และให้สามารถรับเมล์แจ้งเตือนได้อย่างเดิมครับ
ขอรบกวนสอบถามอีกครั้งนะครับ ระบบ FB comment มีการเปลี่ยนสคริปใหม่ (2-3 เดือนที่ผ่านมา ช่วงปลายปี 2011 ทำให้หน้าตาเปลี่ยนแปลงไปหลายจุดเลย) ทำให้โค้ดเดิมที่คุณลงสอนไว้…ในนี้ ใช้ไม่ได้อีกเหมือนเดิมอ่ะครับ ไม่ทราบว่าต้องเปลี่ยนตรงไหนบ้างครับ เพื่อให้กลับมาใช้งาน และรับเมล์แจ้งเตือนได้เหมือนเดิม ขอบคุณมากครับ….
@พ่อไก่อู
ไปตามลิ้งค์นี้ครับ เค้ามีวิธีปรับแก้เวอชั่นใหม่ไว้แล้วครับ
http://forum.developers.facebook.net/viewtopic.php?id=74644
@Utto
ขอบคุณครับ เดี๋ยวขอลองดูก่อน แต่ถ้าเจอปัญหา…จะขอรบกวนสอบถามด้วยนะครับ
ทดลองเปลี่ยนตามในฟอรั่มที่คุณ Utto ลิงก์แนะนำแล้วครับ แต่ยอมรับว่าโง่มาก คือไม่มีความรู้ด้านเขียนโปรแกรมอะไรเลย ได้แต่ก๊อปๆ ตาม แล้วเลือกๆ ดูตามบรรทัดที่น่าจะคล้ายๆ กันเท่านั้น แต่ Comments-box Email Notifications v2.1 เวอร์ชั่นใหม่นี้ มีโค้ดหลายตัว ที่ไม่ตามอย่างในตัวอย่างที่คุณสอนในนี้เลยครับ เรียกได้ว่าแทบจะต้องรื้อกันใหม่หมด (อันนี้ไม่ทราบจริงๆ นะครับ ถ้าผิดขออภัยด้วย) ผมได้ทดลองโพสกับหน้าเพจใหม่แล้วครับ ก็พอกล้อมแกล้ม แต่ไม่มีเมล์อะไรส่งกลับมาเตือนสักฉบับ (ไม่เหมือนของเดิมที่คุณสอนไว้) และได้ทดลองเปลี่ยนจากของเก่า (หน้าเพจเก่า) เป็นเวอร์ชั่นใหม่ แต่พอใส่ค่า xid=” ” ในส่วนของ <fb:comments ด้วยตัวเลขอันเดิม แต่เม้นของเก่าดันไม่ยอมกลับคืนมา แต่…ดันไม่ดึงเอาเม้นในหน้าที่เพิ่งทำเสร็จ แล้วเพิ่งโพสใหม่เสียนี่ ตอนนี้งงเป็นไก่ตาแตกเลยครับ ไม่รู้จะแก้ไงดี….??? อีกอย่างอ่านภาษาปะกิดไม่ค่อยแตก ก็ได้แต่คลำๆ ไปล่ะครับ
แล้วคุณ Utto ลองเปลี่ยนเป็นเวอร์ชั่นใหม่แล้วหรือยังครับ พบปัญหาคล้ายกันมั้ยครับ?
@พ่อไก่อู
@พ่อไก่อู
@Utto
OK แล้วครับคุณ Utto หลังจากมั่วไปมั่วมาจนได้ที่ ก็สำเร็จจนได้ รู้สึกเมล์แจ้งเตือนแบบใหม่เค้าจะดีกว่าเดิมอยู่หลายขุมนะครับ เพราะคราวนี้มีข้อความของผู้โพส รูปภาพ และลิงค์ต่อไปที่ FB developer ของเราได้ด้วย แต่…..ถ้าเกิดเปลี่ยนเป็น FB v.3 ใหม่ ไม่ต้องมานั่งแก้กันหูตูบอีกเหรอเนี่ย.??? (ฮา) แต่คอมพ์นี่ ต้องยอมรับว่าต้องวิ่งตามไปเรื่อยๆ จริงๆ…..ครับ 0_O” (^.^)/*