2010年5月8日 星期六

Add "Open Graph" to your Blogspot

關於Open Graph protocol 可以參考http://developers.facebook.com/docs/opengraph

首先要做的就是把一堆meta tag加到範本(template)去, 因此到你blogspot的控制台的版面配置->修改HTML, 因為會需要把"like"加到每篇文章去, 記得先勾選"展開小裝置範本"

基本上我們可以把blog首頁的type定為"blog", 每篇文章為"article", 因此"og:title"的部份就需要做點判斷(如綠色字部份), 其餘的如粗體字部份填上對應的資料就好

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='YOUR_EMAIL' property='og:email'/>
<meta content='USER_ID' property='fb:admins'/>
<meta content='http://IMAGE_URL' property='og:image'/>

最後, 再依照這邊的指示: http://developers.facebook.com/docs/reference/plugins/like
把like button加到 "<b:includable id='post' var='post'> " 的那區塊去(我是加到最後面)