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

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

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

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 Facebook sets and uses cross-domain cookies

สำหรับใครที่เคยใช้ปุ่ม Login Using Facebook อาจจะเคยสงสัยว่า Facebook สามารถอ่านหรือเขียน cookies ข้าม Domain ได้อย่างไร อาจต้องลองอ่านบทความนี้ครับ บทความนี้มีชื่อว่า "How Facebook sets and uses cross-domain cookies" เป็นบทความจาก Tech Blog ของ nFriendly เขียนอธิบายไว้เกี่ยวกับเทคนิคที่ Facebook เอามาใช้ในการ อ่าน/เขียน Cookies ข้าม Domain ครับ

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