ข้ามไปที่เนื้อหาหลัก

ปุ่มถูกใจ บนหน้าเว็บ ด้วย XFBML

การนำปุ่มถูกใจ ของ Facebook มาปิดไว้บนหน้าเว็บของเรา ทำให้เว็บเป็นเว็บสังคม ที่ทำให้ผู้ใช้มีส่วนร่วมแสดงความคิดเห็น และบอกต่อ เป็นก้าวหนึ่งในการทำให้ข้อมูลข่าวสารแพร่กระจายไปสู่คนอื่น ๆ ตัวอย่าง ปุ่ม ถูกใจ


หรือดูตัวอย่าง ปุ่ม ถูกใจ ที่ใช้งานจริง ที่เว็บของ สถาบัน กศน.ภาคกลาง

ปุ่มถุกใจ สามารถทำได้ 2 วิธี คือ
  1. ใช้ Iframe
  2. ใช้ XFMBL (Extended Facebook Markup Language)
การใช้ Iframe เป็นวิธีที่ง่าย โดยไปที่ http://developers.facebook.com/docs/reference/plugins/like/ และกรอกข้อมูล URL ของเว็บ เลือกให้แสดงภาพของผู้คลิก กำหนดขนาด และอื่น ๆ เมื่อได้โค้ดแล้ว ให้นำมาวางในตำแหน่งที่ต้องการ

การใช้ XFBML ทำอะไรได้มากกว่าการใช้ Iframe แต่ต้องเรียกใช้ JavaScript SDK และ ต้องกำหนดให้หน้าเว็บเป็น application ของ Facebook ซึ่งทำได้ไม่ยาก

วิธีการสร้าง ปุ่มถูกใจ ด้วย XFBML มีดังนี้
  1. กำหนดให้หน้าเว็บเป็น Application ของ Facebook ซึ่งจะทำให้หน้าเว็บสามารถใช้ JavaScript SDK ได้ และจะได้รับหมายเลข ID สำหรับระบุว่าเป็นเว็บของเราต่อไปก่อนอื่น ต้องเป็นสมาชิกของ Facebook และ Login เข้าสู่ระบบของ Facebook เสียก่อน ไปที่ หน้า Create an Application กรอกชือเว็บ URL และ สถานที่ แล้วคลิกปุ่ม Create Application เมื่อเสร็จแล้ว จะได้หมายเลข ID ดังภาพ




  2. เพิ่มการประกาศในส่วนหัวของเว็บเพจที่จะนำปุ่มถูกใจไปแสดง โดยเพิ่มในส่วนของ <html> ดังโค้ดข้างล่างนี้

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:og="http://opengraphprotocol.org/schema/"
    xmlns:fb="http://www.facebook.com/2008/fbml">
  3. เพิ่มข้อมูลในส่วนของ <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 ของเว็บ" />
  4. ณ ตำแหน่งที่ต้องการให้แสดงปุ่มถูกใจ ให้คัดลอกและวางโค้ดต่อไปนี้

    <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>
  5. ถ้าต้องการแสดงเฉพาะปุ่มอย่างเดียว ไม่มีตัวเลขจำนวนคลิก ให้กำหนดขนาดความกว้างยาวของ 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/

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

อุปมา อุปไมย สำนวนการเปรียบเทียบ ของไทย

การเตรียมสอบ ก.พ. ภาค ก. เพื่อสอบบรรจุเข้ารับราชการ มีการทดสอบความสามารถทั่วไป มักจะมี
ข้อสอบที่เกี่ยวกับอุปมาอุปไมย  ข้อสอบมีลักษณะ ให้หาตัวเลือกที่มีความหมาย ความสัมพันธ์คล้ายคลึง หรือเหมือนกับที่โจทย์กำหนดให้มา  หรือเติมข้อความที่มีความหมายสอดคล้องกับคำอุปมาอุปไมยที่ยกมาให้ เป็นต้น ดังนั้น การเข้าใจความหมายของคำอุปมาอุปไมย จึงช่วยให้ทำข้อสอบได้ดียิ่งขึ้น

คำอุปมาอุปไมย หมายถึง ถ้อยคำที่เป็นสำนวนพวกหนึ่ง กล่าวทำนองเปรียบเทียบ ให้เห็นจริง เข้าใจแจ่มแจ้งชัดเจน และสละสลวยน่าฟังมากขึ้น การพูดหรือการเขียน นิยมหาคำอุปมาอุปไมยมาเติมให้ได้ความชัดเจนเกิดภาพพจน์ เข้าใจง่าย เช่น

