讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果


Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果,如果希望小工具也可以用 RWD 效果的話,可以在 CSS 加入以下程式碼:

/* 
讓 FB 的 Page Plugin 可以有 RWD 的效果
https://developers.facebook.com/docs/plugins/page-plugin
*/

/* 這個元素內嵌在 iframes 裡,有可能造成部分 layout 變形,所以請把它隱藏 */
#fb-root {
    display: none;
}

/* 讓所有容器的寬度都變成 100% */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

語法來源:http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive


  • DC

    那是2012年的文章了,新版的 plugin 已經支援 RWD 很久囉!很容易可以設成自動滿版~

    • 你好,我自己實測新版是無法支援的唷,也沒辦法設定自動滿版,以上的語法效果也是我現在實際使用可以做到的。如果新版 plugin 可以支援,需要什麼設定也歡迎你一起分享唷 ^___^