Fixing FaceBook Like Button alignment with Twitter, Google and others

While developing MVC helper to render FaceBook Like Button, I saw that button did not align very well other social media buttons like Google+, Twitter, LinkedIn etc. While searching for an answer to fix the issue, I found lot of workarounds and some even suggested to add a style with some low font sizes. I was not very convinced with these solutions.

Vertical Alignment Problem

Following screenshot shows how the alignment issue shows itself.

Just by looking at the image it is clear that facebook button is causing itself to be aligned below rest of the social media buttons. This means there is some element that has it vertical-alignment style that is not playing very well with resepect tp rest of the button elements. Following screenshot shows exactly what is that element.

It is clear that facebook script is inserting a span tag that has in-line style with vertical-alignment=bottom set with it.

Fix

You could look into few possible solutions for this problem. First you can search for this element using jQuery and then modify that offending vertical-alignment style value. This solution is relying too much on knowledge of type of tag facebook uses and search criteria for that element.

I decided to choose a method that constrains the container of those buttons. The reason is that I have the control on those containers and not on how social media scripts render those buttons. So easy fix was to use following two steps.

  • Contain each button in parent container
  • Set same vertical alignment on each container. In my case I put vertical-alignment=top on each li element.

Following code snippet shows the final fix I have put on this site. You can see these buttons in action in header and footer of each post as shown below.

 <ul class="list-unstyled list-inline blog-info">
  <li style="vertical-align: top;"><div class="g-plusone" data-size="medium" 
   data-annotation="none"></div></li>
  <li style="vertical-align: top;"><a href="https://twitter.com/share" class="twitter-share-button" 
   data-via="Byteblocks" data-count="none">Tweet</a></li>
  <li style="vertical-align: top;">@Html.FaceBookLikeButton(Request.Url.AbsoluteUri, fbButtonSettings)</li>
 </ul>

It seems FaceBook is the only script that causes this button alignment issue. Other buttons align very well on their own.

comments powered by Disqus

Search

Social

Weather

12.7 °C / 54.9 °F

weather conditions Clear

Monthly Posts

Blog Tags