JSColor JavaScript/HTML Color Picker

พอดีว่าผมกำลังพัฒนา Web Application ขึ้นมาตัวหนึ่ง และอยากจะให้ User สามารถกำหนดสีของ Background ได้เอง แต่ถ้าจะให้ User ป้อน HTML Color ในรูปแบบ Hex Code ก็คงจะดูไม่ดีซักเท่าไหร่ ก็เลยลองค้นใน Google ในที่สุดก็เจอ Library ตัวนึงมีชื่อว่า JSColor ซึ่งเป็น JavaScript สำหรับช่วยสร้าง Color Picker พัฒนาขึ้นโดย Jan Odvárko ดูแล้วน่าสนใจดีครับ สำหรับใครที่อยากจะลอง Download มาใช้งานก็เข้าไปที่นี่ครับ http://jscolor.com/

แหล่งที่มา : http://jscolor.com/

Quick CSS Trick: How To Center an Object Exactly In The Center

ปกติผมมักจะวาง DIV ให้อยู่ในตำแหน่ง center โดยใช้ margin: 0 auto แต่วิธีการนี้ ใช้ไม่ได้กับ DIV ที่มี position แบบ fixed ก็เลยลองค้นหาใน Google ดู ก็เจอบทความแนะนำวิธีการเอาไว้ ลองอ่านดูได้ที่นี่ครับ http://bit.ly/Oln1We

แหล่งที่มา : http://css-tricks.com

How to parse RSS feeds with PHP

สำหรับบทความต่อไปนี้เป็นตัวอย่างการเขียนโปรแกรมสำหรับอ่าน RSS Feed ด้วย PHP โดยใช้ Document Object Model ลองดูตัวอย่างได้ที่นี่ครับ http://www.softarea51.com/tutorials/parse_rss_with_php.html

แหล่งที่มา : http://www.softarea51.com/tutorials/parse_rss_with_php.html

PHP Proxy Solution for cross-domain AJAX scripting

โดยปกติเราจะไม่สามารถเรียก AJAX ข้าม Domain ได้ เนื่องจากเป็นข้อกำหนดในเรื่องความปลอดภัย สำหรับบทความที่จะนำมาแนะนำต่อไปนี้เป็นวิธีการสร้าง Proxy โดยใช้ PHP เพื่อที่เราจะสามารถเรียกใช้งาน AJAX ข้าม Domain ได้ ลองเข้าไปดูบทความได้ที่นี่ครับ http://bit.ly/ONrztb

แหล่งที่มา : http://bit.ly/ONrztb

Facebook - FB.getLoginStatus

สำหรับ Facebook Application การ check สถานะของ User เป็นสิ่งแรกๆที่ Application ควรจะทำเมื่อ load page เสร็จเรียบร้อย การ check สถานะการ Login โดยใช้ JavaScript SDK เราจะใช้ Function ที่ชื่อว่า FB.getLoginStatus ซึ่งมีทั้งหมด 3 สถานะดังต่อไปนี้ คือ

1. connected - สถานะที่ User logged in Facebook และ Authenticated Application ของเราเรียบร้อยแล้ว

2. not_authorized - สถานะที่ User logged in Facebook แต่ยังไม่ได้ Authenticated Application ของเรา

3. unknown - สถานะที่ User ยังไม่ได้ logged in Facebook

Social Application โดยทั่วไปมักจะ check สถานะ Login ของ User ทันทีที่ Page load เสร็จเรียบร้อย ซึ่งแทนที่เราจะเรียก FB.getLoginStatus โดยตรง เราสามารถ check สถานะ Login ของ User โดยกำหนดค่า status:true ตอนที่เราเรียก FB.init และ subscribe auth.statusChange event เพื่อขอรับ response object (ซึ่งจะเป็น response object เดียวกันกับที่ได้รับจาก FB.getLoginStatus) ค่าหลักๆที่สำคัญใน response object ได้แก่ response.status, response.authResponse.userID, response.authResponse.accessToken (ค่า accessToken เป็นค่าที่จำเป็นต้องใช้ในการเรียก Facebook APIs ในนามของ User ที่ Login อยู่ในขณะนั้น)

แหล่งที่มา : http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

How to implement Facebook share button ?

