ปุ่มถูกใจ บนหน้าเว็บ ด้วย XFBML
การนำปุ่มถูกใจ ของ Facebook มาปิดไว้บนหน้าเว็บของเรา ทำให้เว็บเป็นเว็บสังคม ที่ทำให้ผู้ใช้มีส่วนร่วมแสดงความคิดเห็น และบอกต่อ เป็นก้าวหนึ่งในการทำให้ข้อมูลข่าวสารแพร่กระจายไปสู่คนอื่น ๆ ตัวอย่าง ปุ่ม ถูกใจ
หรือดูตัวอย่าง ปุ่ม ถูกใจ ที่ใช้งานจริง ที่เว็บของ สถาบัน กศน.ภาคกลาง
ปุ่มถุกใจ สามารถทำได้ 2 วิธี คือ
การใช้ XFBML ทำอะไรได้มากกว่าการใช้ Iframe แต่ต้องเรียกใช้ JavaScript SDK และ ต้องกำหนดให้หน้าเว็บเป็น application ของ Facebook ซึ่งทำได้ไม่ยาก
วิธีการสร้าง ปุ่มถูกใจ ด้วย XFBML มีดังนี้
อ้างอิง
http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/
หรือดูตัวอย่าง ปุ่ม ถูกใจ ที่ใช้งานจริง ที่เว็บของ สถาบัน กศน.ภาคกลาง
ปุ่มถุกใจ สามารถทำได้ 2 วิธี คือ
- ใช้ Iframe
- ใช้ XFMBL (Extended Facebook Markup Language)
การใช้ XFBML ทำอะไรได้มากกว่าการใช้ Iframe แต่ต้องเรียกใช้ JavaScript SDK และ ต้องกำหนดให้หน้าเว็บเป็น application ของ Facebook ซึ่งทำได้ไม่ยาก
วิธีการสร้าง ปุ่มถูกใจ ด้วย XFBML มีดังนี้
- กำหนดให้หน้าเว็บเป็น Application ของ Facebook ซึ่งจะทำให้หน้าเว็บสามารถใช้ JavaScript SDK ได้ และจะได้รับหมายเลข ID สำหรับระบุว่าเป็นเว็บของเราต่อไปก่อนอื่น ต้องเป็นสมาชิกของ Facebook และ Login เข้าสู่ระบบของ Facebook เสียก่อน ไปที่ หน้า Create an Application กรอกชือเว็บ URL และ สถานที่ แล้วคลิกปุ่ม Create Application เมื่อเสร็จแล้ว จะได้หมายเลข ID ดังภาพ
- เพิ่มการประกาศในส่วนหัวของเว็บเพจที่จะนำปุ่มถูกใจไปแสดง โดยเพิ่มในส่วนของ <html> ดังโค้ดข้างล่างนี้
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
- เพิ่มข้อมูลในส่วนของ <meta> ดังนี้
<meta property="fb:admins" content="ชื่อ login เข้าระบบ Facebook ของท่าน"/>
<meta property="fb:app_id" content="รหัสที่ได้จากขั้นตอนที่แล้ว" />
<meta property="og:title" content="ระบุชื่อเว็บ" />
<meta property="og:url" content="ระบุ URL ของเว็บ" />
- ณ ตำแหน่งที่ต้องการให้แสดงปุ่มถูกใจ ให้คัดลอกและวางโค้ดต่อไปนี้
<div style="width:152px;">
<fb:like action='like' colorscheme='light' layout='standard' show_faces='true' width='500' height=150px/></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'ระบุหมายเลข 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>
</div>
- ถ้าต้องการแสดงเฉพาะปุ่มอย่างเดียว ไม่มีตัวเลขจำนวนคลิก ให้กำหนดขนาดความกว้างยาวของ div เป็น 52 เท่ากับความยาวของปุ่ม พร้อมทั้งกำหนดให้ซ่อน overflow ในส่วนตัวเลือก fb:like กำหนดเฉพาะ layout อย่างเดียว
วิธีที่ง่ายที่สุดคือ คัดลอกโค้ดข้างล่างนี้ไปแทนที่ บรรทัด 2 บรรทัดแรก ซึ่งเป็นส่วน div และ fb:like ดังนี้
<div style="width:52px;height: 25px;overflow:hidden;">
<fb:like layout="button_count"></fb:like>
จะเห็นเฉพาะปุ่ม ถูกใจ ดังตัวอย่าง (จากเว็บของ สถาบัน กศน.ภาคกลาง หน้าที่ 2)
อ้างอิง
http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/
ความคิดเห็น
แสดงความคิดเห็น