0

enter image description here

Facebook button is not working on IE8 at starting it is coming like in screenshot and after 45 seconds it disappears automatically with error

fb:login_button failed to resize in 45s

2 more error getting while opening page are:

  1. FB.init has already been called - this could indicate a problem.
  2. The "fb-root" div has not been created, auto-creating.

even after refreshing the page button is not coming. after deleting browser history button again shows like in attached image and on click and after entering Facebook login credentials again it is getting disappears and not working as it should.

following is javascript code.

function initialize_fb(p_config) {  
    config = p_config;
    window.fbAsyncInit = function () {
        FB.init({
            appId: config.appId,
            channelUrl: config.channelURL,
            status: true,
            cookie: true,
            xfbml: true
        });
    };
    (function (d, debug, config) {
        //console.log(config);
        var js, id = "facebook-jssdk",
            ref = d.getElementsByTagName("script")[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement("script");
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js#xfbml.js=1&appId=" + config.appId;
        ref.parentNode.insertBefore(js, ref);
    }(document, false, config));
}
function fshowuser(p_image, p_name, p_url, p_function, p_uid) {         
    var inner_htm;  
    showUserFunction = p_function;
    if (p_name == "") {
        isModify = false;
        inner_htm = "<fb:login-button show-faces='false' width='100' max-rows='1' onlogin='{2}' id='buttonFBConnect'>{3}</fb:login-button>";
    } else {
        isModify = true;
        if(! isRemoveRequired) {
            inner_htm = "<table><tr><td rowspan='2'><img src='{0}' alt='{1}' id='fbModify'></td><td id='fbFrndName'>{1}</td></tr><tr><td><fb:login-button show-faces='false' width='100' max-rows='1' onlogin='{2}'>{4}</fb:login-button></td></tr></table>";           
        }else{
            inner_htm = "<table><tr><td rowspan='2'><img src='{0}' alt='{1}' id='fbModify'></td><td id='fbFrndName'>{1}</td></tr></table>";         
        }
        if (p_uid != undefined && p_uid != null && p_uid != "") {
                inner_htm += "<input type='hidden' name='fb_uid' id='fb_uid' value='" + p_uid + "'>";
        }
        inner_htm += "<input type='hidden' name='fb_access_token' id='fb_access_token' value='" + accessToken + "'>";       

    }   
    $("#" + config.divId).html(inner_htm.format(p_image, p_name, p_function, config.connectText, config.modifyText, config.delinkText));    
    FB.XFBML.parse(document.getElementById(config.divId));
}

and following is html tag

  <html xmlns:fb="http://www.facebook.com/2008/fbml"      xmlns:og="http://opengraphprotocol.org/schema/" >

and it seems like button is not rendering correctly following is html code after button gets disappears which is not completed:

<iframe name="f17348a353fff43" width="100" height="1000" title="fb:login_button Facebook Social Plugin" src="https://www.facebook.com/plugins/login_button.php?login_text=Connect&show_faces=false&max_rows=1&width=100&app_id=645653312120915&locale=en_US&sdk=joey&channel=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Df257016bf55bb8c%26origin%3Dhttps%253A%252F%252Flocalhost%253A7003%252Ffda8d5ab9fe0b6%26domain%3Dlocalhost%26relation%3Dparent.parent" frameBorder="0" scrolling="no" style="border-bottom: medium none; border-left: medium none; visibility: visible; border-top: medium none; border-right: medium none;" allowTransparency="allowtransparency">

I have tried to Google allot but nothing is working. code is working fine in Google chrome and Firefox browsers. so anybody knows solution?

Ashish Sharma
  • 847
  • 1
  • 12
  • 23
  • possible duplicate of [fb:login\_button failed to resize in 45s](http://stackoverflow.com/questions/16833196/fblogin-button-failed-to-resize-in-45s) – James Lawruk Feb 20 '14 at 14:22

4 Answers4

0

Matt Bower from Facebook developer's forum gave this temporary solution:

#fb_login_button { 
    width: 80px; 
}
#fb_login_button span, 
#fb_login_button iframe {.
    width: 80px! important;
    height: 25px! important;
}

Facebook Dev's are working to fix this error.

Dash
  • 314
  • 2
  • 14
0

I encountered the same issue. I had conflicting CSS selectors.

I had to change:

class="menu-icon"

to

class="mysite-menu-icon"

I recommend going through all your class and id attributes and test any common names you see. Note that you need to test the HTML attributes not your CSS selectors.

mmm
  • 64
  • 3
0

I have the same problem,

fb:like_box failed to resize in 45s

I have fixed this problem temporary

Please add this CSS,

.fb-like-box iframe{width:250px !important;height:200px !important;}

i hope this will help.

am_skp
  • 317
  • 1
  • 10
0

If this is happening in Chrome, disable all of your extensions, even the ones that could not possibly be the problem. Reload the page and see if that resolved it.