Facebook comments plugin responsive

14   Comments

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 修復後就失效... 不過我還滿樂觀的, 臉書經常會出這種茶包, 以後說不定還有機會從箱底翻出來.


Author Summary
Facebook comments plugin responsive
Subject : Facebook comments plugin responsive
Author : - Dream Talker Updated at: 7:55 PM
Votes : 100% - 5.0 - based on 2015
由於臉書修改留言板的程序,以致使用響應式模板的網站無法調整臉書留言板外掛的尺寸.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous8:35 AM

    @Mark X 你好
    請問如何讓Youtube影片能和響應式設計一樣調整大小?Google只找到一筆有用的內容---
    http://blog.yam.com/hanasan/article/65937678
    修改以後會自動調整但是會有點變形,這個問題困擾了好久。
    雖然跟這篇FB留言無關,不知有何解決方法?或相關教學?
    謝謝!
    @Joe

    ReplyDelete
    Replies
    1. Joe 您好, 看過您所提供的教學連結, 似乎沒有詳細分解參數修改的方式, 照樣套招下去有時會變形的. 所以我才不喜歡寫教學分享文, 好麻煩啊~ (搜尋前幾頁果然沒什麼適合的教學)
      不知道您希望使用 CSS 自動縮放樣式, 或是 javascript 自適應調整版面的方法? 無論是哪一種方法我都懶得寫... 如果這樣您還願意等, 請訂閱下方 SUBSCRIBE TO POST COMMENTS 連結, 如果我有空、或是不懶時、或是不嫌麻煩時就會分享出來. 當然直接訂閱這個部落格或是賄賂小肥貓專頁, 可能會加入排程. (哈! 玩笑而已 XD)

      Delete
    2. Anonymous9:38 PM

      好的,我已訂閱。@Mark X
      反正都已忍耐幾個月,就等你有時間寫完我再改。
      請教我不要太困難修改的那種方法,謝謝!
      @Joe

      Delete
    3. Hi! Joe,
      您需要的修改詳解請參考:
      http://xox520.blogspot.com/2014/04/youtube-iframe-responsive.html

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. mark12進不去~不過這裡可以進來,看起來 disqus 的留言不太保險呢?
    以後留言在 blogger 好了~~

    ReplyDelete
    Replies
    1. 對不起! 忽然決定將網域定在 wordpress 新站那裡, 所以這裡暫時失連.
      Disqus 跟 Facebook 一樣, 只顯示固定網址的資料, 控制台裡的留言仍然可以看到並回覆. 我仍覺得 Disqus 很好用, 上次留言版似乎抓不到資料, Feedback 給它, 當天就收到 Disqus 的回覆, 隔天就修好了!
      倒是 Facebook 這麼多天還是沒把問題解決, 出乎意料.

      Delete
  4. Anonymous2:07 AM

    你好!請問臉書新版的代碼不能安裝進去,如何使用呢?blogger 提示以下代碼。
    Error parsing XML, line 1046, column 64:
    The reference to entity "version" must end with the ';' delimiter.

    謝謝!

    ReplyDelete
    Replies
    1. 您沒提我還不知道 Facebook 更新程式了,哈哈!
      請將 connect.facebook.net/語系區域/sdk.js#xfbml=1&version=v2.0 裡面的 & 符號換成 &amp; 即可。

      修改後如下:
      connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.0

      Delete
  5. 馬克,請看我的Blogger留言頭像解析好差,怎麼回事呢?

    ReplyDelete
    Replies
    1. Blogger 修改了留言板作者頭像的尺寸,艾水妹請參考此位站長教學 修改 Blogger 留言頭像尺寸

      Delete
    2. 那個。。。我沒看到怎麼修改呢?而且我也不用改頭像照片,只需要 s35-c 放大變清晰。

      Delete
    3. 修改內容在會員專區裡面,用 Facebook 帳號登錄即可。
      如妳只需修改圖片尺寸,將以下這一段放到範本 </body> 之前,數據 100 改成頭像尺寸 x2 應該就夠用。

      <script>
      //<![CDATA[
      var img = document.getElementsByClassName("avatar-image-container");for(i = 0; i < img.length; i++) img[i].childNodes[0].setAttribute("src", img[i].childNodes[0].getAttribute("src").replace(/s\B\d{2,4}/,'s' + '100'));
      //]]> </script>

      Delete
    4. 改好囉!謝謝!

      Delete