fb like button creates a white background on page onload in all ie versions

I have added the facebook like button <fb:like href="http://mysite.com" class="myFacebook" layout="button_count" ></fb:like>.

When my page loads in any ie there is a开发者_如何学运维 noticeable white background before the like button appears, is there any way of removing this?

This is the iframe loading its content.

You could set visibility: hidden on the iframe, and then show it once it has loaded to avoid this.

Simply hide the container with CSS and then display it once the iframe has loaded, this can be done two ways:

<style>#fblike { visibility:hidden; }</style> /* Hide container */

<script>
FB.XFBML.parse(document, function(){
   $('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
});
</script>

If you are not using this FB.XFBML.parse() function then you can subscribe an event when everything has rendered instead:

window.fbAsyncInit = function () {
        FB.init({
            appId: 'APP_ID',
            xfbml: true
        });

        FB.Event.subscribe('xfbml.render',
            function () {
                 $('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
            }
        );
    };

Took me a while to find this all out! Here is a link to where I found my solution: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

You should set allowtransparency="true" in iFrame.

I had to do like this to make it work

.fb_iframe_widget_fluid{
    background:none !important;

    //If you want no padding and no margin
    padding:0 !important; 
    margin:0 !important;
}