เมื่อวานที่บริษัทมีแนวความคิดอยากจะทำอะไรอย่างหนึ่งกับปุ่ม Like ที่เราเอามาติดในเว็บไซต์ ประมาณว่า เมื่อคลิกปุ่ม Like แล้วให้นำเอาจำนวนคนคลิก Like มาคำณวนเป็นค่าเงินแสดงในเว็บ
ถ้ามีคนคลิก Like เราจะบริจาคเงินให้องค์กรการศุกล Like ละ 1,000 คลิกจึ๋งเดียวหนึ่งพันบาทครับพี่ท่าน
ทีนี้ปัญหามันอยู่ที่เราจะจับอีเว้นต์มันได้ไงว่าเมื่อไรคนคลิก ( เราอยากได้การคำณวนแบบสดๆอะครับ คลิกปุ๊บคำณวนเงินเลย )
ลองดูเดโมกันก่อนดีมั้ย Demo ในเดโมผมแสดงไว้เฉพาะวิธีการจับเหตุการณ์การคลิกปุ่ม กด Like ปุ๊บ ผมให้แสดง alert ขึ้นมา
ถ้าใครคิดจะทำบ้าง ก็เขียนโค้ดเข้าไปแทน alert ผมนั่นแหละ
ก่อนอื่นมันก็ต้องมี Likebox ก่อน วิธีการมีคนอื่นเขียนไว้เยอะแยะแล้ว
- วิธีการสร้างโค้ด Likebox จากเว็บ maahalai.com
- วิธีการสร้างโค้ด Likebox จากเว็บ jir4yu.me
- วิธีการสร้างโค้ด Likebox จากเว็บ teepakdd.com
ถ้ายังไม่พอใจก็หาเอาใน google นะครับ
โค้ดที่ผมใช้ใน Demo ทั้งหมดเป็นดังนี้
<html xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta charset="utf-8"> </head> <body> <fb:like-box href="http://www.facebook.com/select2webdotcom" width="292" show_faces="true" stream="true" header="true"></fb:like-box> <div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({ appId : '164430746956784', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse XFBML oauth : true //enables OAuth 2.0 }); FB.Event.subscribe('edge.create', function(href, widget) { // do something here alert('Hello me'); }); }; (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> </body> </html> |
ซึ่งมันเป็นโค้ดที่ใช้งานได้ดีรับรอง ท่านสามารถก้อปปี้ไปใช้ได้
แต่มีสิ่งที่จะต้องเปลี่ยนคือ
appId : '164430746956784' |
ให้ไปเป็น appID ของท่านเอง ไม่งั้นแล้วท่านเอาโค้ดผมไปรันแล้วจะงงแดก ว่าทำไมไม่เห็นมัน alert เหมือนอย่างใน demo เลย
และ
<fb:like-box href="http://www.facebook.com/select2webdotcom" width="292" show_faces="true" stream="true" header="true"> |
และจำเป็นจะต้องรันในเว็บไซต์จริงๆ ตรงตามที่ระบุไว้ตอนสร้าง appID ในเฟชบุก ไม่งั้นแล้วสคริปต์ของเฟชบุกมันจะไม่ยอมทำงานให้ เพราะมันจะคอยเช็กด้วยว่า ID ที่ระบุมานั้นและเว็บไซต์ที่กำลังรันสคริปต์อยู่ ตรงตามที่ได้ลงทะเบียนไว้หรือไม่
ผิดหน่อยเดียวกูไม่ทำ กูหยิ่ง
fern says:
10/08/2555 at 10/08/2555
ใช้ firefox แล้วเจอ error ช่วยทีค่ะ
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย says:
13/08/2555 at 13/08/2555
ไม่เกี่ยวกับ firefox ครับ แสดงว่าโค้ดผิดครับผม ใช้ firebug ดีบักดูครับ ถ้ายังไม่เคยใช้ firebug หาบทความในเว็บนี้แหละครับ ผมเขียนวิธีการใช้งานไว้แล้ว
fern says:
14/08/2555 at 14/08/2555
ขอบคุณค่ะ จะลองใช้ดูค่ะ แต่โค้ด ของคุณ วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย หากก๊อปปี้ไปเลยทั้งแผง เปลี่ยนแค่ App Id แล้วยังต้องมีอะไรเพิ่มเติมอีกหรือป่าวคะ คือ ทดลองแล้วมันไม่ขึ้นอะไรเลยค่ะ แต่หากเปลี่ยน ท่อนนี้
(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);
}());
มาเป็น
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “https://connect.facebook.net/en_GB/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
ทำงานได้แค่บน Chrome บน firefox เจอ error ค่ะ มีวิธีแนะนำมั้ยคะ
ขอบคุณค่ะ
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย says:
14/08/2555 at 14/08/2555
เอ … หรือเฟชบุกมันเปลี่ยนโค้ดของมันอีกแล้ว เฟชบุกนี่เวลาเปลี่ยนโค้ดไม่ค่อยจะบอกชาวบ้านเท่าไร