CODEWITHSUNDEEP
htmlcssfacebook
styler
styler

Reputation: 16501

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?

Upvotes: 7

Views: 2963

Answers (4)

Pablo S G Pacheco
Pablo S G Pacheco

Reputation: 2600

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

Upvotes: 0

marija
marija

Reputation: 1

You should set allowtransparency="true" in iFrame.

Upvotes: 0

Matt Derrick
Matt Derrick

Reputation: 5724

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/

Upvotes: 0

alex
alex

Reputation: 490403

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.

Upvotes: 4

Related Questions