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

Question

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

When my page loads anyway, there is a noticeable white background before a button like this appears, is there a way to remove this?

Answer 1

This is an iframe loading its contents.

You can set visibility: hidden to the iframe and then show it after loading it to avoid this.

Answer 2

You must set allowtransparency="true" in the iFrame .

Answer 3

Just hide the container using CSS and then display it after loading the iframe, there are two ways to do this:

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

If you do not use this function FB.XFBML.parse (), you can subscribe to the event when everything is shown:

 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 to find it all! Here is a link to where I found my solution: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

Answer 4

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