2012 年 5 月做的簡報，內容是簡單介紹 open graph 的內涵與 embed 的應用場合，內容有舉例說明 plurk 上應用 flickr 與 YouTube 的 oEmbed API。 不過這之間 facebook 改變已經很大了，open graph 已經和一開始不太相同了。 是說當時用新細明體之類的系統字應該也是想要上傳上來，用特殊字寫中文上傳上來好容易歪掉啊。

2. Agenda
PART 1: Open Graph PART 2: oEmbed
0 傳統網路分享的
途徑與困境
0 Facebook share
0 什麼是 Open Graph
0 結論
0 傳統內容網站的
實作瓶頸
0 結合外部資源
0 什麼是oEmbed
0 結論

3. PART 1:
Open Graph

4. 很久很久以前…
家族
BBS
論壇
留言板
「各位大大你們好，我做了一個新網站，歡迎來玩。」
轉貼文章四處廣告，同標題出現太多次，被系統停權
「上次我跟你說的那個，啊？你想不起來？」
討論分散，無法串接
「這篇文章好有趣。（以下省略八千字）」
轉貼全文，被作者警告敢不刪文就要告
「歡迎各位同好們加入！」
拉下線前，讓我想想我還有哪些朋友有一樣的興趣…

5. Source of Photo: http://www.flickr.com/photos/furiousgeorge81/177926979/
容易分享，就更樂於分享

6. Facebook Share
轉貼連結，方便分享，不必全文轉貼

7. Facebook Share
提醒：這裡有一個和你有關的討論
妳按讚的粉絲專頁我也有興趣
按過讚的網頁
會自動抓取頁面的 Metadata
呈現在塗鴉牆上

8. 偶有例外
轉貼的連結竟然沒縮圖沒標題沒摘要，看起來好無趣

9. 自救大法
Facebook Developers Debugger
https://developers.facebook.com/tools/debug

11. Open Graph Protocol
0 工程師發揮的空間
0 塗鴉牆上呈現的內容漂漂亮亮
0 如果一篇文章分成多頁，仍然可以把讚累積在這篇文章
的主網址上頭，按讚數不會被分散
0 額外效益
0 Metadata 補得好，SEO 往前跑
0 其他網站可能也會利用 Open Graph

12. 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_20
605-1_software.html" />
<meta property="og:image"
content="http://regnow.img.digitalriver.com/vendor/20605/Box
shot1.jpg" />
<meta property="og:site_name" content="Software Master
Center" />
<meta property="og:description" content="Easily enter
international/foreign characters in Internet Explorer." />

13. Open Graph on Facebook Wall

14. Open Graph on Facebook Wall
og:image
og:title
og:url
og:description
使用者個人資訊與輸入內容

15. 優點
0 未來可利用語意來創造更強大的廣告、推薦模式
0 在動態時報上，將散亂的推薦內容有邏輯地組織起來
0 結合搜尋與好友推薦，改寫SEO公式
以 Google Plus 為例
“+1 ”會使得排行向前提升

16. 缺點
0 隱私疑慮
0 Facebook新Graph API推出–你打算跟魔鬼做交易了嗎？
「當使用者在看到各家網站紛紛冒出的Facebook讚按鈕
的同時，恐怕並不會意識到，『這會把你的資料公開給
其他參與了Facebook的網站』。」
0 因應方法
0 關於臉書 Facebook 新的 Open Graph 的隱私設定
「其實大原則不過就是：能刪的盡量刪、能封鎖的盡量
封鎖、分享範圍能縮小的就盡量縮小、能不要填真實資
料的就盡量填上假資料」

17. PART 2:
oEmbed

18. 也是很久以前…
教學簡報
圖片上傳
影音平台
文章分享
「我想要讓使用者上傳圖片。」
自己縮圖，圖片品質還很爛，或是一輩子縮不完
「我想要拿到文章的資訊，做一個網摘平台。」
Parser URL, parser HTML
「我想要分享影音。」
處理影片、擷取預覽圖、搞定不太乖的串流
「我想要把簡報放到平台上，讓大家直接看。」
先認識MIME-type與SDK：pdf, ppt, pptx, key, odp…
（…此時還不知道PowerPoint究竟還會出個幾萬版）

19. Source of photo: http://www.flickr.com/photos/miserychick/4729487430/
路，無限寬廣

20. Web 2.0, 讓別人幫你忙

21. oEmbed
oEmbed 是幫助第三方網站可以嵌入網址的相關
內容的格式。
當使用者提供資源的連結時，第三方網站可透過
API，取得、顯示嵌入式內容，不必自行去解析
原始的內容。
“
”簡言之：
把物件 (object) 嵌入 (embed) 到你的網頁

22. oEmbed Request
http://www.flickr.com/services/oembed/
?url=http%3A//www.flickr.com/photos/bees/234
1623661/
以 GET 傳遞網址參數
傳給支援 oEmbed 的網站

23. oEmbed Response (JSON)
{
"version": "1.0",
"type": "photo",
"width": 240,
"height": 160,
"title": "ZB8T0193",
"url":
"http://farm4.static.flickr.com/3123/2341623661_7c99f48bb
f_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

24. 應用oEmbed & Open Graph
1 發表即時預覽
2 主動產生附縮圖的連結
1
2

25. oEmbed的應用 (YouTube)

26. oEmbed的應用 (flickr)

27. 優點
0 用別人家的頻寬和 CPU 來處理
0 批次大量快速縮圖
0 處理影片、播放影片
0 用別人家的技術與實作成果解決難題
0 Regular expression不好學也不好讀
</?w+((s+w+(s*=s*(?:".*?"|'.*?'|[^'">s]+))?)+s*|s*)/?>
0 不用擔心今天寫的parser，明天因為別人網站改了又要
重寫…

28. 缺點
0 可能有流量限制，e.g. 每日 request 50,000
0 每一家的實作不一致
0flickr有JSONP
0Pixnet、YouTube沒有，遇到跨網域問題，要自己處理
0 只能用白名單的方式實作，e.g. 噗浪(Plurk)

29. Thank You!