สงสัยอยู่เหมือนกันว่าทำใน Facebook Social Plugins ถึงได้ไม่มี Share Button เข้าใจ Facebook น่าจะเอา Share Button ออกเนื่องจากมองว่าใกล้เคียงกับ Like Button แต่ผมกลับคิดว่ามันไม่เหมือนกัน โดยส่วนตัวผมชอบ Share Button มากกว่า เพราะเวลาแสดงผลใน Wall มันชัดเจนดี และหลายๆครั้งก็ไม่ได้ Like แต่อยากจะ Share เฉยๆ หลังจากที่ใช้เวลาหาพอสมควร ในที่สุดก็เจอ ก็เลยอยากจะ post ไว้ เผื่อว่าใครอาจจะอยากเอาไปใช้ สำหรับตัวอย่างต่อไปนี้ เป็นตัวอย่างของ script สำหรับสร้าง Share Button ครับ http://pastie.textmate.org/4532375

แหล่งที่มา : http://bit.ly/Q70BqM

What is Schema.org ?

ทั้ง Facebook และ Google ต่างก็ใช้ Social Graph ในการ implement Social Network ของตนเอง ในขณะที่ Facebook ใช้ Open Graph Protocol สำหรับการใส่ information เพิ่มเติมใน Web Page ทาง Google ก็เลือกใช้ markup ในรูปแบบของ schema.org เพื่อใช้ในการเพิ่ม information ลงใน Web Page สำหรับตัวอย่างที่จะแสดงต่อไปนี้เป็น markup ในรูปแบบของ schema.org เพื่อใช้สำหรับปุ่ม +1

การใช้ markup ในรูปแบบของ schema.org มีข้อดีคือ Search Engine ไม่ว่าจะเป็น Bing, Yahoo!, Google ต่างก็เข้าใจ syntax และสามารถนำข้อมูลที่อยู่ในรูปแบบของ schema.org มาใช้ในการปรับปรุงผลลัพธ์ในการ Search ของตนเอง

HTML Tag จะบอกถึงวิธีการ Display แต่ไม่ได้ระบุว่าสิ่งที่กำลัง Display นั้นหมายถึงอะไร ยกตัวอย่างเช่น <h1>Avatar</h1> อาจจะหมายถึงภาพยนตร์เรื่อง Avatar หรืออาจจะหมายถึง Profile Picture ก็ได้ ซึ่งเป็นเรื่องยากที่ Search Engine จะสามารถเข้าใจได้ ซึ่งถ้า Search Engine สามารถเข้าใจว่าเราหมายถึงอะไร Search Engine ก็จะสามารถแสดง related contents ได้ตรงกับที่เราต้องการมากขึ้น นั่นจึงเป็นที่มาของ schema.org  ซึ่งมีหน้าที่ในการกำหนด vocabularies ที่ผู้พัฒนา web สามารถนำไปใช้เพื่อให้ Search Engine สามารถเข้าใจความหมายของเนื้อหา

โดยทั่วไปเรามักจะใช้ vocabularies จาก schema.org คู่กับ microdata format ในการเพิ่ม information ให้กับ HTML

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

นอกจากนั้นเรายังสามารถเพิ่ม information ให้กับข้อมูลได้อีกโดยใช้ itemprop ดังตัวอย่างต่อไปนี้

จากตัวอย่างจะเห็นว่าเรามีการใช้ itemprop="name" เพื่อเป็นการระบุชื่อภาพยนตร์ และใช้ itemprop="director" เพื่อเป็นการระบุชื่อผู้กำกับ ซึ่งถึงตอนนี้ Search Engine จะสามารถเข้าใจได้ว่าข้อมูลนี้เกี่ยวกับภาพยนตร์เรื่อง Avatar ที่กำกับโดย James Cameron

สำหรับผู้ที่สนใจ สามารถศึกษาข้อมูลเพิ่มเติมได้ที่ http://schema.org ครับ

แหล่งที่มา : http://schema.org

fbShare.me: A sharecount button for Facebook*

สำหรับบทความนี้จะมาแนะนำเกี่ยวกับ fbShare.me ซึ่งให้บริการ script สำหรับ share button for Facebook ซึ่งมีความสามารถในการแสดงจำนวนครั้งที่ page ถูก share ได้ด้วย มีทั้งแบบที่เป็น embedded code และแบบ plugin สำหรับผู้ที่ใช้ wordpress สำหรับผู้ที่สนใจสามารถเข้าไปอ่านเพิ่มเติมได้ที่นี่ครับ http://www.fbshare.me

แหล่งที่มา : http://www.fbshare.me

