2011年4月11日

Facebook 使用 Open Graph protocal 輕鬆分享影片

Hi all, 今天來介紹一下 facebook 使用 Open Graph protocal 來輕鬆分享影片的方式,之前在facebook 上分享影片,我使用的方式大致上可能是使用到 FB API將影片直接發到塗鴉牆上或者是將影片上傳至Youtube後,再將網址分享到Facebook來分享影片;當然之前也有直接使用meta來分享,不過我看得亂七八糟搞不懂,所以大多沒有直接使用。

Open Graph protocal 其實也是使用 meta 來定義分享的內容,不過因為facebook有自行定義過他使用的meta,在測試過後,我覺得比較方便,而且除了這些之外,他也可以搭配facebook 的Like Button 來使用,後面一起介紹 。

使用Open Graph protocal,會有四個基本的meta會需要設定
<meta property="og:title" content="FB Meta Video"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://1001.webgene.tw/green/facebook/meta/"/>
<meta property="og:image" content="http://1001.webgene.tw/green/facebook/meta/Icon.png"/>
/*end*/
  1. og:title 分享到 Facebook 的標題
  2. og:type 分享內容的種類 EX:product、movie
  3. og:url 分享內容的網址
  4. og:image 分享內容的圖片
這邊可能會注意一般我們在分享的時候Title、內文及照片是使用下面的方式:
<meta name="description" content="[DESCRIPTION]" />
<link rel="image_src" type="image/jpeg" href="[PHOTO_URL]"/>
<title>[YOUR_TITLE]<title/>

差別是在 一個是使用 Link button 去分享 另一個則是直接貼網址在fb上分享的差異,值得注意的使用貼網址來分享的方式,仍然需要加上
<link rel="image_src" type="image/jpeg" href="[PHOTO_URL]"/>
不然圖片會抓不到,title的部分則會直接被 og:title 取代,如果有使用og:description 也會直接取代 description的部分

介紹基本的四個meta後,接下來介紹video所需要的四個meta:
<meta property="og:video" content="http://1001.webgene.tw/green/facebook/meta/flvplayer.swf"/>
<meta property="og:video:width" content="390"/>
<meta property="og:video:height" content="260"/>
<meta property="og:video:type" content="application/x-shockwave-flash"/>
/*end*/
  1. og:video 影片所在的位置URL
  2. og:video:width 載入影片的寬度 最大398
  3. og:video:height 載入影片的高度 最大460
  4. og:video:type 影片的載入播放方式 <--- 不知道這樣說是否合適,請大家多包涵一下
這邊要注意一下的事,如果是影片的話,通堂會需要一張圖片,不然的話他沒有辦法去點擊播放,那張圖片要放在og:image Or <link rel="image_src" type="image/jpeg" href="..."/> 中,需要特別注意一下;我目前只有看到 flash player 的播放方是不確定是不是有直接播放h.264影片格式的方式,如果有的話之後再補充;將這四個meta加上html後,html的head部分大至上如下:
<head>
<link rel="image_src" type="image/jpeg" href="http://1001.webgene.tw/green/facebook/meta/Icon.png"/>
<meta property="og:title" content="FB Meta Video og title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://1001.webgene.tw/green/facebook/meta/"/>
<meta property="og:image" content="http://1001.webgene.tw/green/facebook/meta/Icon.png"/>
<meta property="og:site_name" content="Green's Meta Test"/>
<meta property="og:description" content="Test Share Video to Facebook"/>
<meta property="og:video" content="http://1001.webgene.tw/green/facebook/meta/flvplayer.swf" />
<meta property="og:video:height" content="260" />
<meta property="og:video:width" content="390" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<title>FB Meta Video Html Title</title>
</head>

到這邊,就算是大功告成了,不過我們在加上一個Like button,來看看使用link button分享跟直接貼網址的分享差異是什麼;使用 URL Linter 輸入 網址後,如果正確的話應該會出現下面的內容:

可以在這個頁面檢查輸入的內容有無錯誤,如果再使用Open Graph protocal有錯誤的話他也會另外標示出來,在下面有個Like button的部分,有提供iframe的soure code可以複製,將他貼到html後;分別測是分享的效果:

Like button 分享

貼網址分享

眼尖的話會注意到左下方的icon有明顯的不同喔

這就是這次分享的內容,當然Open Graph protocal可以使用的部分還不只這些,他還可以搭配其他的social plugins來使用,可以去統計分享的次數,誰分享的這些東西,多少人對這個東西點了讚之類的,不過怎麼用可能還要研究一下;希望這次的分享對大家有幫助囉,如果有什麼錯誤也請大家給我更至以及指教,謝謝。

demo:範例網址
reference:Facebook Open Graph protocal

補充:
Eric艾額外問了一個那是不是可以在這邊直接將參數帶入swf中;答案是可以的,帶入的方式如下:
將og:video的路徑改成 http://1001.webgene.tw/green/facebook/meta/flvplayer.swf?param1=one&param2=two
<meta property="og:video" content="http://1001.webgene.tw/green/facebook/meta/flvplayer.swf?param1=one¶m2=two" />
在flash中的as3寫法
trace(stage.loaderInfo.paramters['param1']); // one
//也可以使用這樣的方式去看會帶入哪些值近來
for(var $s:String in stage.loaderInfo.parameters)
{
    trace(stage.loaderInfo.parameters[$s]);
}
// 除了剛剛的param1、param2外 還會有 width 跟 height 兩個參數

2 則留言:

  1. 請問 這個 Facebook分享 跟 網站有幾臺服務器有關係嗎?

    我們有一個 開發測試服務器 一台, 預覽測試機 一台,正式服務器 六台集成,

    Facebook 分享在 開發測試機,預覽測試機都可以看到 頁面信息, 但是到 正式服務器 就什麼都拿不到?
    請問對這個有什麼建議?

    回覆刪除
    回覆
    1. 您好,關於這個問題我可能沒有辦法給你一個比較完整的答覆,建議您到facebook的討論區找找看有無比較完整的答案。

      刪除