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

Answer 1

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

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

Answer 2

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

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/

Answer 4

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