CODEWITHSUNDEEP
cssfacebooktwitterfacebook-likegoogle-plus
Kamran
Kamran

Reputation: 49

Can't display Google+ and Facebook Like on the same line

I have been banging my head for last many hour to get this solved but it is not working.

I want to display Facebook Like box, Twitter and Google + on one line but it displays them on different lines and just shows Facebook Like box correctly.

Here is the code I am using:

<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 file is here: http://www.box.net/shared/2agu4dy10mb4y3pj7e1m

Upvotes: 0

Views: 7415

Answers (7)

Jellicle
Jellicle

Reputation: 30256

  1. wrap the elements in <li>
  2. style them display:inline
  3. omit the data-width attribute from the <div class="fb-like"> tag.

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>

Upvotes: 1

Er Arthur
Er Arthur

Reputation: 1

This code works:

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

#

Just change the social share URLs and other params to your own sites accordingly.

Eric

Upvotes: 0

75 Width
75 Width

Reputation: 11

The solution may be far easier -- the default width of the Facebook button is 250, open up the html and reduce it to 75 or so.

Upvotes: 1

mimming
mimming

Reputation: 13954

If CSS tweaks do not help make sure that your document is not rendering in quirks mode. Sometimes quirks rendering mode causes the +1 button to display on the next line.

You can check for this using Firefox webmaster tools or try tossing your page into a validator (http://validator.w3.org/) to make sure there aren't too many errors.

Upvotes: 0

nadiamode
nadiamode

Reputation: 61

please try

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

Upvotes: 4

syrkull
syrkull

Reputation: 2344

put padding-top:5px; on the one that is on the second line.

Upvotes: 0

monkdogz
monkdogz

Reputation: 43

iFrame is a block-level element by default. You'll have to make the display:inline in the CSS. g:plusone might be one too, but I've never heard of that tag.

Upvotes: 0

Related Questions