Facebook Buttons Finally Fixed?
April 30, 2013 – by Per Christensson
This is not the first time this has happened. The Like buttons have randomly changed position at least three times in the past two years. Each time, I have to manually edit my CSS code to get the Facebook Like buttons to appear in line with the Google +1 and Twiter Tweet buttons.
What has been especially annoying is that the Like buttons would appear in slightly different positions in different browsers. Therefore, I've had to run a browser check and load a separate CSS file just to position the Like buttons correctly for specific browsers. For some reason, the Mac version of Firefox has been the most troublesome, displaying the Like buttons lower than all other browsers.
When I noticed my Facebook buttons were out of line again last week, I was of course rather frustrated. I waited a week to make sure this wasn't a temporary bug, then decided to modify the CSS once again. I was happy to find that in order to fix the Like button positioning this time, I simply needed to remove my custom CSS code. I got rid of the "top: -3px;" line from my Facebook Like Button class and the Like buttons are now vertically aligned with the +1 and Tweet buttons. Best of all, the new Like buttons now display correctly in the Mac version of Firefox without any custom CSS tweaks. They even show up correctly in Opera, which they never did before.
I am keeping my fingers crossed, but it looks like Facebook has finally standardized the layout of their Like buttons. I've been surprised how little discussion there has been on the web regarding the inconsistent positioning of Facebook buttons, especially since so many websites use them. If you've had issues positioning your social media buttons, I'd like to hear about it so I know I'm not the only one!