Tools To Improve Your Online Marketing Campaign

พอดีผมไปอ่านเจอบทความหนึ่งที่เขียนเอาไว้เกี่ยวกับ Tools ต่างๆที่นำมาช่วยในการสร้าง Online Marketing Campaign ดูแล้วน่าสนใจดี บทความมีชื่อว่า "Tools To Improve Your Online Marketing Campaign" เขียนโดย Joost de Valk ในบทความจะเขียนถึง Tool ต่างๆ อาทิเช่น Google Analylic , SiteScan GA, Google Analytic Tracking Code Debugger, GetClicky, Clicktale, Google Website Optimizer, Google Cache, Wirify, Open Site Explorer, Google Insights for Search, Google Adwords Keyword Tool, BrowserShots, Constrast Ratio Calculators, Quix ถ้าสนใจก็ลองอ่านดูแล้วกันนะครับ

แหล่งที่มา : http://yoast.com/online-marketing-tools/

Social Media Share Button

ผมกำลังเพิ่ม share to Social เข้าไปใน web ที่ผมกำลังทำอยู่ ก็เลยลองค้นไปใน Google ก็เจอวิธีสร้างปุ่ม share แบบง่ายๆ ก็เลยอยากจะ post เอาไว้ เผื่อใครกำลังอยากได้วิธีในการสร้างปุ่ม share แบบไม่ต้องวุ่นวายมาก ลองเข้าไปดูตัวอย่างได้ที่นี่ครับ http://bit.ly/Pq9640 หรือถ้าหากไม่อยากเขียนเอง ก็ลองใช้บริการของ share this, add this หรือ Lockerz Share ดู มีให้เลือก share ไปหลาย platform ครับ ส่วนอันนี้เป็นอีกบทความหนึ่งที่เขียนแนะนำวิธีการ implement social button เอาไว้ ลองเข้าไปอ่านดูครับ http://yoast.com/social-buttons/

แหล่งที่มา : http://bit.ly/Pq9640

Facebook - JavaScript SDK

JavaScript SDK ช่วยให้เราสามารถเรียกใช้งาน REST API, Graph API และ Dialogs และยังใช้ในการ render Social Plugins (ใน version ของ XFBML) นอกจากนั้นยังใช้ใน Canvas pages เพื่อ communicate กับ Facebook การใช้งาน JavaScript SDK เราจำเป็นต้องมี App ID เพื่อใช้ในการ initialize SDK สำหรับวิธีการ load JavaScript SDK ให้ดูตามตัวอย่างต่อไปนี้

ตัวอย่างวิธีการ load JavaScript SDK

ในการใช้งาน JavaScript นั้น เราจำเป็นต้องมี <div id="fb-root"><div> ซึ่งจะต้องไม่ถูกซ่อนโดยการใช้ display:none หรือ visibility:hidden จากนั้นเราจะต้องเรียก FB.init เพื่อ initialize SDK โดยใช้ App ID หลังจากนั้น JavaScript SDK จะเพิ่ม elements เข้าไปใน fb-root (ซึ่งควรจะมี position ที่ relative กับ body) fb-root ไม่ควรอยู่ภายใน element ที่มี position แบบ absolute หรือแบบ relative

จากตัวอย่างการ load JavaScript SDK ข้างต้นจะสังเกตุว่าใช้วิธี load JavaScript แบบ Asynchronous ซึ่งทำให้ไม่ block การ load element อื่นๆบน Web Page ส่วน function ที่ถูก assign ให้กับ window.fbAsyncInit จะถูกเรียกใช้งานทันทีที่ SDK ถูก load เรียบร้อย (ถ้าหากว่าเรามี code ที่ต้องการให้ run หลังจากที่ SDK ถูก load ก็ควรจะใส่ไว้ในบริเวณนี้)

ส่วน Channel File มีไว้สำหรับแก้ปัญหา cross domain ในบาง Browser สำหรับ content ใน Channel File มีเพียงแค่บรรทัดเดียว ดังต่อไปนี้

Channel File ควรจะถูก cache ไว้ให้นานที่สุด สำหรับตัวอย่างต่อไปนี้ เป็นตัวอย่างในการสร้าง Channel File โดยใช้ PHP มาช่วยในการทำ caching

แหล่งที่มา : http://developers.facebook.com/docs/reference/javascript/

How to see your Facebook User ID

