將Facebook頁面插件嵌入到網站中時的水平滾動條

我正在使用Wix構建網站，並使用HTML片段嘗試放入我們的公共Facebook頁面的嵌入式源中。我使用的是從Facebook開發人員工具網站（https://developers.facebook.com/docs/plugins/page-plugin）生成的代碼。將Facebook頁面插件嵌入到網站中時的水平滾動條

在HTML中，寬度設置爲500px。「小部件」顯示爲500px，但封面照片下面的帖子提要似乎佔用了比分配更多的空間，因此存在令人討厭的水平滾動條（請參閱我的網站：http://tanglewoodcarehomes.wix.com/tanglewood）。

我遠離高級HTML和CSS，但我相信有一些工作......我只需要一些指導！ HTML代碼片段的代碼發佈如下，非常感謝任何幫助。

<body> 
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=2691675043"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<div class="fb-page" width="500" data-href="https://www.facebook.com/tanglewoodcarehomes" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/tanglewoodcarehomes"><a href="https://www.facebook.com/tanglewoodcarehomes">Tanglewood Care Homes</a></blockquote></div></div> 
</div> 

</body>

來源

2015-06-21 Tom Shelbourn

通過添加以下到你的CSS擺脫不必要的滾動條：

.fb-page.fb_iframe_widget {overflow: hidden;}

這將刪除外滾動條，如果需要的話，只留下iframe垂直滾動條。

來源

2015-06-21 17:34:18

該平臺的侷限性不允許我編輯單獨的CSS樣式表，因此我將CSS添加到片段的標記中。雖然這確實會從顯示中刪除水平滾動條，但是帖子的提要仍然比框架大，所以水平滾動仍然存在。有什麼辦法強制封面照片下方的內容與封面照片的寬度相同以防止滾動問題？感謝幫助！ –

你不能。宇宙中你無法用自己的CSS來影響iframe的內部。這基本上就是iframe的用途 - 將嵌入式內容與嵌入頁面的CSS進行屏蔽。

Facebook borked它。他們必須解決它。

來源

2015-06-21 19:23:46

將Facebook頁面插件嵌入到網站中時的水平滾動條

回答

相關問題