Question

I’m trying to use the XFBML version of the Facebook Like button. On a page with zero likes, the main problem is the order of events when the page loads:

• HTML loads
• Like button loads
• Button expands height, pushing content below it down
• Button sees it has no likes
• Button reduces height, moving content below back up

This happens regardless of how the Javascript SDK is loaded (standard or asynchronous) and if “show faces” are enabled/disabled.

Is there a way to prevent this distracting automatic resizing from happening?

Here’s a test page showing the behavior.

Answer 1

I have been frustrated by this many times over. I finally cooked up a hack in jQuery. It works in Chrome, FF and Safari. Sorry I am not near an IE computer.. but the concept should remain.

HTML

<div style="display:block;float:left;width:450px;min-height:35px;">

    <div id="like" style="display:none;float:left;width:450px;height:35px;overflow:hidden;">

        <fb:like href="" show_faces="true" width="450" font=""></fb:like>

    </div>

</div>

jQuery

$('#like').delay(500).fadeIn(500,function(){ $(this).css({'height':"inherit",'overflow':"inherit"}); });

Explanation

First, create a div with a min-height of 35px, then create a child div with an id of like, display of none, height of 35px and overflow of hidden.

With jQuery, reference the like div and delay a fade in. Upon completion of that fade in, reset the css attributes (height and overflow) to inherit.

In theory this allows the like button do it’s little freak out behind the scenes and then gracefully brining it into the page.

Hope this helps, and or Facebook just fixes this.