Open Graph & oEmbed | facebook的開放社交關係圖與其他網站的oEmbed

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

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

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

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

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

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

自救大法
Facebook Developers Debugger
https://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_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." />

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 的隱私設定
「其實大原則不過就是：能刪的盡量刪、能封鎖的盡量
封鎖、分享範圍能縮小的就盡量縮小、能不要填真實資
料的就盡量填上假資料」

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

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

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

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

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

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

優點
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 每一家的實作不一致
0flickr有JSONP
0Pixnet、YouTube沒有，遇到跨網域問題，要自己處理
0 只能用白名單的方式實作，e.g. 噗浪(Plurk)

Open Graph & oEmbed | facebook的開放社交關係圖與其他網站的oEmbed

More Related Content

Viewers also liked (20)

More from Veronica Lin (6)

Open Graph & oEmbed | facebook的開放社交關係圖與其他網站的oEmbed

Editor's Notes