I have the xfbml version of the Facebook button on my website and I've noticed that when the page is loading, the button loads on the right side then centers itself(where it is supposed to be). I have played with the width trying different sizes and finally setting it to 0 or auto fixes the problem completely. The button loads in the center and doesn't move.
My question is simply if its is allowed to have "width:auto" since on the Facebook developer page it states that the minimum is "225".
I apologize in advance but I am a complete beginner at this.
<fb:like href="http://mywebsite.com" send="false" layout="button_count" width="auto" show_faces="false" font="verdana"></fb:like>
You got it right, there is no way to make Like button to have auto width.
As an workaround, you can measure width of the space that the button should take, and specify it dynamically in the button code, but in this case you will have to use FB.parse() to convert <fb:like> code to a working button.
Ex.:
$(document).ready(function(){
btnWidth = parseInt($(".buttonContainer").width(), 10) - 5;
$(".buttonContainer").append('<fb:like href="http://mywebsite.com" send="false" layout="button_count" width="' + btnWidth + '" show_faces="false" font="verdana"></fb:like>');
FB.parse($(".buttonContainer").get());
});