Open Graph & oEmbed

Veronica LinMay 11, 2012

Agenda

PART 1: Open Graph PART 2: oEmbed

0 傳統網路分享的途徑與困境0 Facebook share

0 什麼是 Open Graph

0 結論

0 傳統內容網站的實作瓶頸0 結合外部資源0 什麼是 oEmbed

0 結論

PART 1:

Open Graph

很久很久以前…

家族

BBS

論壇

留言板

「各位大大你們好，我做了一個新網站，歡迎來玩。」轉貼文章四處廣告，同標題出現太多次，被系統停權

「上次我跟你說的那個，啊？你想不起來？」討論分散，無法串接

「這篇文章好有趣。（以下省略八千字）」轉貼全文，被作者警告敢不刪文就要告

「歡迎各位同好們加入！」拉下線前，讓我想想我還有哪些朋友有一樣的興趣…

Source of Photo: http://www.flickr.com/photos/furiousgeorge81/177926979/

容易分享，就更樂於分享

Facebook Share

轉貼連結，方便分享，不必全文轉貼

Facebook Share提醒：這裡有一個和你有關的討論

妳按讚的粉絲專頁我也有興趣

按過讚的網頁會自動抓取頁面的 Metadata呈現在塗鴉牆上

偶有例外

轉貼的連結竟然沒縮圖沒標題沒摘要，看起來好無趣

自救大法

Facebook Developers Debuggerhttps://developers.facebook.com/tools/debug

Open Graph Protocol

0 工程師發揮的空間0 塗鴉牆上呈現的內容漂漂亮亮0 如果一篇文章分成多頁，仍然可以把讚累積在這篇文章的主網址上頭，按讚數不會被分散

0 額外效益0 Metadata 補得好， SEO 往前跑0 其他網站可能也會利用 Open Graph

Metadata for Open Graph<meta property="og:title" content="ieKeyboard - Easily enter international characters in Internet Explorer." /><meta property="og:type" content="product" /><meta property="og:url" content="http://www.softwaremastercenter.com/iekeyboard_20605-1_software.html" /><meta property="og:image" content="http://regnow.img.digitalriver.com/vendor/20605/Boxshot1.jpg" /><meta property="og:site_name" content="Software Master Center" /><meta property="og:description" content="Easily enter international/foreign characters in Internet Explorer." />

Open Graph on Facebook Wall

Open Graph on Facebook Wall

og:image

og:title

og:url

og:description

使用者個人資訊與輸入內容

優點0 未來可利用語意來創造更強大的廣告、推薦模式0 在動態時報上，將散亂的推薦內容有邏輯地組織起來0 結合搜尋與好友推薦，改寫 SEO 公式

以 Google Plus 為例“ +1 ” 會使得排行向前提升

缺點0 隱私疑慮

0 Facebook新Graph API推出–你打算跟魔鬼做交易了嗎？「當使用者在看到各家網站紛紛冒出的 Facebook 讚按鈕的同時，恐怕並不會意識到，『這會把你的資料公開給其他參與了 Facebook 的網站』。」

0 因應方法0 關於臉書 Facebook 新的 Open Graph 的隱私設定

「其實大原則不過就是：能刪的盡量刪、能封鎖的盡量封鎖、分享範圍能縮小的就盡量縮小、能不要填真實資料的就盡量填上假資料」

PART 2:

oEmbed

也是很久以前…

教學簡報

圖片上傳

影音平台

文章分享

「我想要讓使用者上傳圖片。」自己縮圖，圖片品質還很爛，或是一輩子縮不完

「我想要拿到文章的資訊，做一個網摘平台。」Parser URL, parser HTML

「我想要分享影音。」處理影片、擷取預覽圖、搞定不太乖的串流「我想要把簡報放到平台上，讓大家直接看。」先認識 MIME-type 與 SDK ： pdf, ppt, pptx, key, odp…（…此時還不知道 PowerPoint究竟還會出個幾萬版）

Source of photo: http://www.flickr.com/photos/miserychick/4729487430/

路，無限寬廣

Web 2.0, 讓別人幫你忙九種尺寸的漂亮縮圖

省下自己爬 HTML 的時間 搞定各式各樣的 slides

擷取影片預覽圖 + 影音串流

oEmbed

oEmbed 是幫助第三方網站可以嵌入網址的相關內容的格式。當使用者提供資源的連結時，第三方網站可透過API ，取得、顯示嵌入式內容，不必自行去解析原始的內容。

“

”簡言之：把物件 (object) 嵌入 (embed) 到你的網頁

oEmbed Request

http://www.flickr.com/services/oembed/

?url=http%3A//www.flickr.com/photos/bees/

2341623661/

以 GET 傳遞網址參數傳給支援 oEmbed 的網站

oEmbed Response (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/"

} 我自己的使用習慣：Front-end: JSON, back-end: XML

應用 oEmbed & Open Graph1 發表即時預覽

2 主動產生附縮圖的連結

1

2

oEmbed 的應用 (YouTube)

oEmbed 的應用 (flickr)

優點0 用別人家的頻寬和 CPU 來處理

0批次大量快速縮圖0 處理影片、播放影片

0 用別人家的技術與實作成果解決難題0 Regular expression 不好學也不好讀

</?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)/?>

0 不用擔心今天寫的 parser ，明天因為別人網站改了又要重寫…

缺點0 可能有流量限制， e.g. 每日 request 50,000

0 每一家的實作不一致0 flickr 有 JSONP

0Pixnet 、 YouTube 沒有，遇到跨網域問題，要自己處理0 只能用白名單的方式實作， e.g. 噗浪 (Plurk)

Thank You!