8

I cannot get the FB Like button and the Tweet button to display next to each other!!

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

I tried every combination I can think of to no avail. Help please!! CSS will be the death of me...

While we're on the subject of these buttons, we all know they double and triple your page's load time because they make a lot of JS calls, especially when you're on something like a blog index page. Anyone have any ideas on how to remedy this situation? I'm already using Disqus, and now adding FB and Twitter my index page can take up to 5 seconds to load. So slow. Would showing no counts on the buttons help?

Thanks!

EDIT: Actual HTML taken from Firebug:

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

5 回答 5

4

怎么样：

.social li {
    float: left;
}

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

（我相信他们也在寻求弃用 FBML——你可能想看看<iframe>基于 - 的like 按钮。）

于 2011-04-20T09:50:34.840 回答
1

要回答您的第二个问题，您需要异步加载 javascript - 有人修改了 twitter 脚本来这样做，我想 facebook 脚本已被修改为这样做。

我在谷歌上找不到链接太容易了，但是 5 秒钟的页面我相信你有动力！

于 2011-04-20T09:43:54.883 回答
1

我找到的最简单的解决方案是将您的按钮包装在 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-like 的 CSS 宽度设置为更接近其实际大小。

于 2011-12-10T22:27:04.363 回答
0

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

您只需要在以下之间传递 html 代码：

<div align="center">... past your code here...`</div>`
于 2011-09-24T08:33:31.313 回答
0

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

.NextTo
{
    float : left;
}

或者

.NextTo
{
    display: inline-block;
    width: auto;
}
于 2011-04-20T10:32:17.460 回答