แปะ embed ง่าย ด้วย oEmbed


oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

ไอเดียแก่นของ social media หรือ สื่อทางสังคม ก็คือมัน(ต้อง) share หรือ แบ่งปัน ได้ง่าย การบอกต่อมันถึงจะไปได้ไกล

oEmbed เป็นข้อตกลงสำหรับรูปแบบการ แปะ สื่อ embed (เช่น วิดีโอ เสียง แฟลช) ที่ทำให้ผู้ใช้แปะเพียง url ไม่ต้องแปะโค้ด html ยาว ๆ ซึ่งนอกจากจะงงแล้ว ยังมีโอกาสผิดพลาดด้วย

เมื่อเว็บไซต์พบ url ที่ผู้ใช้ใส่เข้ามา ก็จะวิ่งไปถามตัวผู้ให้บริการสื่อชิ้นนั้น ว่าควรจะใช้โค้ด html แบบไหน แล้วจัดการที่เหลือให้อัตโนมัติ เช่น:

  1. ผู้ใช้แปะลิงก์รูป http://www.flickr.com/photos/bees/2341623661/ ในเว็บบอร์ด
  2. เว็บบอร์ดพบว่า ลิงก์ดังกล่าว เข้าแก๊ป URL scheme: http://*.flickr.com/photos/* ซึ่งแปลว่าเป็น embed representation ซึ่งเชื่อมอยู่กับ API endpoint: http://www.flickr.com/services/oembed/
  3. เว็บบอร์ดจึงถามข้อมูลของ embed ตัวนี้ ไปที่ API endpoint โดยใช้ request ดังนี้ http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/
  4. ตัว API ส่งข้อมูลกลับมาให้เว็บบอร์ด เป็น XML หรือ JSON เช่น
    {
     "version": "1.0",
     "type": "photo",
     "width": 240,
     "height": 160,
     "title": "ZB8T0193",
     "url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
     "author_name": "Bees",
     "author_url": "http://www.flickr.com/photos/bees/",
     "provider_name": "Flickr",
     "provider_url": "http://www.flickr.com/"
    }
    
  5. ตัวเว็บบอร์ด ก็จะเอาข้อมูลตรงนี้ ไปสร้างโค้ด embed ให้เอง

ในมุมมองของผู้ใช้แล้ว แบบนี้ง่ายกว่าเยอะ

ในมุมมองของนักพัฒนาเว็บ แบบนี้ก็ปลอดภัยกว่าด้วย เนื่องจากการได้ข้อมูลของสื่อ embed ผ่าน oEmbed API ทำให้เราไม่ต้องเดาข้อมูลต่าง ๆ เอง หรือ parse ข้อมูลแบบ hack ๆ กันเอาเอง ซึ่งแม้จะใช้งานได้ แต่ถ้าเมื่อไหร่ url หรือ html ของหน้าสื่อนั้นเปลี่ยน ก็จะเกิด dead link ทันที

มีบริการรับฝากสื่อออนไลน์หลายแห่งใช้ oEmbed แล้ว เช่น Flickr สำหรับภาพ และ Vimeo สำหรับภาพเคลื่อนไหว

Providers (ตอบ request oEmbed ได้):
Flickr, Viddler, Qik, Pownce, Revision3, Hulu, Vimeo, oohEmbed — ตัวหลังสุดนี้ มันเป็นประมาณ wrapper ของหลาย ๆ บริการอีกทีนึง เช่น Amazon (Ars Technica ใช้บริการจาก oohEmbed ตัวนี้)

Consumers (แสดงลิงก์ oEmbed ได้): Pownce, Buckybase , 280 Slides, Dumble

สำหรับ WordPress มีปลั๊กอินสำหรับ oEmbed แล้วหนึ่งตัว คือ NFB Video Plugin ใช้งานได้กับ NFB (National Film Board of Canada) และ Vimeo (เป็นวิดีโอทั้งคู่)

Drupal มีก็มีโมดูล oEmbed

ถ้าอยากจะเขียนเล่นเอง ก็มีไลบรารีอำนวยความสะดวกสำหรับหลายภาษา:

น่าเอาไปใช้กะโปรเจกต์ของโอเพ่นดรีมมั่ง

technorati tags:
,
,


One response to “แปะ embed ง่าย ด้วย oEmbed”

  1. น่าจะมีประโยชน์น่ะเนี้ย. ลองใช้ดีก่า…ขอบคุณครับบบ.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.