วิธีทำง่ายนิดเดียวครับ นั่นคือการกำหนด tag ที่ facebook มันไปดึงให้ถูกต้องครับ

tag ที่ว่านี้ facebook จะใช้อยู่ 3 tag ครับ คือ

1. ส่วนที่เป็น title จะไปดึงจาก inner-text <title>…</title> ในส่วน head ครับ
2. ส่วนที่เป็น description จะไปดึงมาจาก value ของ attribute content ใน <meta name=”description” content=”…”/> ในส่วน head เหมือนกัน
3. ส่วนสุดท้ายจะเป็นรูปที่เอาไปแสดง จะไปดึงมาจาก value ของ attribute href ใน <link rel=”image_src” href=”…” /> ในส่วน head อีกเช่นกัน

หลังจากใส่แล้วลองไป Share link ใน facebook อีกที เราก็จะเห็นข้อมูลและรูปที่เราระบุไว้ขึ้นมาอย่างสวยงามสมใจแล้วล่ะครับ

ปล.นิดนึง facebook จะ cache ข้อมูลพวกนี้ไว้นะครับ ถ้ามีการแก้ไขอะไร อาจจะต้องรอซักระยะนึง แล้วค่อย share ใหม่ถึงจะเห็นการเปลี่ยนแปลงนะครับ

ปล.อีกที ถ้าจะลอง share link แล้วไม่รู้จะลองกับเว็บอะไรดี ลอง http://www.dkote.com ก็ได้ครับ เว็บนี้มีการกำหนด 3 ข้อด้านบนเรียบร้อยแล้วครับ ฮิๆๆ

อ้างอิง

• http://www.left-click.us/blog/addthis-button-how-make-facebook-show-correct-image-and-text-blog-post

ปัญหานี้สามารถแก้ไขได้โดยการกำหนด box model ให้เหมือนกันด้วย css เพื่อให้ตัว render หน้าเว็บ ทำงานไปในทางเดียวกัน สิ่งที่ต้องเพิ่มลงไปใน style ของ object ที่เราต้องการกำหนดคือ

-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;

การกำหนดค่าแบบนี้ จะเป็นการสั่งให้ browser คำนวณความกว้างของ content จากขอบของ container เหมือนกับที่ IE ทำนั่นเอง

เพื่อให้เห็นภาพได้ชัดเจนมากขึ้น ผมว่าเราลองไปดูตัวอย่างใน LIVE DEMO กันเลยดีกว่าครับ

ใน HTML เราจะเรียกคำที่อยู่ในเครื่องหมาย <> ว่าแท็ก (เฉพาะคำแรกเท่านั้น) เช่น <A> ก็คือ A แท็ก (หรือแท็ก A แบบไทย ๆ) ส่วน ค่าที่เรากำหนดต่าง ๆ ภายในแท็ก จะเรียกว่า คุณสมบัติ หรือ Attribute เช่น <A href=”http://blog.chonla.com>ไปอ่านบล็อก</A> จะมี href เป็น attribute ของแท็ก A และมี http://blog.chonla.com เป็นค่าของ attribute href นั่นเอง ส่วนคำว่า “ไปอ่านบล็อก” จะเรียกว่า inner-text ของแท็ก A ส่วน <A href=”…”>…</A> เราจะเรียกรวม ๆ ว่า Element ครับ

แอบนอกเรื่องไปนิดนึง วกกลับมาที่ <LABEL> ดีกว่าครับ (จากนี้ ผมจะเขียนเป็นตัวเล็ก เพื่อความสะดวกนะครับ <label>) ตัว <label> เอง ความจริงแล้ว ไม่ได้ทำให้การแสดงผลมีอะไรพิเศษเลยครับ มันช่วยให้สำหรับผู้ใช้ที่ใช้ mouse สะดวกสบายมากขึ้นเท่านั้นเองครับ หน้าทีของ <label> เนี่ย จะทำหน้าที่กำหนดความสัมพันธ์ของข้อความใด ๆ ที่เป็น inner-text ของ <label> กับ input element ใน form ครับ วิธีการกำหนด ก็เพียงกำหนด id ให้กับ input element และ เพิ่ม attribute “for” ให้กับ <label> โดยมีค่าของ attribute “for” เป็น id ของ input สัมพันธ์กับ <label> นั้นครับ

หลังจากที่เรากำหนดความสัมพันธ์แล้ว อย่างที่ผมเกริ่นไว้หน่อยแล้วว่ามันเพิ่มความสะดวกให้กับผู้ใช้ที่ใช้ mouse นั่นคือ เมื่อเราคลิกข้อความที่เป็น inner-text ในหน้าเว็บ มันจะเหมือนกับการที่เราคลิกตัว input element ที่มันสัมพันธ์กันนั่นเองครับ

เอาเป็นว่า เพื่อความชัดเจนมากขึ้น เราลองไปดูตัวอย่างใน LIVE DEMO กันเลยดีกว่าครับ

อ้างอิง

• http://www.w3schools.com/tags/tag_label.asp

จะเห็นได้ว่า มันก็ไม่เห็นมีอะไรพิเศษ ก็เป็นเว็บที่มีรูป smiley ธรรมดา แต่ถ้าลอง view source ดู จะเห็นครับ ว่ามันพิเศษยังไง

ใช่แล้วครับ ทริกของมันก็คือ เราทำการระบุ content-type และเนื้อของไฟล์ลงไปตรง ๆ ในนั้นเลยครับ รูปแบบการเขียนคือ

function get_selected(path)
{
    return $(path + " option:selected");
}

