Geek Answers Handbook

Facebook Connect Icon Not Displaying in Internet Explorer

I am working on a site using Facebook Connect, and recently made some changes, so that the main pages are cached, and if you are not logged in (verified by ajax call), it downloads Facebook Connect javascript and displays the connect button to the page. This works fine everywhere except Internet Explorer 7 and 8. The strange part is turning the buttons into a hidden registration / registration form, and when you show any of them, the Connect buttons are displayed. You can look here , and you will see the button in Firefox, and not in Internet Explorer. If you click "Login", a button will appear.

This is a Rails application, so on the server side we answer the ajax call with rjs as follows:

  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

, - Connect Modal. :

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

Modal :

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

, Modal . - , ?

+5
4

, div id FB_HiddenContainer , . div .

+1

IE, ...

:

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


<html>
+2

. , script , .

:

<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"></script>
</head>

, , , FB init() onload tag :

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

!

,

-Auri (www.aurigroup.com)

+1

. , , , , , , . Firefox :

<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;extern=2&amp;channel=http%3A%2F%2Fplay.inspire2go.com%2Fxd_receiver.html&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>

, IE8, :

<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&extern=2&channel=http%3A%2F%2Fplay.inspire2go.com%2Fxd_receiver.html&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">
            <PARAM NAME="Src" VALUE="http://static.ak.fbcdn.net/rsrc.php/z9W3G/hash/b0l9i5c3.swf">
            <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>

, . , <fb:login-button> . , PNG IE8. , Firefox <iframe>, IE8 <iframe> FLASH-.

It looks like the Facebook API referenced by your LazyLoader () function returns a different code depending on the type of browser. Not sure where to go from here, but I will come later if I have a chance.

Good luck.

0
source

More articles:


All Articles