สำหรับการ Develop Facebook Application หรือการนำ Facebook Social Plugin มาใช้ หลายๆครั้งที่เราจำเป็นต้องใช้ Facebook ID แต่ปัญหามันมีอยู่ว่า หลังจากที่เราตั้งชื่อ Username ให้กับ Facebook ของเรา URL ในการแสดงผลก็จะเปลี่ยนไปเป็น www.facebook.com/<username> (ก่อนที่ตั้งชื่อ Username จะแสดงผลเป็น ID) ทำให้เราไม่รู้ว่า Facebook ID ของเรามันคือหมายเลขอะไร ผมก็เลยลองค้นหาดูว่าจะทำอย่างไรถึงจะรู้ได้ว่า Facebook ID ของเรามันคือเลขอะไร ในที่สุดก็ไปเจอบทความหนึ่งที่เขียนแนะนำวิธีการเอาไว้ ก็เลยอยากจะเอามาเขียนแนะนำ เผื่อว่าใครที่มีปัญหาเหมือนกับผม สำหรับใครที่อยากรู้ Facebook ID ของตัวเอง ก็ลองเข้าไปอ่านได้ที่บทความตาม link นี้นะครับ http://bit.ly/NI9gAD ในบทความจะแนะนำวิธีการดู Facebook ID โดยการใช้ Graph API Explorer

ส่วนอีก Solution นึงที่ผมอ่านเจอแล้วเห็นว่าง่ายดี คือเอา Mouse ไป over บนรูป Profile และมันจะแสดง link ให้เห็นบน Status Bar (ผมใช้ Firefox สำหรับ ใครที่ใช้ Browser อื่นๆ อาจจะแตกต่างกันออกไป) ซึ่งใน Link จะมี parameter ที่ชื่อว่า fbid ซึ่งก็คือ Facebook ID ของเรานั่นเองครับ

แหล่งที่มา : http://bit.ly/NI9gAD

CSS - Pseudo Classes and Pseudo Elements

Pseudo Classes และ Pseudo Elements เป็น selector ที่มีไว้สำหรับ select Element ที่อยู่นอกเหนือจาก Document Tree อย่างเช่น state ต่างๆในแต่ละ elements หรือ sub-part ของ element ซึ่งทั้ง Pseudo Classes และ Pseudo Elements นั้นมีให้ใช้งานมาตั้งแต่ CSS 1 ผมเคยสงสัยในความแตกต่างระหว่าง Pseudo Classes และ Pseudo Elements ว่ามันแตกต่างกันอย่างไร จนกระทั่งมาอ่านเจอในหนังสือเล่มหนึ่ง ซึ่งอธิบายความแตกต่างไว้ดังนี้ครับ เค้าเขียนเอาไว้ว่า Pseudo Class จะใช้สำหรับแบ่งแยกความแตกต่างในแต่ละ State ของ Element ยกตัวอย่างเช่น link state อาทิเช่น :hover, :visited, :active เป็นต้น สว่น Pseudo Element นั้นจะใช้สำหรับ access ใน sub-part ของ Element ยกตัวอย่างเช่น :first-line, :first-letter หวังว่าน่าจะช่วยให้เข้าใจความแตกต่างระหว่าง Pseudo Classes และ Pseudo Elements ได้มากขึ้นนะครับ

แหล่งที่มา : The Book of CSS3 - A Developer's Guide to The Future of Web Design เขียนโดย Peter Gasston

Facebook Social Plugin : Comments

 
Comments Plugin จะช่วยให้เราสามารถเพิ่ม comment box บน Web Site ของเราได้แบบง่ายๆ โดย Comment ที่เกิดขึ้นจะถูก Share ไปยัง User ที่กด Like Page ดังกล่าวเอาไว้ และถ้าหากในระหว่างที่ Comment  เราปล่อยให้ค่า "Post to Facebook" ถูก check เอาไว้ Comment ดังกล่าวก็จะไปปรากฎบน User's friends News Feed ด้วย ปัจจุบัน Comments Plugin รองรับการ Login โดยใช้ user account จาก Facebook , Yahoo!, AOL และ Hot Mail

สำหรับการใช้งาน Comments Plugin เราสามารถทำได้ง่ายๆโดยใช้ Wizard ที่ทาง Facebook เตรียมไว้ให้ โดยเข้าไปที่ http://developers.facebook.com/docs/reference/plugins/comments/ เมื่อกำหนดค่าต่างๆเรียบร้อย ก็ให้กดปุ่ม get code จากนั้นก็จะมี Dialog แสดง code ในรูปแบบต่างๆให้เราสามารถนำไปใช้งานบน Web Site

