Facebook Connect icon isn't showing up in Internet Explorer

Question

I'm working on a site that is using Facebook Connect and recently made some changes so that the main pages are cached and if you are not logged in (checked with an ajax call) it loads the Facebook Connect javascript and renders the connect button into the page. This works perfectly everywhere except Internet Explorer 7 and 8. The weird part is I render the buttons into a hidden Sign Up / Sign In form and when you show either of those the Connect buttons appear. You can take a look here and you will see the button in Firefox and not Internet Explorer. If you click Sign In the button will show up.

This is a Rails app so on the server-side we're responding to an ajax call with rjs like this:

  page['signin-status'].replace(:partial => "common/layout/signin_menu")

  page.select('.facebook-connect').each do |value, index|
    value.replace(render(:partial => '/facebook/signin'))
  end

  page << <<-eos
  LazyLoader.load('http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php', function(){
    FB.init('#{Facebooker.api_key}','/xd_receiver.html');
  });
eos

The first line is replacing the header, the second is the Connect buttons in the Modal dialogs. The partial being rendered into the header looks like this:

<span id='signin-status'>
  <%= fb_login_button(remote_function(:url => "/facebook/connect"))%> |
  <%= link_to_function "Sign In", "showSignInForm();", :id => "signin" %> |
  <%= link_to_function "Sign Up", "showSignUpForm();", :id => "signup" %>
</span>

The Partial being rendered into the Modal dialogs looks like this:

  <div class='facebook-connect'>
    <div id="FB_HiddenContainer"  style="position:absolute; top:-10000px; width:0px; height:0px;" ></div>
    <label>Or sign in with your Facebook account</label>
    <%= fb_login_button(remote_function(:url => "/facebook/connect"))%>
  </div> 

I find it very strange that showing the Modal dialog causes all the icons to show. Does anyone have any ideas or suggestions about what's going on?

Answer 1

Tough one. This isn't an answer, and you may already know all of this, but perhaps it will give you some insight. The generated source for the code in Firefox looks like this:

<div class="facebook-connect">
      <div id="FB_HiddenContainer" style="position: absolute; top: -10000px; width: 0px; height: 0px;">
        <div>
          <iframe name="fb_api_server" src="http://api.connect.facebook.com/static/v0.4/client_restserver.php?r=223617" class="FB_SERVER_IFRAME" frameborder="0" scrolling="no"></iframe>
        </div>
        <div>
          <iframe name="loginStatus" src="http://www.facebook.com/extern/login_status.php?api_key=f3da6164fa3c312672cf5a24a53345e0&amp;amp;extern=2&amp;amp;channel=http%3A%2F%2Fplay.inspire2go.com%2Fxd_receiver.html&amp;amp;locale=en_US" class="FB_SERVER_IFRAME" frameborder="0" scrolling="no"></iframe>
        </div>
      </div>
      <label>Or sign in with your Facebook account</label>
      <fb:login-button class=" fb_login_not_logged_in FB_login_button FB_ElementReady" onlogin="new Ajax.Request('/facebook/connect', {asynchronous:true, evalScripts:true})"><a id="RES_ID_fb_login" class="fbconnect_login_button"><img alt="Connect" src="http://static.ak.fbcdn.net/rsrc.php/zEYEC/hash/7e3mp7ee.png" id="RES_ID_fb_login_image"></a></fb:login-button>
    </div>

However, the code generated in IE8 looks like this:

<DIV class=facebook-connect>
      <DIV style="POSITION: absolute; WIDTH: 0px; HEIGHT: 0px; TOP: -10000px" id=FB_HiddenContainer>
        <DIV>
          <IFRAME class=FB_SERVER_IFRAME src="http://www.facebook.com/extern/login_status.php?api_key=f3da6164fa3c312672cf5a24a53345e0&amp;extern=2&amp;channel=http%3A%2F%2Fplay.inspire2go.com%2Fxd_receiver.html&amp;locale=en_US" frameBorder=0 name=loginStatus scrolling=no></IFRAME>
        </DIV>
        <DIV>
          <OBJECT id=flashXdComm name=flashXdComm classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=1 height=1 type=application/x-shockwave-flash>
            <PARAM NAME="_cx" VALUE="26">
            <PARAM NAME="_cy" VALUE="26">
            <PARAM NAME="FlashVars" VALUE="">
            <PARAM NAME="Movie" VALUE="http://static.ak.fbcdn.net/rsrc.php/z9W3G/hash/b0l9i5c3.swf"&gt;
            <PARAM NAME="Src" VALUE="http://static.ak.fbcdn.net/rsrc.php/z9W3G/hash/b0l9i5c3.swf"&gt;
            <PARAM NAME="WMode" VALUE="Window">
            <PARAM NAME="Play" VALUE="-1">
            <PARAM NAME="Loop" VALUE="-1">
            <PARAM NAME="Quality" VALUE="High">
            <PARAM NAME="SAlign" VALUE="">
            <PARAM NAME="Menu" VALUE="-1">
            <PARAM NAME="Base" VALUE="">
            <PARAM NAME="AllowScriptAccess" VALUE="always">
            <PARAM NAME="Scale" VALUE="ShowAll">
            <PARAM NAME="DeviceFont" VALUE="0">
            <PARAM NAME="EmbedMovie" VALUE="0">
            <PARAM NAME="BGColor" VALUE="869CA7">
            <PARAM NAME="SWRemote" VALUE="">
            <PARAM NAME="MovieData" VALUE="">
            <PARAM NAME="SeamlessTabbing" VALUE="1">
            <PARAM NAME="Profile" VALUE="0">
            <PARAM NAME="ProfileAddress" VALUE="">
            <PARAM NAME="ProfilePort" VALUE="0">
            <PARAM NAME="AllowNetworking" VALUE="all">
            <PARAM NAME="AllowFullScreen" VALUE="false">
          </OBJECT>
        </DIV>
      </DIV>
      <LABEL>Or sign in with your Facebook account</LABEL>
      <?xml:namespace prefix = fb />
      <fb:login-button onlogin="new Ajax.Request('/facebook/connect', {asynchronous:true, evalScripts:true})"></fb:login-button>
    </DIV>

Note that there a couple of differences here. First of all, the <fb:login-button> element is different. As we are aware, the reference to the login PNG file is missing in IE8. Also, in Firefox, there are two <iframe> elements, however, in IE8, the second <iframe> is replaced with a FLash object.

It appears that the Facebook API referenced with your LazyLoader() function is returning different code depending on browser type. Not sure where to go from here, but I will come check in on this later if I get a chance.

Good luck.

Answer 2

It turns out I had two divs with the id FB_HiddenContainer in the page and that was causing the problem. Removing the duplicate div fixed everything.

Answer 3

I ran into the same problem. I fixed it by forcing the script to load in the tag rather than in the body.

So:

<head runat="server">
    <!-- all other html tags excluded from this example -->
    <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"&gt;&lt;/script&gt;
</head>

Then, to make sure everything's loaded first, I put the FB init() call in the tag's onload event, like so:

<body onload="FB.init('<%= ConfigurationManager.AppSettings["ApiKey"] %>', 'xd_receiver.htm', { 'reloadIfSessionStateChanged': true });">
    <!-- rest of your body -->
</body>

Good luck!

Best,

-Auri (www.aurigroup.com)