Loading...

2011年4月3日 星期日

[Blogger][Fix] 分享到 Facebook 卻發現圖抓錯？Facebook Like Button and Open Graph protocol

4/03/2011 吉米言 筆回應

image

Facebook Like Button (讚) 其實也是兼有分享的功能，這點大家應該知道，只是分享的時候不像另一個 Facebook Share Button 可以選擇圖片，如果用 Facebook Like Button 分享的話，圖片和內容都是 Facebook 自己抓的，所以如果你要求分享出去的內容和圖片是適當的話，就必須要設定好 Metadata。

底下就針對 Blogger 的環境做一份簡單的教學，其實所有網站的觀念都是一樣的，必須透過 Open Graph Protocol 來跟 Facebook 做清楚的溝通。

在繼續看之前，如果您還沒有裝 Facebook Like Button，請參考在下之前的教學文章：[Blogger] 淺談 Facebook Social Plugins 的安裝

關鍵的組成，幾個基本的 Metadata：

<meta property="og:title" content="我是標題" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://jimmyyen.blogspot.com/00030.html" />
<meta property="og:image" content="http://lwww.abc.com/9c.jpg" />

看上面的例子應該很清楚了：

og:title 指的是該網址的標題

og:url 指的是該網址

og:image 指的是該網址指定顯示的圖片，我是用固定式的，其實我想應該也可以寫一個 Script 變成動態指定不同篇不同圖，這個讓高手去玩就好

og:type 我是選用 article，其他型態的指定您可以參考 Facebook Open Graph 文件，拉到底下有一個 Object Type 的專章

所以在 Blogger 底下怎麼做呢？

配合我之前寫的：[Blogger] 淺談 Blogger SEO (Search Engine Optimization)，裡頭第二項 PageTitle 的修改，底下是我目前所使用的：

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWy9OR9j-YcI0OpmVgXDfKw6MLGl_tfaAETqS0PnjdwFJJuxcZlFLqp20tVN4IQwvxnCSyanzUhjSxSR5EqeVc_4SdBG-C7euk5bNd7_Tv0RkLcV2wmHA7cAb5FsZKTEWPGAeXQTIxopPa/s800/86bd258ab774ff36bf3651a09c3a18e6.jpeg' property='og:image'/>
<meta content='0000' property='fb:admins'/>
<meta content='0000' property='fb:app_id'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:title'/>
<b:else/>
<title><data:blog.pageName/> | ZOG</title>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>

其實主要只是為了固定圖片的顯示而已，其他的不加好像也不會有問題，只是順便就加進去了，這其中，共用的部份我就加在判斷式之前，然後 fb:admins 和 fb:app_id 這兩個項目就查一下你 Facebook 的 id 以及應用程式的 App_id，不然就不要加，可以參考 Facebook Open Graph 文件。

這段語法加在 <head> 與 </head> 之間即可。

以上供大家參考，並歡迎討論。

補充：

如果還是有問題，記得要在 <html> 的 tag 裡加上：
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'

如下：

<html xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'>

文章分類：