สำหรับในกรณีที่ต้องการแสดงผลเป็นภาษาไทย ให้เปลี่ยน locale ในส่วนของ code ที่ทำการ link JavaScript SDK เข้ามา (ในกรณีที่ใช้ XFBML) ซึ่งโดยปกติค่า locale จะเป็น en_US (ภาษาอังกฤษ) ให้เปลี่ยนเป็น th_TH (ภาษาไทย)

แหล่งที่มา : http://developers.facebook.com/docs/reference/plugins/comments/

How to get current page full URL in PHP ?

สำหรับบทความนี้จะนำเสนอวิธีการ get ค่า URL สำหรับ page ที่เรากำลัง request อยู่ เทคนิคที่จะนำเสนอต่อไปนี้ใช้วิธีการอ่านค่า REQUEST_URI ซึ่งถูก set โดย Apache Web Server (ในกรณีที่ใช้ IIS ค่า REQUEST_URI จะไม่ถูก set ซึ่งทำให้เทคนิคนี้ใช้ไม่ได้กับ IIS) การอ่านค่า Request URL สามารถทำได้ดังนี้

$_SERVER['REQUEST_URI']=$_SERVER['PHP_SELF'].'?'.$_SERVER['argv'][0];

แหล่งที่มา : http://stackoverflow.com/questions/189113/how-do-i-get-current-page-full-url-in-php

Facebook Social Plugin : Like Button

Like Button ช่วยให้เราสามารถ Share Content ให้กับเพื่อนๆของเราที่อยู่บน Facebook เพื่อ User กดปุ่ม Like ข้อมูลจะถูก Share บน User's Friends News Feed ซึ่งข้อมูลที่ Share ไว้นั้นก็จะมี Link กลับมายัง Web Site ของเรา ซึ่งเราสามารถนำ Open Graph Protocol มาใช้ในการระบุข้อมูลต่างๆของ Object

สำหรับวิธีการนำปุ่ม Like มาใช้ มี 2 วิธี คือ XFBML และ Iframe ซึ่งการใช้ XFBML จำเป็นต้องใช้ JavaScript SDK แต่เราจะสามารถกำหนด Options ต่างๆได้มากขึ้น การใช้ XFBML จะช่วยให้เราสามารถปรับขนาดการแสดงผลของ Widget ได้โดยอัตโนมัติ (Dynamically re-sizes) ไม่ว่า Widget ที่แสดงผลจะมี Profile Pictures หรือไม่มีก็ตาม และ XFBML ยังรองรับการใช้งาน Like Event ทำให้เราสามารถเขียน Script เพื่อ interact ได้ทันทีเมื่อ User มีการกดปุ่ม Like นอกจากนั้นยังสามารถให้เราเพิ่ม Comment เข้าไปได้ด้วย

Facebook ได้เตรียม Wizard ที่ช่วยในการสร้าง Code สำหรับปุ่ม Like ไว้ให้เราใช้งาน โดยเราสามารถเข้าไปที่ http://developers.facebook.com/docs/reference/plugins/like/ ใน Section ที่เขียนว่า Get Like Button Code และใส่ข้อมูลตามที่ปรากฎบนหน้าจอ เมื่อเสร็จเรียบร้อยให้กดปุ่ม Get Code จากนั้นก็จะมี Dialog แสดง Code ในรูปแบบต่างๆให้เราสามารถนำไปใช้งานได้ทันที ในส่วนถัดลงมา จะมี Wizard สำหรับสร้าง Open Graph Tags ซึ่งจะช่วยสร้าง meta tag ที่เราสามารถนำไปใส่ไว้ในหน้า Web Page

นอกจากนั้นเรายังสามารถดูสถิติของ User ที่เข้ามากด Like Web Page ของเรา โดยเข้าไปที่ http://www.facebook.com/insights  และทำการลงทะเบียน Domain จากนั้นเราก็จะสามารถดูสถิติที่เกิดขึ้นในแต่ละวันได้

สำหรับในกรณีที่ต้องการแสดงผลเป็นภาษาไทย ให้เปลี่ยน locale ในส่วนของ code ที่ทำการ link JavaScript SDK เข้ามา (ในกรณีที่ใช้ XFBML) ซึ่งโดยปกติค่า locale จะเป็น en_US (ภาษาอังกฤษ) ให้เปลี่ยนเป็น th_TH (ภาษาไทย)

