<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>meddlesome&#039;s blog &#187; wordpress</title>
	<atom:link href="http://meddlesome.in.th/tag/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://meddlesome.in.th</link>
	<description>Technology, Development, Graphic Design, Digital Marketing, Usability Blogs</description>
	<lastBuildDate>Sat, 15 May 2010 18:32:36 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>ปรับแต่ง Wordpress ให้เหมาะสมกับ Facebook Share</title>
		<link>http://meddlesome.in.th/2010/05/13/%e0%b8%9b%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b9%81%e0%b8%95%e0%b9%88%e0%b8%87-wordpress-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%b0%e0%b8%aa%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a/</link>
		<comments>http://meddlesome.in.th/2010/05/13/%e0%b8%9b%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b9%81%e0%b8%95%e0%b9%88%e0%b8%87-wordpress-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%b0%e0%b8%aa%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a/#comments</comments>
		<pubDate>Thu, 13 May 2010 08:58:38 +0000</pubDate>
		<dc:creator>meddlesome</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[meta]]></category>
		<category><![CDATA[seo]]></category>
		<category><![CDATA[webdev]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://meddlesome.in.th/?p=198</guid>
		<description><![CDATA[
			
				
			
		
อย่างที่เราทราบๆกันดีกว่า เราสามารถ Share ลิงค์เว็บต่างๆไปให้เพื่อนของเราได้ แต่สิ่งที่ทำให้ Facebook เจ๋งคือ เวลาแชร์ไปให้เพื่อนแล้ว Facebook จะทำการดึง content บางส่วนออกมาด้วยเพื่อทำให้เวลาอยู่บน Wall ทำให้สวยงามขึ้น

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

ค่าที่กำหนดใน &#60;title&#62;,&#60;meta&#62;,&#60;link&#62;
เนื้อหา ใน &#60;body&#62; เช่น รูป &#60;img&#62;, รายละเอียด = &#60;p&#62;,&#60;span&#62;

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

จุดหลักสำคัญคือ &#60;meta&#62;
ดังตัวอย่างข้างบน
&#60;title&#62;@meddlesome [...]


<b>Related posts:</b><ol><li><a href='http://meddlesome.in.th/2009/08/25/hello-world/' rel='bookmark' title='Permanent Link: สวัสดีชาวโลก'>สวัสดีชาวโลก</a></li>
</ol><br>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fmeddlesome.in.th%2F2010%2F05%2F13%2F%25e0%25b8%259b%25e0%25b8%25a3%25e0%25b8%25b1%25e0%25b8%259a%25e0%25b9%2581%25e0%25b8%2595%25e0%25b9%2588%25e0%25b8%2587-wordpress-%25e0%25b9%2583%25e0%25b8%25ab%25e0%25b9%2589%25e0%25b9%2580%25e0%25b8%25ab%25e0%25b8%25a1%25e0%25b8%25b2%25e0%25b8%25b0%25e0%25b8%25aa%25e0%25b8%25a1%25e0%25b8%2581%25e0%25b8%25b1%25e0%25b8%259a%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fmeddlesome.in.th%2F2010%2F05%2F13%2F%25e0%25b8%259b%25e0%25b8%25a3%25e0%25b8%25b1%25e0%25b8%259a%25e0%25b9%2581%25e0%25b8%2595%25e0%25b9%2588%25e0%25b8%2587-wordpress-%25e0%25b9%2583%25e0%25b8%25ab%25e0%25b9%2589%25e0%25b9%2580%25e0%25b8%25ab%25e0%25b8%25a1%25e0%25b8%25b2%25e0%25b8%25b0%25e0%25b8%25aa%25e0%25b8%25a1%25e0%25b8%2581%25e0%25b8%25b1%25e0%25b8%259a%2F&amp;source=meddlesome&amp;style=normal&amp;service=bit.ly" height="61" width="50" /><br />
			</a>
		</div>
<p>อย่างที่เราทราบๆกันดีกว่า เราสามารถ Share ลิงค์เว็บต่างๆไปให้เพื่อนของเราได้ แต่สิ่งที่ทำให้ <a href="http://www.facebook.com" target="_blank">Facebook</a> เจ๋งคือ เวลาแชร์ไปให้เพื่อนแล้ว Facebook จะทำการดึง content บางส่วนออกมาด้วยเพื่อทำให้เวลาอยู่บน Wall ทำให้สวยงามขึ้น</p>
<p><img class="aligncenter size-large wp-image-199" title="Facebook Share" src="http://meddlesome.in.th/wp-content/uploads/Screen-shot-2010-05-13-at-14.44.24-450x176.png" alt="" width="450" height="176" /></p>
<p>ดังตัวอย่างข้างบน ถ้าทำการแชร์ลิงค์ที่เป็นวีดีโอ เช่น <a href="http://www.youtube.com" target="_blank">youtube</a> เวลาขึ้นบน Wall จะแสดง Title, Description, Thumbnail Image จากเว็บโดยอัตโนมัติ แต่ปัญหาที่เกิดขึ้นคือ Web Developer จะมีทางบังคับ content ที่จะโชว์บน Facebook ได้รึเปล่า</p>
<p>คำตอบคือได้ครับ เพราะ Facebook ได้มีเอกสารออกมาในการปรับแต่งให้เหมาะสม โดยมีลำดับขั้นในการดึง content เป็น</p>
<ul>
<li>ค่าที่กำหนดใน &lt;title&gt;,&lt;meta&gt;,&lt;link&gt;</li>
<li>เนื้อหา ใน &lt;body&gt; เช่น รูป &lt;img&gt;, รายละเอียด = &lt;p&gt;,&lt;span&gt;</li>
</ul>
<p>โดยที่รองรับการดึง content ประเภท multimedia (audio,flash video ได้ด้วย)</p>
<p><img class="aligncenter size-large wp-image-215" title="Facebook fetch content" src="http://meddlesome.in.th/wp-content/uploads/Screen-shot-2010-05-13-at-15.38-450x111.png" alt="" width="450" height="111" /></p>
<p>จุดหลักสำคัญคือ &lt;meta&gt;<br />
ดังตัวอย่างข้างบน</p>
<pre>&lt;title&gt;@meddlesome blog"&lt;/title&gt;
&lt;meta name="title" content="@meddlesome blog" /&gt;
&lt;meta name="description" content="Technology, Development, Graphic Design, Digital Marketing, Usability Blogs" /&gt;
</pre>
<p>การกำหนดรูป thumbnail ก็สามารถกำหนดได้จาก &lt;link rel=&#8221;image_src&#8221; href=&#8221;thumbnail_image&#8221; / &gt;</p>
<p>ใน <a href="http://www.wordpress.org" target="_blank">Wordpress</a> การแก้ให้แก้ผ่าน header.php ใน theme ชุดนั่นๆที่ใช้อยู่ เช่น</p>
<p>&lt;link rel=&#8221;img_src&#8221; href=&#8221;&lt;?php echo get_post_meta($post-&gt;ID, &#8220;img_src&#8221;, true); ?&gt;&#8221; /&gt;</p>
<p>ใน Wordpress มี Plugins ที่ง่ายสำหรับการกำหนด metadata เนื่องจาก &lt;meta name=&#8221;description&#8221;&gt; เดิมของ Wordpress ได้ใส่รายละเอียดของ Blog ที่กรอกในหน้า General ซึ่งจะเหมือนๆกันทุกหน้า วิธีง่ายๆโดยใช้ Plugins ชื่อ Headspace หรือ All in One SEO ช่วยจะประหยัดเวลาได้มาก เพราะจะมีการ optimized เกี่ยวกับ meta tag โดยอัตโนมัติ</p>
<p>รายละเอียดเพิ่มเติม : <a href="http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags" target="_blank">Facebook Share/Specifying Meta Tags</a> in Facebook Developer wikis</p>


<p><b>Related posts:</b><ol><li><a href='http://meddlesome.in.th/2009/08/25/hello-world/' rel='bookmark' title='Permanent Link: สวัสดีชาวโลก'>สวัสดีชาวโลก</a></li>
</ol></p><br>]]></content:encoded>
			<wfw:commentRss>http://meddlesome.in.th/2010/05/13/%e0%b8%9b%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b9%81%e0%b8%95%e0%b9%88%e0%b8%87-wordpress-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b2%e0%b8%b0%e0%b8%aa%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>&#8220;handmade&#8221; theme</title>
		<link>http://meddlesome.in.th/2009/11/23/handmade-theme/</link>
		<comments>http://meddlesome.in.th/2009/11/23/handmade-theme/#comments</comments>
		<pubDate>Sun, 22 Nov 2009 19:06:31 +0000</pubDate>
		<dc:creator>meddlesome</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://meddlesome.in.th/?p=118</guid>
		<description><![CDATA[
			
				
			
		
เนื่องจากว่าบล๊อกผมที่ผ่านมาใช้ theme ที่อาจจะดูเวอร์มากเกินไป เลยนั่งคึกออกแบบใหม่ เพราะเริ่มจากเห็นชาว twitter ใช้รูปการ์ตูนที่วาดเอง โดย @Urinn
และผมก็เกิดอาการคึก วาด avatar ใช้เองบ้าง   ด้วยทักษะอันน้อยนิดกับ wacom ขาวเนียนของผม ได้ออกมาเป็น http://twitpaint.com/iovq3y ที่ดูโรคจิตและไม่เหมือนตัวจริง 555
เลยเกิดอาการ design-addict ขึ้นมาทันใด เลยจัดการโมบล๊อกนี้ซะใหม่ ให้ดูใช้ง่ายขึ้น สะอาดขึ้น แต่ไม่รู้ว่าจะถูกใจกันรึเปล่านะครับ  
Theme นี้ชื่อว่า &#8220;handmade&#8221; พัฒนาต่อจาก WP Theme Wuwei , icon เกือบทั้งหมดวาดด้วยมือจึงใช้ชื่อว่า &#8220;handmade&#8221; รวมถึงใช้ Font ลายมือจาก @Tpagon
ที่สำคัญบล๊อกนี้ประกาศไม่รองรับ Internet Explorer 6 เพราะใช้ transparent png เพียบ   เปลี่ยนไปใช้ firefox กันครับ [...]


<b>No related posts.</b>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fmeddlesome.in.th%2F2009%2F11%2F23%2Fhandmade-theme%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fmeddlesome.in.th%2F2009%2F11%2F23%2Fhandmade-theme%2F&amp;source=meddlesome&amp;style=normal&amp;service=bit.ly" height="61" width="50" /><br />
			</a>
		</div>
<p>เนื่องจากว่าบล๊อกผมที่ผ่านมาใช้ theme ที่อาจจะดูเวอร์มากเกินไป เลยนั่งคึกออกแบบใหม่ เพราะเริ่มจากเห็นชาว twitter ใช้รูปการ์ตูนที่วาดเอง โดย <a href="http://twitter.com/Urinn">@Urinn</a><br />
และผมก็เกิดอาการคึก วาด avatar ใช้เองบ้าง <img src='http://meddlesome.in.th/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' />  ด้วยทักษะอันน้อยนิดกับ wacom ขาวเนียนของผม ได้ออกมาเป็น <a href="http://twitpaint.com/iovq3y" target="_blank">http://twitpaint.com/iovq3y</a> ที่ดูโรคจิตและไม่เหมือนตัวจริง 555</p>
<p>เลยเกิดอาการ design-addict ขึ้นมาทันใด เลยจัดการโมบล๊อกนี้ซะใหม่ ให้ดูใช้ง่ายขึ้น สะอาดขึ้น แต่ไม่รู้ว่าจะถูกใจกันรึเปล่านะครับ <img src='http://meddlesome.in.th/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> </p>
<div id="attachment_119" class="wp-caption aligncenter" style="width: 513px"><img class="size-full wp-image-119" title="handmade" src="http://meddlesome.in.th/wp-content/uploads/handmade.jpg" alt="handmade by @meddlesome" width="503" height="422" /><p class="wp-caption-text">handmade by @meddlesome</p></div>
<p>Theme นี้ชื่อว่า &#8220;handmade&#8221; พัฒนาต่อจาก WP Theme <a href="http://equivocality.com/wu-wei">Wuwei</a> , icon เกือบทั้งหมดวาดด้วยมือจึงใช้ชื่อว่า &#8220;handmade&#8221; รวมถึงใช้ Font ลายมือจาก <a href="http://twitter.com/Tpagon" target="_blank">@Tpagon</a></p>
<p>ที่สำคัญบล๊อกนี้ประกาศไม่รองรับ Internet Explorer 6 เพราะใช้ transparent png เพียบ <img src='http://meddlesome.in.th/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  เปลี่ยนไปใช้ firefox กันครับ เพื่อความสุขของ Web Developer <img src='http://meddlesome.in.th/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>theme ยังไม่เสร็จ 100% นะครับ <img src='http://meddlesome.in.th/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' />  ถ้ามีอะไรจะแนะนำก็บอกได้เลยครับ ขอบคุณทุกท่าน <img src='http://meddlesome.in.th/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>


<p><b>No related posts.</b></p>]]></content:encoded>
			<wfw:commentRss>http://meddlesome.in.th/2009/11/23/handmade-theme/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
