Tool Pages

Facebook comments plugin responsive

Fixed fb comments bug
由於臉書修改留言板的程序, 以致使用自適應模板的網站無法調整臉書留言板外掛的尺寸. 關於這一點 Facebook Developers 已經接下 debug 工作並加入排程, 至於何時才能修復請關注這則連結：FB comments plugin debug
好啦! 接著應該沒事了! 只要等待 Facebook 將它修復即可.
如果我真的這樣做, 可能會被網友罵到臭頭! 而且這幾天冷冷的春雨讓我快要發霉... 回到留言板的部份查看模板縮放反應就覺得有點不妙. 當我嘗試將樣式做調整後發現並沒有作用, 原因請參考：



雖然不能修改 fb-comments iframe 內部樣式, 但能夠藉由 Javascript 外框重設使留言板符合 width: 100% 的狀態, 而這個鑽漏洞的方法並不違反同源政策. 請先看看原有的臉書留言外掛程式碼, 在顯示留言的其中一段如下：

<div class='fb-comments' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>

假設 data-width='500' 是留言板的初始設定, 這個部份設定為響應式模板的留言板顯示尺寸.
查看留言版程式碼被包夾在範本 CSS 中哪一個區塊? 它的選擇器 (class or id) 為何? 例如: Blogger 的留言板可能被 date-posts 框取; 雖然官方範本並沒有自適應式的設計. 又或者如我的留言板被圖中紅框範圍的留言區塊包住, 假設該樣式為 id='comments-container' (#comments-container)

fb-comments bug

找到你的留言區塊後, 增加以下一段 <script> 即完成. 請自行修改紅字代碼.  網站內尚未使用 jQuery 程式庫者, 請另行附加到範本裡.

$(window).resize(function(){$('.fb-comments').attr('data-width', $('#comments-container').width());FB.XFBML.parse($('#comments-container')[0]);});

OK! 如果你真的不知道這一小段 javascript 要放在哪裡?! 請找到原有的 facebook comments code, 增加到它的後面即可. 待留言板修復後, 你也能很快地刪除這一小段代碼. 請修改紅字代碼!

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR APP ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).resize(function(){$('.fb-comments').attr('data-width', $('#comments-container').width());FB.XFBML.parse($('#comments-container')[0]);});
</script>

well, 這一篇大概會成為最短壽、做心酸的文章, 等 FB 修復後就失效... 不過我還滿樂觀的, 臉書經常會出這種茶包, 以後說不定還有機會從箱底翻出來.