Blog

Getting LinkedIn and Facebook share buttons to align…

Tuesday, August 26th, 2014

Out of the box, the LinkedIn and Facebook share buttons simply don’t align.  They look like this:

I solved this for http://www.easynda.com using tips from http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/ and some refinements.

I started by trying to use margins or padding in CSS to adjust the position of the social buttons, but that didn’t work. Each button has slightly different margins and padding, which meant my adjustments never worked right and didn’t look the same across browsers.

What’s needed is to be able to accommodate the variation between buttons and to get them to stay where I put them in my HTML. The solution to is using floats. Max Design has a nice tutorial on floats with examples here: //css.maxdesign.com.au/floatutorial/introduction.htm.

Following the tips from Neil’s site got me to here – but with clear problems.

The LinkedIn button sits at the top of its DIV while the FB buttons sits in the middle of it’s DIV as seen in the first image. There are a couple of issues to note:

1. the FB share button width is minimum 90px per //developers.facebook.co…. All well and good, however, the width is dynamic based on the number of shares one has.
2. there is no margin between the FB share and LI share button –
3. the LI share button needs more width, and dynamic width as it will get it’s own count as time goes on.
4. 20 px height is not enough for FB – even thought the FB button is only 20px, the JS adds pixels above the visible button. Also note that the bottom of the count bubble is cut off
5. and most obvious of all, the vertical positioning with LI riding high.

I solved the problem by adding a 4px margin to the LI containing HTML DIV, changing the CSS width to a max-width of 90px, changing the CSS height to a min-height, and adding CSS padding-right of 4px.

The results are what was live as of the date of this posting and look like this:

Here is my HTML and CSS:

<div class="social-button-container" style="position: relative; z-index: 999;">
  <div class="social-button">
    <div class="fb-like" data-href="http://www.easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
  </div>
  <div class="social-button" style="margin-top: 4px;">
    <script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script>
  </div>
</div>

.social-button-container {
  /*background-color: red;*/
  /**
  * This is a nice CSS trick that allows you to clear an element
  * without having to add extra elements to your HTML. This helps
  * seperate content from design, which should always be an architectural
  * goal.
  */
  overflow: hidden;
  float: left:
}

.social-button {
  float: left;
  min-width: 90px;
  min-height: 20px;
  padding-right: 4px;
}

 

---