0

これを解決するために、過去何時間も頭を悩ませてきましたが、うまくいきません。

Facebookのいいねボックス、Twitter、Google +を1行に表示したいのですが、それらを別の行に表示し、Facebookのいいねボックスを正しく表示するだけです。

私が使用しているコードは次のとおりです。

<div class="likefooter">                    

<iframe src="http://www.facebook.com/plugins/like.php?href={$my_base_url}{$story_url}& amp;layout=standard;&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;  overflow:hidden; width:450px;"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<g:plusone size="medium" annotation="inline"></g:plusone>

        </div>

CSS ファイルはこちら: http://www.box.net/shared/2agu4dy10mb4y3pj7e1m

4

7 に答える 7

4

してみてください

    <div class="likefooter">                    

    <div style="float:left;"><iframe src="http://www.facebook.com/plugins/like.php?href={$my_base_url}{$story_url}& amp;layout=standard;&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;  overflow:hidden; width:450px;"></iframe></div>  

    <div style"float:left;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>  

   <div style="float:left;"><g:plusone size="medium" annotation="inline"></g:plusone></div>  

     </div>
于 2011-08-28T01:27:12.490 に答える
1

解決策ははるかに簡単かもしれません-Facebookボタンのデフォルトの幅は250です。htmlを開いて75程度に減らしてください。

于 2012-07-15T15:27:11.250 に答える
1
  1. 要素をラップする<li>
  2. それらをスタイリングするdisplay:inline
  3. タグdata-widthから属性を省略します。<div class="fb-like">

CSS:

ul.social { list-style: none outside none; }
ul.social > li { display:inline; }

html:

<ul class="social">
  <li>
    <div id="fb-root"></div>
    <script>{{ facebook SDK script }}</script>
    <div class="fb-like" data-href="{{ your URL }}" data-send="false" data-layout="button_count"  data-show-faces="false"></div>
  </li>
  <li>
    <{{ twitter button }}>
    <script>{{ twitter javascript }}</script>
  </li>
</ul>
于 2012-05-23T19:11:07.420 に答える
0

このコードは機能します：

    <table cellpadding="4" style="width: auto !important; float: none !important; margin: 8px 0;">
                <tr>
<td><img src="http://gnosisarts.com/home/images/fancy_g2.jpg" width="75" border="0" alt="Gnosis Media Group Internet PR Firm" /></td>
                    <!-- Google +1 Section Starts -->
                    <td>
                        <g:plusone size="tall" href="http://gnosisarts.com/home/Internet_PR"></g:plusone>
                        <script type="text/javascript">
                            (function() {
                                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                po.src = 'https://apis.google.com/js/plusone.js';
                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                            })();
                        </script>
                    </td>
                    <!-- Google +1 Section Ends -->

                    <!-- Twitter Button Section Starts -->
                    <td>
                        <!-- async trick from http://techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button -->
                        <script type="text/javascript">
                        //<![CDATA[
                        (function() {
                                document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="gnosisarts" data-url="http://gnosisarts.com/home/Internet_PR">Tweet</a>');
                                var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
                                s.type = 'text/javascript';
                                s.async = true;
                                s.src = 'http://platform.twitter.com/widgets.js';
                                s1.parentNode.insertBefore(s, s1);
                        })();
                        //]]>
                        </script>
                    </td>
                    <!-- Twitter Button Section Ends -->

                                        <!-- LinkedIn Button Section Starts -->
                    <td>
                        <script type="text/javascript">
                        //<![CDATA[
                        (function() {
                                var e = document.createElement('script');
                                e.type="text/javascript"; e.async = true;
                                e.src = 'http://platform.linkedin.com/in.js';
                                document.getElementsByTagName('head')[0].appendChild(e);
                        })();
                        //]]>
                        </script>
                        <script type="IN/Share" data-url="http://gnosisarts.com/home/Internet_PR" data-counter="top"></script>
                    </td>
                    <!-- LinkedIn Button Section Ends -->

                    <!-- Like Button Section Starts -->
                    <td>
                        <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fgnosisartsmediagroup&amp;send=false&amp;layout=box_count&amp;width=65&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:65px; height:65px;" allowTransparency="true"></iframe>
                    </td>
                    <!-- Like Button Section Ends -->

            </tr>
            </table>

＃

それに応じて、ソーシャル共有のURLやその他のパラメータを自分のサイトに変更するだけです。

エリック

于 2012-12-21T19:48:03.773 に答える
0

CSSを微調整しても問題が解決しない場合は、ドキュメントがクァークズモードでレンダリングされていないことを確認してください。時々、癖のあるレンダリングモードでは、+1ボタンが次の行に表示されます。

Firefoxのウェブマスターツールを使用してこれを確認するか、ページをバリデーター（http://validator.w3.org/）に入れて、エラーが多すぎないことを確認できます。

于 2011-08-31T18:26:36.087 に答える
0

デフォルトでは、iFrame はブロックレベルの要素です。CSS で display:inline を作成する必要があります。g:plusone もその一つかもしれませんが、そのタグは聞いたことがありません。

于 2011-08-28T00:04:18.973 に答える
0

put padding-top:5px; 2行目にあるものに。

于 2011-08-28T00:20:58.170 に答える