Archives for posts with tag: wordpress

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

ดังตัวอย่างข้างบน ถ้าทำการแชร์ลิงค์ที่เป็นวีดีโอ เช่น youtube เวลาขึ้นบน Wall จะแสดง Title, Description, Thumbnail Image จากเว็บโดยอัตโนมัติ แต่ปัญหาที่เกิดขึ้นคือ Web Developer จะมีทางบังคับ content ที่จะโชว์บน Facebook ได้รึเปล่า

คำตอบคือได้ครับ เพราะ Facebook ได้มีเอกสารออกมาในการปรับแต่งให้เหมาะสม โดยมีลำดับขั้นในการดึง content เป็น

  • ค่าที่กำหนดใน <title>,<meta>,<link>
  • เนื้อหา ใน <body> เช่น รูป <img>, รายละเอียด = <p>,<span>

โดยที่รองรับการดึง content ประเภท multimedia (audio,flash video ได้ด้วย)

จุดหลักสำคัญคือ <meta>
ดังตัวอย่างข้างบน

<title>@meddlesome blog"</title>
<meta name="title" content="@meddlesome blog" />
<meta name="description" content="Technology, Development, Graphic Design, Digital Marketing, Usability Blogs" />

การกำหนดรูป thumbnail ก็สามารถกำหนดได้จาก <link rel=”image_src” href=”thumbnail_image” / >

ใน Wordpress การแก้ให้แก้ผ่าน header.php ใน theme ชุดนั่นๆที่ใช้อยู่ เช่น

<link rel=”img_src” href=”<?php echo get_post_meta($post->ID, “img_src”, true); ?>” />

ใน Wordpress มี Plugins ที่ง่ายสำหรับการกำหนด metadata เนื่องจาก <meta name=”description”> เดิมของ Wordpress ได้ใส่รายละเอียดของ Blog ที่กรอกในหน้า General ซึ่งจะเหมือนๆกันทุกหน้า วิธีง่ายๆโดยใช้ Plugins ชื่อ Headspace หรือ All in One SEO ช่วยจะประหยัดเวลาได้มาก เพราะจะมีการ optimized เกี่ยวกับ meta tag โดยอัตโนมัติ

รายละเอียดเพิ่มเติม : Facebook Share/Specifying Meta Tags in Facebook Developer wikis

เนื่องจากว่าบล๊อกผมที่ผ่านมาใช้ theme ที่อาจจะดูเวอร์มากเกินไป เลยนั่งคึกออกแบบใหม่ เพราะเริ่มจากเห็นชาว twitter ใช้รูปการ์ตูนที่วาดเอง โดย @Urinn
และผมก็เกิดอาการคึก วาด avatar ใช้เองบ้าง :P ด้วยทักษะอันน้อยนิดกับ wacom ขาวเนียนของผม ได้ออกมาเป็น http://twitpaint.com/iovq3y ที่ดูโรคจิตและไม่เหมือนตัวจริง 555

เลยเกิดอาการ design-addict ขึ้นมาทันใด เลยจัดการโมบล๊อกนี้ซะใหม่ ให้ดูใช้ง่ายขึ้น สะอาดขึ้น แต่ไม่รู้ว่าจะถูกใจกันรึเปล่านะครับ :P

handmade by @meddlesome

handmade by @meddlesome

Theme นี้ชื่อว่า “handmade” พัฒนาต่อจาก WP Theme Wuwei , icon เกือบทั้งหมดวาดด้วยมือจึงใช้ชื่อว่า “handmade” รวมถึงใช้ Font ลายมือจาก @Tpagon

ที่สำคัญบล๊อกนี้ประกาศไม่รองรับ Internet Explorer 6 เพราะใช้ transparent png เพียบ :) เปลี่ยนไปใช้ firefox กันครับ เพื่อความสุขของ Web Developer :)

theme ยังไม่เสร็จ 100% นะครับ :P ถ้ามีอะไรจะแนะนำก็บอกได้เลยครับ ขอบคุณทุกท่าน :)