คนดุ หากต้องการให้ความหมายชัดเจน น่าฟัง และเกิดภาพพจน์ชัดเจนก็ต้องอุปมาอุปไมยว่า “ดุ เหมือน เสือ”
ขรุขระมาก การสื่อความยังไม่ชัดเจนไม่เห็นภาพ ต้องอุปมาอุปไมยว่า “ขรุขระเหมือนผิวมะกรูด” หรือ “ขรุขระเหมือนผิวพระจันทร์” ก็จะทำให้เข้าใจ ความหมายในรูปธรรมชัดเจนมากยิ่งขึ้น

คำอุปมาอุปไมยที่ควรรู้จัก (พิมพ์คำ/ข้อความ แล้วกดปุ่ม "ค้นหา")

แนวข้อสอบ เงื่อนไขสัญลักษณ์

ครั้งที่แล้ว ได้แนะนำหลักการทำ ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ มา แล้ว ถ้าใครยังไม่ได้อ่าน ก็คลิกกลับไปอ่านได้
ความจริง ข้อสอบเงื่อนไขสัญลักษณ์ เป็นข้อสอบไม่ยาก ถ้าเข้าใจหลักการ และมีทักษะความชำนาญ ใจเย็น ๆ อย่าตื่นเต้น โดยเฉพาะการดูเครื่องหมายต่าง ๆ อย่าดูผิด เช่น เครื่องหมายมากกว่า (>) น้อยกว่า (<) เป็นต้น เพราะการแก้ปัญหาโจทย์เงื่อนไขสัญลักษณ์ หรือ inequality ก็คล้ายกับการแก้ปัญหาสมการโดยทั่วไป นั่นเอง คือ สามารถบวก ลบ คูณ หาร ด้วยจำนวนที่เท่ากัน ทั้งสองข้างของเครื่องหมายได้ กลับเศษเป็นส่วนได้ แต่ก็มีบางเรื่อง บางรายละเอียดที่แตกต่างกันบ้าง ซึ่งอ่านได้จาก ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ นะครับ ครั้งนี้ จึงเป็นการนำแนวข้อสอบ เงื่อนไขสัญลักษณ์ เพื่อนำมาฝึกทำให้เกิดทักษะความชำนาญ เพื่อจะได้ทำข้อสอบได้รวดเร็วขึ้น เพราะในห้องสอบ เวลาจัดได้ว่ามีค่ามาก ยิ่งทำเร็วและถูกต้อง ยิ่งดี คำสั่ง

เลือกตอบข้อ 1. ถ้าข้อสรุปทั้งสอง ถูกด้องหรือเป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 2. ถ้าข้อสรุปทั้งลอง ผิดหรือไม่เป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 3. ถ้าข้อ…

เทคนิคการทำ ข้อสอบ อนุกรม ของ ก.พ.

|ประเภทของอนุกรม เทคนิคการทำโจทย์เลข อนุกรม ข้อแนะนำเพิ่มเติม |


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


ประเภทของอนุกรม รูปแบบความสัมพันธ์ของตัวเลขอนุกรมเท่าที่พบบ่อย ๆ มีหลายประเภท เช่น

ก. อนุกรมเชิงเดี่ยว 

ได้แก่ชุดตัวเลขที่เป็นอนุกรมเพียงชุดเดียว เช่น
ค่าของตัวเลขเพิ่มขึ้นต่อเนื่องอย่างเป็นระบบ โดยการบวก หรือ คูณ ตัวเลขก่อนหน้า เช่น บวกด้วยตัวเลขที่เป็นค่าคงที่ เช่น    5   10   15   20   ...?...
บวกด้วยตัวเลขที่มีระบบ เช่น     1    2    5    10   ...?...
คูณด้วยค่าคงที่ เช่น   1   3   9   27   ...?...
มีทั้ง บวก ลบ คูณ หรือหาร สลับกัน เช่น บวกแล้วคูณด้วยค่าคงที่สลับกัน ดังตัวอย่าง  5   7    14   16  32   ...... มีการ บวก ลบ คูณ หรือ หาร ร่วมกัน เช่น  15   31   63   127   255  ...?...
ในตัวอย่างนี้ จะเห็นว่า ตัวเลขตัวแรกคูณด้วย 2 และบวกด้วย 1 จะได้ตัวเลขตัวถัดไป คูณด้วยค่าคงที่ที่เป็นเศษส่วน ให้สังเกตความสัมพันธ์ว่า ตัวเลขก่อนหน้า …