如何在彼此旁边显示 Facebook Like 按钮和 Twitter Tweet 按钮？

发布于 2024-11-02 21:11:47 字数 3975 浏览 5 评论 0原文

我无法让 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倒数 2024-11-09 21:11:47

怎么样：

.social li {
    float: left;
}

这将有助于查看您的实际 HTML。不是一个 HTML 标签，它是 Facebook 他们编写的小型标记语言 (FBML)，当 Facebook 的 JavaScript 运行时，它会被实际的 HTML 替换。

（我相信他们也希望弃用 FBML — 您可能想看看基于的 Like 按钮。）

How about:

.social li {
    float: left;
}

It would help to see your actual HTML. <fb:like> is not an HTML tag, it’s Facebook’s little markup language they made up (FBML), and it gets replaced with actual HTML when Facebook’s JavaScript runs.

(I believe they’re looking to deprecate FBML too — you might want to have a look at the <iframe>-based like button.)

回复收藏 0 原文

水溶 2024-11-09 21:11:47

要回答你的第二个问题，你需要异步加载 javascript - 有人修改了 twitter 脚本来执行此操作，我想 facebook 脚本也已被修改为执行相同的操作。

我在 google 上不太容易找到链接，但是一个页面 5 秒，我相信你有动力！

回复收藏 0 原文

红颜悴 2024-11-09 21:11:47

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

The simplest solution I have found is to wrap your buttons in a LI inside a UL.

Take your facebook button code:

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

Change the DIV tag to LI, and set it inside the UL with the rest of your buttons:

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

And set your CSS widths for the class fb-like down to something closer to its actual size.

回复收藏 0 原文

×纯※雪 2024-11-09 21:11:47

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

.NextTo
{
    float : left;
}

或

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

You can assign following CSS Class to your List Items

.NextTo
{
    float : left;
}

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

回复收藏 0 原文

不知在何时 2024-11-09 21:11:47

我还花了很多时间将它们放在一起并相邻显示，终于找到了最简单的解决方案。

您只需在以下之间添加 html 代码即可：

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

I also spent a lot of time to bring them together and show next to each other and finally found the easiest solution..

You simply need to past html codes between:

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

回复收藏 0 原文

~没有更多了~

关于作者

只涨不跌

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

如何在彼此旁边显示 Facebook Like 按钮和 Twitter Tweet 按钮？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如何在彼此旁边显示 Facebook Like 按钮和 Twitter Tweet 按钮？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。