[Blogger] 分享到 Facebook 卻發現圖抓錯？Facebook Like Button and Open Graph protocol
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/AVvXsEg2jgZCCWCtLPet3wNYDyJXlKC_uRO-V2KTZ5OZuNtDxVKKhgPVsA9jQB9CNx_cCS3sc0TKp9GXe8amyPbJvK4-dGlFj_nod_3q3r_0Y7Y-zTLpat2TYazXt7OKBDxCsNqBl7yDKw/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 == "index"'>
<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#'>
喔喔!學習了!
回覆刪除不然我得like button都抓錯圖
thax~
Re: 鄔騏鴻 <4453096908155572180>
回覆刪除:-)
如果想針對特定文章，顯示另一種標題OG，要如何寫語法? 因為我用統一的標題.....
回覆刪除可以用：
回覆刪除<b:if cond='data:blog.url == "填入您的url"'>
...code
</b:if>
不好意思，想請問若是想針對不同的文章指定fb分享時的圖片，應該要怎麼設定呢？？
回覆刪除（每發表一篇新文分享時就需要新增文中提到的那四行語法於head中嗎？）
不做任何設定的話，該篇文章裡如果是上傳到 picasa 圖床，fb 會抓得到，但如果是上傳到 flickr 等外部的圖床，就抓不到。
回覆刪除如果你都使用內建的 blogger 版型，並且圖都是由 blogger 編輯器傳到 picasa 的話，就什麼都不用設定了。
謝謝回應！！！
回覆刪除我文章中的首圖會使用picasa中的照片 (為了右側欄的popular post可顯示該文章圖片)，而文中其他照片則是連結flickr。重點來了...當我分享至FB時，FB並不會自動抓到我的文章首圖（該圖位於picasa）耶！反而會隨機抓取三張我從flickr連結過去的圖....>< 讓我很困擾，請問此狀況建議怎麼處理呢？
基本上 FB 決定用哪一張圖，在沒有設定 meta property="og:image" 時，是沒辦法指定他的行為的(特別是圖很多的情況)，但 Blogger 麻煩的地方是沒有辦法有一個欄位像 wordpress 一樣設定該篇文章的代表圖片，也沒辦法自動用程式去將某一張代表圖套進 og:image。
回覆刪除大概就是這樣了，所以我目前還是使用同一張圖，就不讓 FB 幫我選圖了，因為我之前測試實在無法預料他會幫我選什麼圖。
好像沒幫上什麼忙，你參考看看。
真的要認真每一篇都設定的話，好像也只能
<b:if cond='data:blog.url == "填入您的url"'>
...code
</b:if>
請問你說的使用
刪除...code
這個方式應該如何加入??是逐篇文章進入HTML加入嗎??應如何放置??謝謝你