8

FBいいねボタンとツイートボタンを並べて表示できません!!

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呼び出しを行うため、ページの読み込み時間が2倍および3倍になることは誰もが知っています。誰かがこの状況を改善する方法について何かアイデアがありますか？私はすでに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>
4

5 に答える 5

4

どうですか：

.social li {
    float: left;
}

実際のHTMLを確認すると便利です。<fb:like>はHTMLタグではなく、Facebookの小さなマークアップ言語（FBML）であり、FacebookのJavaScriptが実行されると実際のHTMLに置き換えられます。

（彼らもFBMLを非推奨にしようとしていると思います—<iframe>ベースのいいねボタンを見てみたいと思うかもしれません。）

于 2011-04-20T09:50:34.840 に答える
1

2番目の質問に答えるには、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

CSS Classリストアイテムに以下を割り当てることができます

.NextTo
{
    float : left;
}

また

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

私はまた、それらをまとめて並べて表示するために多くの時間を費やし、最終的に最も簡単な解決策を見つけました。

あなたは単に次の間にhtmlコードを貼り付ける必要があります：

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