英傑銳網路數位設計

Facebook 推出的Social Plugin 蠻多客戶都在使用，但隨著RWD響應式網頁(Responsive web design)的崛起，越來越多客戶反映網站嵌入的Social Plugin，不是被截掉，就是無法100%滿版，如果在手機上看的話更慘不忍睹...。

尤其是最多人使用的fb-like-box plugin，Facebook上面只能設定絕對的寬度(data-width)，如果你有嘗試設定100%，到了RWD響應式網頁上面，依然還是無法作用！下圖就是還尚未使用特殊的CSS語法來解決。

如果今天是RWD響應式網站，只要加入以下CSS語法以後，就可以輕鬆解決，讓fb-like-box Plugin的寬度達到100%，語法如下：

.fb-comments, .fb-comments iframe[style] {
	width: 100% !important;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	width: 100% !important;
}
    

接下來我們就來看看修改後的畫面

那麼...手機畫面呢？

搞定.....收工!!

歡迎瀏覽更多網站設計教學 http://www.injerry.com/blog.php?webpage=blog