แหล่งที่มา : http://developers.facebook.com/docs/reference/plugins/like/

Facebook Open Graph Application

การสร้าง Facebook Application โดยใช้ Open Graph จะช่วยให้เราสามารถใช้งานความสามารถต่างๆบน Facebook Platform ได้ อาทิเช่น Timeline, News Feed และ Ticker สำหรับส่วนประกอบหลักที่สำคัญในการพัฒนา Open Graph Application คือ Actions และ Objects

Actions คือสิ่งที่ User สามารถกระทำกับ Application (เป็น Verb) ส่วน Objects คือวัตถุที่ถูกกระทำโดย User (เป็น Noun) User สามารถ Connect กับ Object ใน Application ได้โดยการกดปุ่ม Like (Like Action) นอกจากนั้นเรายังสามารถสร้าง Custom Actions และ Objects ขึ้นมาเองได้โดยเข้าไปกำหนดใน App Dashboard ยกตัวอย่างเช่น Cooking Application อาจจะสร้าง Object Type ที่ชื่อว่า "Recipe" และ "Menu" และสร้าง Action Type ที่มีชื่อว่า "Cook" เป็นต้น

เมื่อเราได้กำหนด Action Type และ Object Type ใน App Dashboard เสร็จเรียบร้อย ขั้นตอนต่อไปเราจะต้อง create และ publish Object ของเราบน Open Graph เราสามารถสร้าง Open Graph Object ขึ้นมาจาก Web Page โดยการใส่ meta tag (ที่กำหนดไว้ใน Open Graph Protocol) ซึ่ง meta tag

เมื่อ User มีการ take action บน Application ของเรา สิ่งที่จะเกิดขึ้นก็คือ Application จะเรียกใช้งาน Graph API เพื่อสร้าง Connection ระหว่าง User และ Object โดยการ publish New Instance ของ Action และ Object ซึ่งทั้งหมดนี้เกิดขึ้นโดยการสร้าง HTTP POST request ไปที่ me/: พร้อมกับส่ง URL ของ Object ไปด้วย จากนั้น Facebook ก็จะทำการ Crawl ไปยัง URL ที่เป็นตัวแทนของ Object ดังกล่าว เพื่ออ่าน meta data และจะทำการสร้าง connection ระหว่าง user และ object ตาม Action ที่กำหนด

Diagram แสดงการทำงานเมื่อ User มีการ take Action บน Application

เมื่อกระบวนการ POST เสร็จสิ้นสมบูรณ์ Open Graph Action ดังกล่าวก็จะไปปรากฎอยู่ในทุกๆ Social Channel ได้แก่ News Feed, Ticker และ Timeline

แหล่งที่มา: http://developers.facebook.com/docs/opengraph/keyconcepts/

Facebook Open Graph Protocol

การใช้งาน Open Graph Protocol จะทำให้เราสามารถเปลี่ยน Web Page ของเราให้กลายเป็น Object หนึ่งใน Social Graph ซึ่งจะมีความสามารถต่างๆเหมือนกับ Facebook Page บน Facebook นั่นหมายความว่าถ้าหาก User กดปุ่ม Like บน Web Page ก็จะมีเกิด Connection ระหว่าง User กับ Web Page และ Web Page ของเราจะถูกนำไปแสดงไว้ในส่วนของ "Likes and Interests" ในหน้า User Profile นอกจากนั้นเรายังสามารถ publish update ไปยัง User ที่กดปุ่ม Like Web Page ของเราไว้ได้อีกด้วย สำหรับวิธีในการเปลี่ยน Web Page ของเราให้กลายเป็น Graph Object เราจะใช้การเพิ่ม meta tag เข้าไปใน Web Page สำหรับ meta tag ที่จำเป็นต้องใส่ มีดังต่อไปนี้

og:title - เป็นชื่อของ Object ที่ปรากฎบน Social Graph ยกตัวอย่างเช่น "The Rock"
og:type - ชนิดของ Object ยกตัวอย่างเช่น "video.movie"
og:image - URL ของรูปที่ใช้แทน Object บน Social Graph
og:url - URL ของ Object (ซึ่งจะถูกนำไปใช้เป็น ID บน Social Graph)

