Monday, October 17, 2011

How to align the Facebook "like" button with Twitter and Google +1 buttons

I recently added the Facebook, Twitter and Google Plus social network sharing buttons to a Google Mapplets web page. I found that while the Twitter and Google Plus buttons align properly, the Facebook Like button is shifted slightly below the rest of the buttons. The figure below shows the problem clearly.

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.

3 comments:

owmc said...

Awesome, been looking around all day for this. It's exactly what i was looking for.

Unknown said...

Thanks a lot, it works! tried 10+ solutions from other blogs that did not do the trick for me.

ps. why is facebook annoying like this?

Unknown said...

Great article,thanks.finally works like a charm after searching 2 days on other blog.