Fb Like Button Creates A White Background On Page Onload In All Ie Versions

I have added the facebook like button . When my page loads in any ie there is a n

Solution 1:

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.

Solution 2:

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/

Solution 3:

You should set allowtransparency="true" in iFrame.

Solution 4:

I had to do like this to make it work

.fb_iframe_widget_fluid{
    background:none !important;

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