我把Facebook留言板變活了！Facebook Comment Responsive Design！

, , , ,

最近在做Responsive Design（響應式設計、自適應設計）的網站時，意外發現Facebook的留言板無法用%來設寬度，只能用pixel固定寬度。

雖然Facebook的留言板預設在手機上會把寬度變成100%，但其實有的時候會出現不是在手機上用，卻想把網頁縮小一點點的情況，例如上班偷看網頁所以我很不懂為甚麼Facebook要強制用px？

我用「facebook comment responsive」的關鍵字在Google上查了很多資料後，本來有看到用CSS強制覆蓋Facebook提供的屬性來讓留言框可以變成Responsive的狀態，但有用的人應該會發現已經在2014年3月失效了⋯⋯

為甚麼我知道是2014年3月呢？因為後來我又繼續爬，發現了一個頗簡單的解法！而提問的人大多是在3月發生的XD

只要在Facebook的留言框前面貼上這段原始碼就解決了！
<script>
$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
    width = $(".fb-comments").parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}
</script>

以我的站來說，貼完之後會像這樣：
<!-- Facebook 留言板 start -->

<script>
$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
    width = $(".fb-comments").parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}
</script>

<div class="fb-comments" data-colorscheme="light" data-numposts="5" expr:href="data:post.url">
</div>
<!-- Facebook 留言板 END -->
實際效果可以看本站的Facebook留言板，並調整瀏覽器的寬度試試看！

PS. 如果沒有裝過JQuery的人，請在<head>和</head>之間插入引用的原始碼，下面提供兩個來源，二選一即可。

JQuery的來源：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Google的來源：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

出處：How to make Facebook comments widget a fluid width?
comments powered by Disqus