Question

我正在尝试使用CSS定位类似Facebook的按钮（包括“发送”按钮）。下面是Facebook提供的代码以及我添加的“喜欢”类别的div标签。下面是相应的CSS。我申请的CSS不起作用;它似乎被Facebook代码中固有的样式所覆盖。

如何使用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;

}

Answer 1

我遇到了同样的问题。只需在它周围包裹一个外部div，它就像一个魅力。

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

Answer 2

不确定，如果这仍然是开放但唯一的解决方案是，如果你这样做：

<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;">

Answer 3

在我意识到Facebook＆＃34; GET CODE＆＃34;之前，我一直在努力解决这些问题。 LIKE按钮的向导默认宽度为450像素。我没有注意到这一点，因为我的网站上的按钮看起来没问题。但我终于意识到Facebook LIKE代码占据了450像素宽的空间，无论按钮的信息是否需要。这就是为什么我无法让所有各种按钮保持在同一条线上。一旦我将宽度改为80，我做了类似于上面建议的东西，它就像一个魅力。

咄。吃简陋的馅饼。

Answer 4

我的目标：Facebook-Follow-Button应显示在文本标签的右侧（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-->

... - ＆gt;其他按钮......

希望能帮助大家！

使用CSS控制Facebook喜欢/发送按钮的位置

4 个答案: