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

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

MUKI AI Summary

Facebook 的 Page Plugin 預設不支援 RWD,可以在 CSS 中加入特定程式碼來實現。首先,隱藏 #fb-root 元素以防止 layout 變形。接著,設定 .fb_iframe_widget 及相關元素的寬度為 100% !important,以確保所有容器適應不同螢幕尺寸。

程式碼來源於 Stack Overflow,提供了如何讓 Facebook like box 具備響應式設計的解決方案。這樣的設定能讓社交小工具在不同裝置上顯示良好。...


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

歡迎給我點鼓勵,讓我知道你來過 :)

MUKI says:

如果文章有幫助到你,歡迎分享給更多人知道。文章內容皆為 MUKI 本人的原創文章,我會經常更新文章以及修正錯誤內容,因此轉載時建議保留原出處,避免出現版本不一致或已過時的資訊。

本文地址:https://muki.tw/facebook-widget-responsive/ 已複製

Subscribe
Notify of
guest

2 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
DC
DC
9 years ago

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

muki
9 years ago
Reply to  DC

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

Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.