วิธีทำง่ายนิดเดียวครับ นั่นคือการกำหนด 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 และเนื้อของไฟล์ลงไปตรง ๆ ในนั้นเลยครับ รูปแบบการเขียนคือ

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

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

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

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

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