Facebook網頁插件寬度不適用

Question

我有以下代碼設置用於顯示Facebook的插件，我的網頁上：

<div class="fb-page" data-hide-cover="true" data-href="https://www.facebook.com/bikefinders" data-show-facepile="false" data-show-posts="true" data-width="280" style="float: left; margin: 10px;"> 

這工作得很好，直到幾天前。現在由於某種原因，它看起來停留在寬度180px上 - 然而在代碼中卻是280px。任何人都知道這是爲什麼？看看這裏：www.bikefinder.no（插圖左側的插圖）。

感謝您的輸入！

Answer 1

它檢查覆蓋數據寬度屬性的父容器寬度。例如，您可以將其包裝在固定寬度的div中。

<div style="width:300px"> 
<!--Page plugin's width will be 300px no matter what you set in data-width--> 
    <div class="fb-page" ... 

</div> 

順便說一句，容器及其家長應頁面加載，否則將被讀爲0。

中可以看到你可以閱讀更多細節here

Answer 2

由於上Page Plugin doc的文件說，在標題適應寬度：

• 可能您的容器是0 px或display: none頁面加載時。
• 插件試圖獲得一個最小寬度，180px在這種情況下
• 因此，如果您確保容器具有wdith >= configured_width，它應該工作。

代碼：

<div style="min-width: 180px"> 
    <div class="fb-page" data-hide-cover="true" data-href="https://www.facebook.com/bikefinders" data-show-facepile="false" data-show-posts="true" data-width="180" style="float: left; margin: 10px;"> 
</div> 

// min-width would ensure its 180px or greater