當你「喜歡」一個頁面被切斷時，Facebook共享窗口

我想把FB加入我的網站。類似的似乎工作正常。但是，當有人點擊「Like」按鈕（在Mac Lion上使用Firefox）時，會出現一個共享框，這是我的頁面上的截屏。理想情況下，我希望共享框完全顯示，以便訪問者可以分享他們喜歡的內容。如果這是不可能的，那麼一起去掉共享框就只剩下「贊」了。當你「喜歡」一個頁面被切斷時，Facebook共享窗口

下面是它的外觀：

facebook like http://www.sofiaandluis.com/public/facebook_like.png

下面是代碼： HTML

<div class="column-area"> 
    <div class="suscribe-social"> 
     <div class="up make-word-breakable"> 
      <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/all.js#xfbml=1&appId=xxxxxx"; 
       fjs.parentNode.insertBefore(js, fjs); 
      }(document, 'script', 'facebook-jssdk'));</script> 
      <div class="fb-like" data-href="https://www.facebook.com/pagename" data-send="false" data-width="300" data-show-faces="true" data-font="verdana"></div> 
     </div> 
     <div class="down make-word-breakable"></div> 
    </div>

CSS

.column-area { 
    width: 300px; 
    display: block; 
    box-sizing: border-box; 
    float: left; 
    margin-left: 2.127659574%; 
} 
.suscribe-social { 
    border: 1px solid #E4E4E1; 
    margin: 5px 0px 20px 0px; 
} 
.suscribe-social .up { 
    padding: 10px; 
    display: inline-block; 
} 
.make-work-breakable { 
    word-wrap: break-word; 
}

來源

2012-10-10 Danconia

好吧，讓它工作。我刪除了類

.fb-like iframe { 
    width: 290px !important; 
}

來源

2012-10-10 22:35:34 Danconia

我還沒有看到任何指示這可以通過FB api來配置，但我確實相信這應該工作：

.fb-like { 
    height: 20px; // I think that's the button height, you might need to adjust 
    overflow: hidden; 
}

評論框仍然會被加載，它只會被隱藏。不知道是否會出現任何類似的複雜情況，儘管我會懷疑它。

來源

2012-10-10 22:24:40 ultranaut

嘿@ultranaut，我試過這樣做，但沒有奏效。我也嘗試過溢出：對同一個班級可見，無濟於事。還有其他的建議嗎？......我很驚訝，這會很複雜。謝謝 – Danconia

好吧，我明白了，隱藏的溢出物可以隱藏箱子。這將工作。想知道我能做什麼以便充分展示？ – Danconia

你能提供一個到你的代碼的鏈接嗎？沒有看到它在行動中很難說。當你說它不起作用時，這是否意味着它表現出與添加之前相同？ – ultranaut

我認爲FB盒會因爲某些父元素具有「overflow：hidden」屬性而被切割。

此屬性可能會阻止FB框超過該父元素的大小。

來源

2012-10-10 22:59:14

.fb-like span{ 
overflow:visible 
!important; 
width:450px !important; 
margin-right:-375px; 
}

這應該工作.....好運

來源

2013-12-03 08:52:49 NYCity

這是很老了，但我想補充另一個答案就在這裏，不涉及對我們的CSS的!important。這是 - 說實話 - 只是看起來不正確。

.fb-like iframe { max-width:none; }

來源

2014-04-10 05:34:46 rgin

另外，position：absolute;適用於按鈕的固定器元件。

來源

2014-04-25 17:15:51 user1939291

當你「喜歡」一個頁面被切斷時，Facebook共享窗口

回答

相關問題