使用 CSS 控制 Facebook Like/Send 按钮的位置

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5864194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:27:02  来源:igfitidea点击:

Using CSS to Control Position of Facebook Like / Send Buttons

cssfacebookfacebook-like

提问by John

I am trying to position a Facebook like button (which includes a "Send" button) using CSS. Below is the code provided by Facebook along with the div tag classed "like" that I added. Below that is the corresponding CSS. The CSS I am applying does not work; it seems to be overwritten by styling inherent in Facebook's code.

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

How can I position a Facebook like button using CSS?

如何使用 CSS 定位 Facebook 点赞按钮?

Thanks in advance,

提前致谢,

John

约翰

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

The CSS:

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;

}

回答by Phelan

I had the same problem. Just wrap an outside div around it and it'll work like a charm.

我有同样的问题。只需在它周围包裹一个外部 div,它就会像魅力一样工作。

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

回答by tobiasknabe

not sure, if this is still open but the only solution is, if you do it like this:

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

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

a second way is,

第二种方式是

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

回答by Pete

I was struggling with these solutions not working until I realized that Facebook's "GET CODE" wizard for the LIKE button defaults to a width of 450 pixels. I didn't pay attention to that, because the button looked OK on my site. But I finally realized that the Facebook LIKE code was grabbing a 450-pixel wide space, whether the button's info needed it or not. That is why I could not get all the various buttons to stay on the same line. Once I changed the width to 80, I did something similar to what was suggested above and it worked like a charm.

在我意识到 Facebook 的“获取代码”向导的 LIKE 按钮默认宽度为 450 像素之前,我一直在努力解决这些问题。我没有注意这一点,因为该按钮在我的网站上看起来不错。但我终于意识到 Facebook LIKE 代码占用了 450 像素宽的空间,无论按钮的信息是否需要它。这就是为什么我无法让所有不同的按钮保持在同一行上。一旦我将宽度更改为 80,我做了一些类似于上面建议的操作,它就像一个魅力。

Duh. Eat humble pie.

呃。吃简陋的馅饼。

回答by Cylex

My goal: Facebook-Follow-Button should show up to the right of a text-Label (Facebook: "Button")

我的目标: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-->

... --> Other Buttons...

... --> 其他按钮...

Hope that helps folks!

希望对大家有所帮助!