How to display Facebook Like button and Twitter Tweet button next to each other?_问答_开发者

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>

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

To answer your second question, you would want to load the javascript asynchronously - someone has modified the twitter script to do so, and I would imagine the facebook script has been modified to do the same.

I can't find links too readily on google, but for 5 seconds a page I'm sure you have the motivation!

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.

You can assign following CSS Class to your List Items

.NextTo
{
    float : left;
}

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

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

How to display Facebook Like button and Twitter Tweet button next to each other?

精彩评论

关注公众号

热门标签

图文推荐

How to display Facebook Like button and Twitter Tweet button next to each other?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：