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

Question

I have added the facebook like button .

When my

Answer 1

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;
}

Answer 2

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.

Answer 3

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/

Answer 4

You should set allowtransparency="true" in iFrame.