使用CSS來控制Facebook Like /發送按鈕的位置

我想使用CSS來定位Facebook的按鈕（其中包括一個「發送」按鈕）。下面是Facebook提供的代碼，以及我添加的div標籤「like」。下面是相應的CSS。我正在申請的CSS不起作用;它似乎被Facebook的代碼固有的風格所覆蓋。使用CSS來控制Facebook Like /發送按鈕的位置

如何使用CSS定位Facebook按鈕按鈕？

由於提前，

約翰

<div class="like"> 

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({appId: 'your app id', status: true, cookie: true, 
      xfbml: true}); 
    }; 
    (function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

</div>

的CSS：

.like { 
      position:absolute; 
      width:310px; 
      left:30px; 
      top:278px; 
      color: #004993; 
      font-family:Arial, Helvetica, sans-serif; 
      font-size: 10px; 
      font-weight: bold; 
      height: 15px; 
      padding-bottom: 0px; 
      padding-left: 5px; 
      padding-top: 2px; 

}

來源

2011-05-03 John

你有演示或鏈接？我看不出爲什麼這不起作用的原因。 – 2011-05-03 01:56:09

@Wesley Murch - 因爲按鈕在iframe內呈現。 – easwee 2011-05-03 07:08:51

我認爲，iframe將被放置在與.like div相同的位置，所以它應該可以工作 – miguelSantirso 2011-05-03 08:31:59

不知道，如果這仍然是開放的，但唯一的解決辦法是，如果你不喜歡這樣：

<div id="fb-root" class="like">

第二種方法是，

<div id="fb-root" style="position:absolute; width:310px; left:30px; top:278px; color: #004993; font-family:Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; height: 15px; padding-bottom: 0px; padding-left: 5px; padding-top: 2px;">

來源

2011-07-04 07:40:33 tobiasknabe

我有同樣的問題。只需在外面包裹外面的div，它就像魅力一樣工作。

<div style="float:left; margin:10px 10px 0 0;"> 
    <div id="fb-root"></div> 
    <script src="yada-yada"></script> 
</div>

來源

2011-08-02 03:01:23 Phelan

我用這些解決方案不工作掙扎直到我意識到Facebook的「GET CODE」嚮導爲LIKE按鈕默認爲450個像素的寬度。我沒有注意到這一點，因爲按鈕在我的網站上看起來不錯。但我終於意識到Facebook LIKE代碼佔據了450像素寬的空間，無論按鈕的信息是否需要它。這就是爲什麼我不能讓所有的按鈕保持在同一條線上。一旦我將寬度更改爲80，我做了類似於上面建議的內容，並且它像魅力一樣工作。

Duh。吃謙虛的派。

來源

2012-06-20 10:04:54 Pete

您需要更改div的大小和其他屬性，這是FB buttom。請參閱[答案]（http://stackoverflow.com/a/6568600/719323） – Jones 2012-06-20 12:47:54

我的目標：Facebook的跟隨，按鈕應顯示的文本標籤的右側（Facebook的「按鈕」）

<div style="float:left; width:80px;">Facebook:</div> 
<!-- float left + 80px, depends on text length, functions also as margin to beneath button div --> 

<div style="display:inline; position:relative; top:-20; width:100px;"> 
<!-- div block embracing fb-root, display: inline not necessary with fb but with twitter-button; top:-20 adjusting horizonal pos. --> 

<div id="fb-root"></div> 
</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/de_DE/all.js#xfbml=1"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 


<div class="fb-follow" data-href="https://www.facebook.com/YOURFBLINK" data-width="150" data-colorscheme="light" data-layout="button" data-show-faces="true"></div> 

<br style="clear:both;"> <!-- prevents following stuff from floating next to our FB-Button-->

... - >其他按鈕...

希望能幫助人們！

來源

2013-12-17 14:38:10 Cylex

使用CSS來控制Facebook Like /發送按鈕的位置

回答

相關問題