【茶包射手日記】網頁 FB 按讚分享區塊變空白

不知道大家有沒有注意到，我的部落格文章下方本來掛了一個 FB 按讚跟分享鈕的區塊，不知從何時起變成空白一片。依據觀察，讀者們幾乎都從 FB 專頁訂閱及後續互動得知有新文章 (RSS 在部落格界已成時代的眼淚，在 Podcast 界倒是獲得新生)，頁面有無按讚分享鈕影響不大，於是這個蒜皮小問題便被我擱著了，懶得花時間研究。但偶爾會接到熱心朋友的提醒：

昨天不知吃錯什麼藥，無意瀏覽到 Blog 專案資料夾，想說來把它修一修好了。起初的想法八成是 Facebook API 換版導致舊版 Plugin 無法顯示，看個文件、改個 .js URL 或調個寫法，不到半小時應可搞定。萬萬沒想到，換成說明文件的最新範例(如下圖)，還是空白一片!!

爬文沒找到答案。又胡亂試了方法，懷疑可能跟 localhost 有關，還特地把修改版推到正式機實測，依然無解；中間還異想天開試著去解讀按讚區塊的 JavaScript，想當然爾是無功而返。原本以為該輕鬆秒殺的小問題，滿頭大汗搞到凌晨一點，終於被我找出原因。

破案關鍵出現在測試過程的無意發現 - 當 Plugin 對映網址還沒人按過讚，按讚鈕是可以顯示的；一旦有人按讚，區塊便會轉成空白。於是我做了實驗，FB 說明頁有調參數即時預覽的功能，官方範例本身就是空白一片；但如果我故意把按讚 URL 改成不存在的位置，按選跟分享鈕就會出現。

由這個線索，我很快發現，Layout 參數有四種：standard、box_count、button_count、button，預設的 standard 是壞的，但其他三個是好的，根本是他 X 的 standard 版程式有 Bug 啊啊啊啊啊~~~

謎題解開，內嵌 FB 按讚分享區塊時，data-layout 參數不要設 standard 就不會踩到雷! 這是我用三小時換來的答案，分享給大家。

結案。