CODEWITHSUNDEEP
jqueryhtmlfacebook-likegoogle-plus
Paul
Paul

Reputation: 11746

placement of facebook like and google + buttons inline?

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>

Upvotes: 9

Views: 8252

Answers (4)

Kuwar Dheeraj Srivastava
Kuwar Dheeraj Srivastava

Reputation: 1

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

Upvotes: 0

jflaflamme
jflaflamme

Reputation: 1797

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/

Upvotes: 0

AndyD
AndyD

Reputation: 895

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

Upvotes: 19

Narek
Narek

Reputation: 3823

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

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

Upvotes: 0

Related Questions