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/

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 : 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/

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/