Question

我无法让FB Like按钮和Tweet按钮显示在彼此旁边!!

HTML：

<div class="grid_3 social">
  <ul>
     <li>
          <fb:like href="http://{{ request.get_host }}{{ post.get_absolute_url }}" layout="button_count" show_faces="false" width="450" font=""></fb:like>
     </li>
     <li>
          <a href="http://twitter.com/share?url={{ "http://localhost:8000"|urlencode }}{{ post.get_absolute_url }}&text=mytext" class="twitter-share-button">Tweet</a>
      </li>
   </ul>
</div>

CSS：

.social {
float: right;
}
.social ul {
    list-style: none outside none;
    display: inline;
}

.social li {
    display: inline;
}

我尝试了所有我能想到的组合无济于事。请帮忙！！ CSS将是我的死...

虽然我们讨论这些按钮的主题，但我们都知道它们会使页面的加载时间增加一倍和三倍，因为它们会进行大量的JS调用，尤其是当您使用博客索引页时。任何人对如何纠正这种情况有任何想法？我已经在使用Disqus，现在添加FB和Twitter我的索引页面最多可能需要5秒才能加载。太慢了。在按钮上显示没有计数帮助吗？

谢谢！

编辑：从Firebug获取的实际HTML：

      <div class="grid_3 social">
<ul>
<li>
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" font="" width="450" show_faces="false" layout="button_count" href="http://localhost:8000/24/">
<span>
<iframe id="f3625cd56daea42" class="fb_ltr" scrolling="no" name="fdb43a564bf6bc" style="border: medium none; overflow: hidden; height: 25px; width: 450px;" title="Like this content on Facebook." src="http://www.facebook.com/plugins/like.php?api_key=109222892497007&channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D0%23cb%3Df30031a637a623%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff1d530a50043dd4%26relation%3Dparent.parent%26transport%3Dpostmessage&href=http%3A%2F%2Flocalhost%3A8000%2F24%2F&layout=button_count&locale=en_US&node_type=link&sdk=joey&show_faces=false&width=450">
<html id="facebook" class=" " lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="plugin transparent_widget ff3 mac Locale_en_US">
<input id="post_form_id" type="hidden" autocomplete="off" value="fa23e0256eb11be4c423202178ac80f5" name="post_form_id">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<div id="LikePluginPagelet">
<div id="connect_widget_4daeb2d755f689e27484431" class="connect_widget button_count" style="">
<table class="connect_widget_interactive_area">
<tbody>
<tr>
<td class="connect_widget_vertical_center connect_widget_button_cell">
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">Like</span>
</a>
</div>
</div>
</td>
<td class="connect_widget_vertical_center connect_widget_confirm_cell">
<td class="connect_widget_button_count_including hidden_elem">
<td class="connect_widget_button_count_excluding">
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
</body>
</html>
</iframe>
</span>
</fb:like>
</li>
<li>
<iframe class="twitter-share-button twitter-count-horizontal" scrolling="no" frameborder="0" tabindex="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/tweet_button.html?_=1303294651733&count=horizontal&lang=en&text=mytext&url=http%3A%2F%2Flocalhost%3A8000%2F24%2F" style="width: 110px; height: 20px;" title="Twitter For Websites: Tweet Button">
<html lang="en">
<head>
<body class="hcount show-count">
</html>
</iframe>
</li>
</ul>
</div>

Answer 1

怎么样：

.social li {
    float: left;
}

查看您的实际HTML会有所帮助。 <fb:like>不是HTML标签，它是Facebook组成的小标记语言（FBML），当Facebook的JavaScript运行时，它会被实际的HTML取代。

（我相信他们也希望弃用FBML - 您可能希望看看基于<iframe>的类似按钮。）

Answer 2

要回答你的第二个问题，你会想要异步加载javascript - 有人修改了twitter脚本这样做，我想可以修改facebook脚本来做同样的事情。

我在google上找不到链接，但是5秒钟一页，我确信你有动力！

Answer 3

我发现最简单的解决方案是将您的按钮包装在UL内的LI中。

拿你的facebook按钮代码：

<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>

将DIV标签更改为LI，并使用其余按钮将其设置在UL内：

<li class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></li>

并将类fb类的CSS宽度设置为更接近实际大小的值。

Answer 4

您可以将以下CSS Class分配给列表项

.NextTo
{
    float : left;
}

或

.NextTo
{
    display: inline-block;
    width: auto;
}

Answer 5

我也花了很多时间把它们放在一起，彼此相邻，最后找到最简单的解决方案..

您只需要通过以下之间的html代码：

<div align="center">... past your code here...`</div>`

如何显示Facebook Like按钮和Twitter Tweet按钮彼此相邻？

5 个答案: