placement of facebook like and google + buttons inline?

Question

Does anyone have any tricks to aligning these two buttons on a page? By default the iframe version of the facebook like button appears below the google plus button or vice versa. Are there any css tricks to keep them inline?

This is my current attempt

<div style="float:left;width:100px;">
    <!-- Place this tag where you want the +1 button to render -->
    <g:plusone></g:plusone>

    <!--  Place this tag after the last plusone tag -->
    <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>
</div>
<div style="float:left;width:auto;">
    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmy_site&amp;layout=button_count&amp;show_faces=false&amp;width=350&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px;" allowTransparency="true"></iframe>
</div>  

Alagez

Answer 1

Put them in a list - here's what i done (excuse the jsp)

<ul class="like-buttons">
<li class="g-plus-one">
    <g:plusone count="false"></g:plusone>
</li>
<li class="twitter-like">
    <a href="http://twitter.com/share" class="twitter-share-button" data-url="<%= url %>" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</li>   

<li class="fb-like">
    <iframe src="http://www.facebook.com/plugins/like.php?href=<%= facebookUrl %>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=dark&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:30px; color:#fff!important;" allowTransparency="true"></iframe>
</li>

And the css:

ul.like-buttons{
float: left;
list-style: none;
margin: 5px 0 20px 0;
padding: 0;
width: 100%;
}

ul.like-buttons li{
    display: block;
    float: left;
    margin-right: 10px;
}
li.twitter-like{
    margin-top: 2px;
}

Were

Answer 2

Probably parent div width is less than sum of this two iframes width.

Your FB iframe has width 350px. But like button is smaller.

Baronet

Answer 3

You have to include them in a div wrapper. However, your actual is displaying on the same line for me

your code : http://jsfiddle.net/HbYn3/

Tobin

Answer 4

Use the following google plus render source:

<div style="margin-top: 11px;"><li class='g-plusone' data-size='tall'/></div></div>

You can adjust margin with your requirement. It was my requirement. By Kuwar Dheeraj Srivastava at One Click Lyrics India

Hispanic

Is there is any other ways??? Then tell me... which is more simple and working than this...??? – Hispanic

And you also need to call the .js(Javascript) file too... <script async='' defer='' src='https://apis.google.com/js/platform.js'></script> @Tobin @Baronet @Andrew – Hispanic