function remove_selected(path)
{
    $(path + " option:selected").remove();
}

function append_item(path, value, text)
{
    $(path).append("<option value='" + value + "'>" + text + "</option>");
}

function select_first(path)
{
    $(path + " option:first-child").attr("selected","selected");
}

function select_last(path)
{
    $(path + " option:last-child").attr("selected","selected");
}

function remove_all(path)
{
    $(path).empty();
}

function select_by_value(path, value)
{
    $(path + " option[value=" + value + "]").attr("selected","selected");
}

function remove_by_value(path, value)
{
    $(path + " option[value=" + value + "]").remove();
}

Code ของตัวอย่างด้านบน จะใช้สำหรับการทำงานที่พบได้บ่อย ไม่ว่าจะเป็นการเพิ่ม element OPTION ลงใน select หรือการกำหนดค่า select box ให้เลือกไปที่ option ใด ๆ

ตัวอย่างการนำไปใช้ดูได้ที่ LIVE DEMO ได้เลยครับ

บทความนี้จะพูดถึงการที่เราอยากให้มันขึ้นรูปอื่นแทน ในกรณีที่รูปที่เราต้องการจริง ๆ มันโหลดไม่ขึ้น

วิธีทำก็แสนจะง่ายดายครับ ใช้ event ของ javascript มาช่วยนิดหน่อย

<img src="noimg.jpg" onerror="this.src='shark.jpg'">

จาก code ด้านบน ถ้ารูป noimg.jpg นั้นโหลดไม่ขึ้น ไม่ว่าด้วยสาเหตุใด มันจะโหลดรูป shark.jpg แทนครับ

ง่ายมั๊ยครับ เราไปดู LIVE DEMO กันดีกว่าครับ

• User Experience ที่เปลี่ยนไป แน่นอนครับ เมื่อเราใช้ Ajax มันย่อมส่งผลกระทบถึง User แน่ ๆ อยู่แล้ว User หลาย ๆ คนคาดหวังว่า ทุกครั้งที่คลิก หน้าจะต้องถูกโหลดใหม่เสมอ ทำให้ User ประเภทนี้ เกิดความไม่เคยชินถึงความเปลี่ยนแปลงของข้อมูลบนเว็บได้ครับ แล้วก็อาจจะเกิดคำถามที่ว่า คลิกแล้วไม่เห็นไปไหนเลย เกิดขึ้นได้ครับ
• Search Engine Optimization เมื่อเราทำเว็บเป็น Ajax ข้อมูลจะถูกส่งมาให้เว็บบราวเซอร์ก็ต่อเมื่อมีการรันสคริปเพื่อไปดึงข้อมูลจากเว็บเซิร์ฟเวอร์ ในขณะที่ Search Engine Bot ไม่สามารถรันสคริปพวกนี้ได้ ทำให้เวลาที่ Search Engine Bot อ่านหน้าเว็บของเรา ก็จะได้แต่โครงสร้างของหน้าเว็บเปล่า ๆ กลับไป
• Javascript Compatibility ปัญหาของเรื่องนี้มันก็คือเรื่องของ Cross-browser Compatibility นั่นแหละครับ เว็บบราวเซอร์แต่ละตัวก็สนับสนุน ECMA Script ที่แตกต่างกันไป ทำให้ในขั้นตอนการพัฒนาเว็บด้วย Ajax ผู้พัฒนาจำเป็นต้องนึกถึงตรงนี้ด้วยครับ

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

สมมติว่า เว็บไซต์ A นี้ มีรูปที่จะต้องแสดง (รวมรูปกรอบ รูปภาพต่าง ๆ Flash) ทั้งหมด 300 รูป และมีการเรียก Ajax อีก 20 ครั้ง Javascript ไฟล์อีก 10 ไฟล์ และ css อีก 5 ไฟล์ รวม Connection ที่จะเกิดขึ้นทั้งหมดจากเครื่องผู้ใช้ไปยังเว็บเซิร์ฟเวอร์ คือ 336 ครั้ง (รวมครั้งแรกที่เรียกหน้าด้วยอีก 1 ครั้ง)

นี่คือเหตุการณ์สำหรับ User 1 คนที่จะเกิดขึ้นกับเว็บไซต์เรานะครับ เว็บเราดัง ๆ หน่อย มีผู้ใช้ 10,000 คนในช่วงเวลาเดียวกัน ก็จะเกิดขึ้น 3,360,000 ครั้ง ในช่วงเวลานั้น ๆ ลองนึกภาพตามดูนะครับ ว่าเว็บเซิร์ฟเวอร์จะทำงานหนักขนาดไหน

หนทางในการลด Connection ลงมีหลายวิธีครับ ผมจะพูดถึงเฉพาะในเรื่อง Ajax เท่านั้น คือ ลองพิจารณาว่า ถ้าการโหลดหน้าครั้งแรก ไม่ต้องเป็น Ajax ล่ะ แต่ครั้งถัดไปค่อยใช้ Ajax แสดงว่า User 1 คน จะเกิด Connection ไปยังเว็บเซิร์ฟเวอร์ 316 ครั้ง ถ้า 10,000 คนก็ 3,160,000 ครั้ง ลดลงไปได้ 200,000 ก็ยังดีครับ

ผมสรุปตอนท้ายว่า Ajax เป็นเทคโนโลยีที่ดีก็ต่อเมื่อเรานำไปใช้ให้พอดี และเหมาะสมกับงานครับ

ขอให้สนุกกับการใช้ Ajax นะครับ

ลองไปดู LIVE DEMO กันได้เลยครับ