996's Photographic Life: [教學] Blogger加入Open Graph protocol

最近在部落格嵌入一些facebook的Social Plugins，希望藉此讓網友之間的互動更加方便。

Open Graph protocol是歸類在facebook的Core Concepts裡面，這是讓使用者加入自己定義的meta，就可以提高部落格曝光率的一種方法，好處是不用再特別內嵌facebook的程式碼，也就是說Blogger的使用者不用動到小裝置範本即可完成修改。

接下來會和大家分享要怎麼樣在Blogger中加入Open Graph protocol...

--

首先來看看什麼是Open Graph protocol

官方定義：

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.

意思是，開放式圖形協議(Open Graph protocol)使任何網頁都能在社群中成為一個可操縱的物件，聽起來有點難懂，簡單的說，我們可以在網站加入開放式圖形協議，讓每個不同類型的網站都擁有相同規格的標示(就像名牌一樣)，擁有標示的網站就像是一個可以操縱的獨立物件，使用者或是facebook就可以透過Like的行為得到網站的資訊，並且利用它。

對於網站經營者來說，加入開放式圖形協議和Like的插件，自己的網站就更容易在facebook上被廣泛的傳閱。

--

要是直接把Open Graph protocol的meta加入Blogger，那不管使用者瀏覽部落格中的任何網頁，都只會讀取到一種meta，我想要的效果是讓meta對應到使用者正在瀏覽的網頁，這樣才能把正在瀏覽的網頁分享到facebook，所以這邊要利用Blogger提供的判斷式和表示碼，稍微把meta加工一下。

然後就可以到管理頁面的設計→修改HTML，把底下加工過的meta code加入範本

在我們修改範本前，一樣要先下載完整範本做備份
接著把底下的code貼在<head>的下方

<b:if cond='data:blog.pageType == "item"'>
    <meta expr:content='"文章： " + data:blog.pageName' property='og:title'/>
    <meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
    <meta expr:content='data:blog.pageName + " 發表"' property='og:title'/>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.pageTitle' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
    <meta content='部落格名稱' property='og:title'/>
    <meta content='blog' property='og:type'/>
    <meta content='輸入你的部落格描述' property='og:description'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='網站圖片' property='og:image'/>
<meta content='臉書id' property='fb:admins'/>
<meta expr:content='data:blog.title' property='og:site_name'/>

紅色部分為使用者可以針對網站的需求自行修改的地方

以下簡單列出各種property代表的意義：
og:title 資訊標題
og:type 資訊分類完整的分類支援請參考facebook
og:url 資訊來源網址
og:site_name 資訊來源網站

最後記得儲存範本，重新整理部落格，然後檢視部落格的原始碼，就可以看到加入後的資訊。

加入後可以在<head>下方看到的meta資訊