ตัวอย่างการใช้งาน Open Graph ของภาพยนตร์เรื่อง The Rock บน IMDB

สำหรับ meta tag อื่นๆ (เป็น optional แต่ควรใส่) ได้แก่

og:audio - URL สำหรับ Audio File ที่เกี่ยวกับ Object
og:description - ข้อมูลสั้นๆที่อธิบายเกี่ยวกับ Object
og:determiner - คำที่ใช้แสดงนำหน้าชื่อของ Object (อย่างเช่น a, an, the,"",auto)
og:locale - ค่า locale ประจำ Object นั้นๆ ค่า default จะเป็น en_US
og:video - URL สำหรบ Video File ที่เกี่ยวกับ Object

สำหรับ Properties บางตัว เราสามารถกำหนด Extra Metadata เข้าไปได้อีก ยกตัวอย่างเช่น

ตัวอย่างการใช้งาน Extra Metadata ของ Image Property

สำหรับในกรณีที่ property นั้น สามารถมีได้หลาย value เราสามารถกำหนดโดยใช้ meta tag เดิม (แต่เปลี่ยน value) ยกตัวอย่างเช่น

ตัวอย่างการใช้งาน Property ที่มีได้หลาย Value

สำหรับการตรวจสอบว่าเราใส่ Property ได้ถูกต้องตาม Open Graph Protocol หรือไม่นั้น เราสามารถใช้ Object Debugger ที่ Facebook เตรียมไว้ให้ โดยเข้าไปที่ http://developers.facebook.com/tools/debug แล้วใส่ URL ของ Web Page เข้าไป จากนั้น Debugger ก็จะทำการตรวจสอบ Web Page ตาม URL ที่เราใส่เข้าไป แล้วก็จะรายงานผลออกมาให้เราเห็นครับ

แหล่งที่มา: http://ogp.me/

How to get thumbnail of YouTube video link

สำหรับใครที่กำลังหาวิธีดึง Thumbnail จาก Video ใน YouTube ลองอ่าน post นี้ดูครับ เป็น post คำถามที่ post เอาไว้ที่ stackoverflow.com ซึ่งจะบอกวิธีการดึง Thumbnail ทั้งแบบใช้ API และแบบใช้ Direct URL ครับ

แหล่งที่มา: http://stackoverflow.com

Web Design Trends: Testimonials Design

ความพึงพอใจของลูกค้าเป็นสิ่งที่สำคัญสำหรับ Website ที่ให้บริการในทางธุรกิจ สำหรับบทความที่จะนำมาแนะนำในวันนี้ เป็นบทความเกี่ยวกับการออกแบบ Testimonails ในรูปแบบต่างๆที่นิยมใช้ตาม Website ต่างๆ สำหรับผู้ที่สนใจสามารถอ่านบทความได้ที่นี่ครับ http://www.noupe.com/how-tos/web-design-trends-testimonials-design.html

แหล่งที่มา : http://www.noupe.com

7 ways to convince MySQL to use the right index

สำหรับการใช้งาน Database การสร้าง Index เป็นสิ่งที่สำคัญ แต่เรารู้หรือไม่ว่า บางครั้งเราสร้าง Index ขึ้นมาหลายตัว แต่ปัญหาก็คือ Index ตัวที่เหมาะสมอาจจะไม่ได้ถูกเรียกใช้งาน สำหรับบทความที่จะนำมาแนะนำต่อไปนี้ เป็นเทคนิคในการสร้าง SQL Statement (สำหรับ MySQL) โดยให้ index ที่เหมาะสม ถูกเรียกใช้งาน สำหรับผู้ที่สนใจ ลองศึกษาจากบทความนี้ครับ "7 ways to convince MySQL to use the right index" เขียนไว้โดย Shlomi Noach

แหล่งที่มา: http://code.openark.org/blog/

Use Regular Expression with JavaScript

