Green: 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*/

og:title 分享到 Facebook 的標題
og:type 分享內容的種類 EX：product、movie
og:url 分享內容的網址
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*/

og:video 影片所在的位置URL
og:video:width 載入影片的寬度最大398
og:video:height 載入影片的高度最大460
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 兩個參數

Green

2011年4月11日

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

2 則留言: