Facebook comments plugin responsive

由於臉書修改留言板的程序, 以致使用自適應模板的網站無法調整臉書留言板外掛的尺寸. 關於這一點 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)

找到你的留言區塊後, 增加以下一段 <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 修復後就失效... 不過我還滿樂觀的, 臉書經常會出這種茶包, 以後說不定還有機會從箱底翻出來.

---

Author Summary

Subject : Facebook comments plugin responsive
Author : Unknown - Dream Talker Updated at: 7:55 PM
Votes : 100% - 5.0 - based on 2015
由於臉書修改留言板的程序,以致使用響應式模板的網站無法調整臉書留言板外掛的尺寸.

Unknown

5 Stars - Reviews