บทความที่จะนำมาแนะนำต่อไปนี้เป็น Tutorial ที่สอนการใช้งาน Regular Expression ในภาษา JavaScript (เป็นบทความจาก http://www.advanced-javascript-tutorial.com) มีตัวอย่างการใช้งานหลายรูปแบบ มีประโยชน์ครับ สำหรับผู้ที่สนใจสามารถเข้าไปอ่านได้ที่นี่ครับ http://www.advanced-javascript-tutorial.com/RegularExpressions.cfm#.UBrnUqCOJdg

แหล่งที่มา: http://www.advanced-javascript-tutorial.com

History.js gracefully supports the HTML5 History/State APIs in all browsers

สำหรับใครที่อยากใช้งาน HTML5 History/State APIs แต่กลัวปัญหาเรื่อง Browser Support ลองดู JavaScript Library ตัวนี้ครับ มืชื่อว่า history.js ซึ่งจะช่วยให้เราสามารถใช้งาน HTML5 History/State APIs ได้ใน Browser ต่างๆ สำหรับ Browser ไหนที่ยังไม่รองรับ ก็จะ Fall Back ไปใช้ Hash URL แทน สำหรับผู้ที่สนใจสามารถเข้าไป download มาใช้งานได้ที่นี่ครับ https://github.com/balupton/History.js

แหล่งที่มา: https://github.com/balupton/History.js

Create Crawlable, Link-Friendly AJAX Websites Using pushState()

สำหรับบทความที่จะนำมาแนะนำต่อไปนี้มีชื่อว่า "Create Crawable, Link-Friendly AJAX Websites Using pushState()" ซึ่งจะพูดถึงเทคนิคในพัฒนา website โดยใช้เทคโนโลยี AJAX แต่ในขณะเดียวกัน Search Bot ก็ยังคงสามารถ crawl มาที่ URL ของเราได้ โดยจะพูดถึงการใช้งาน window.history.pushState() ซึ่งเป็นส่วนหนึ่งของ HTML5 History API หน้าที่ของ pushState() ก็คือเปลี่ยน URL ที่แสดงอยู่บน Address Bar (ซึ่งก็ยังคงใช้งานได้ในบาง Browser) สำหรับเทคนิคที่นำมาใช้ก็คือ load content ในส่วนที่ต้องการด้วย AJAX จากนั้นก็เรียกใช้งาน pushState() เพื่อเปลี่ยน URL บน Address Bar ให้ตรงกับ address จริงของ web page นั่นเอง เพียงเท่านี้เราก็จะสามารถใช้งาน AJAX และในขณะเดียวกัน Search Bot ก็ยังคงสามารถ Crawl มายัง URL ของเราได้ (เนื่องจากเราใช้ URL จริงๆในการแสดงผลบน Address Bar) ซึ่งเทคนิคนิคนี้ หากมองดูปกติก็จะไม่แตกต่างจากการ reload page แต่จริงๆแล้วมีประสิทธิภาพที่ดีกว่ามาก ถือว่าเป็นเทคนิคที่น่าสนใจอันนึงครับ ส่วนอันนี้เป็น demo site ที่เค้าสร้างขึ้นมาเพื่อแสดงการใช้งาน pushState() ให้ดูครับ สำหรับอันนี้เป็นอีกหนึ่งบทความที่อธิบายเกี่ยวกับการใช้งาน pushState() ไว้ค่อนข้างละเอียด บทความมีชื่อว่า
HTML5: Changing the browser-URL without refreshing page ลองอ่านดูแล้วกันนะครับ

แหล่งที่มา: http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

jQuery hashchange Plugin by Ben Alman

ปัญหาอย่างหนึ่งของการใช้ AJAX คือ เราจะไม่สามารถใช้งาน Direct URL หรือทำการ Bookmark ได้เหมือนกับการสร้าง web page โดยวิธีปกติ สำหรับวิธีแก้ไขที่เราพบเห็นกันทั่วไปคือการใช้ location.hash (parameter บริเวณส่วนต่อท้ายของ URL ที่ขึ้นต้นด้วย #) และจับการเปลี่ยนแปลงของ hash ผ่าน window.onhashchange แต่ปัญหาก็คือจะสามารถใช้งานได้เฉพาะในบาง Browser เท่านั้น (IE 8+, FF 3.6+, Chrome 5+) วันนี้ผมจึงอยากจะมาแนะนำ jQuery hashchange plugin ที่พัฒนาขึ้นโดย Ben Alman ที่จะช่วยให้เราสามารถจับการเปลี่ยนแปลงของ hash ได้แบบ cross browser สำหรับวิธีการใช้งาน สามารถดูได้ตามตัวอย่างต่อไปนี้ครับ

สำหรับผู้ที่สนใจสามารถศึกษาเพิ่มเติมได้ที่นี่ครับ http://benalman.com/projects/jquery-hashchange-plugin/

แหล่งที่มา: http://benalman.com/projects/jquery-hashchange-plugin/