After a bit of searching around the Internet, I learnt the problem can be solved by setting the DIV elements containing all the buttons to 1 pixel font-size and to display as inline-block. There is an additional Facebook DIV class element - fb_reset that needs to be displayed as inline only.
The example web page HTML code containing the buttons is shown below.
<div id="social">
<!-- +1 -->
<div class="plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" annotation="none"></g:plusone>
<!-- Place this render call where appropriate -->
<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>
<!-- end +1 -->
<!-- twitter -->
<div class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="dominoc">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<!-- end twitter -->
<!-- like -->
<div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
<!-- end like -->
</div>
The corresponding CSS style sheet to set the DIV elements is shown below:
#sidebar #social {
margin: 10px;
}
div .plusone, .twitter, .fb-like {
font-size: 1px;
display: inline-block;
}
div .fb_reset {
display: inline;
}
With the above style sheet, the buttons are aligned properly as shown below.
Awesome, been looking around all day for this. It's exactly what i was looking for.
ReplyDeleteThanks a lot, it works! tried 10+ solutions from other blogs that did not do the trick for me.
ReplyDeleteps. why is facebook annoying like this?
Great article,thanks.finally works like a charm after searching 2 days on other blog.
ReplyDelete