【茶包射手日記】網頁 FB 按讚分享區塊變空白
source link: https://blog.darkthread.net/blog/fix-fb-like-box-blank-issue/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【茶包射手日記】網頁 FB 按讚分享區塊變空白
 | 2022-06-30 08:32 PM |  | 3 |  | 1,591 |
不知道大家有沒有注意到，我的部落格文章下方本來掛了一個 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 就不會踩到雷! 這是我用三小時換來的答案，分享給大家。
- Posted in
- Trouble-Shooting
and has 3 comments
Comments
Post a comment
CommentRecommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK