Facebook Connect Symbol wird nicht im Internet Explorer angezeigt

Ich arbeite an einer Website, die Facebook Connect verwendet und vor kurzem einige Änderungen vorgenommen, so dass die Hauptseiten zwischengespeichert werden und wenn Sie nicht eingeloggt sind (mit einem AJAX überprüft call) es lädt das Facebook Connect Javascript und rendert den Connect Button in die Seite. Dies funktioniert perfekt überall außer Internet Explorer 7 und 8. Der komische Teil ist, dass ich die Schaltflächen in ein verstecktes Anmelde-/Anmeldeformular rendere und wenn Sie eines von beiden anzeigen, werden die Connect-Schaltflächen angezeigt. Sie können einen Blick auf here werfen und Sie werden die Schaltfläche in Firefox und nicht im Internet Explorer sehen. Wenn Sie auf Anmelden klicken, wird die Schaltfläche angezeigt.Facebook Connect Symbol wird nicht im Internet Explorer angezeigt

Dies ist eine Rails-Anwendung so auf der serverseitigen wir mit rjs wie dies einem Ajax-Aufruf sind reagiert:

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

Die erste Zeile der Header ersetzt, die zweite die Connect-Tasten in die modalen Dialoge. Der Teil Wesen in den Header gemacht sieht wie folgt aus:

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

Der Teil Wesen in die Dialoge sieht wie folgt aus Modal gemacht:

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

ich es sehr seltsam finden, dass die Modal-Dialog zeigt bewirkt, dass alle die Symbole zu zeigen. Hat jemand irgendwelche Ideen oder Vorschläge über das, was vor sich geht?

Quelle

2010-03-25 John Duff

möchten Sie vielleicht Ihre eigene Antwort als akzeptiert markieren. – corprew

Es stellt sich heraus, ich hatte zwei divs mit der ID FB_HiddenContainer in der Seite und das verursachte das Problem. Das Entfernen des doppelten Div löste alles.

Quelle

2010-04-02 12:04:28

Hey Mann, Gratulation für die +0 Kopfgeld –

Tough ein. Dies ist keine Antwort, und Sie wissen vielleicht schon alles, aber vielleicht wird es Ihnen einen Einblick geben. Die erzeugte Quelle für den Code in Firefox sieht wie folgt aus:

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

jedoch der Code generiert in IE8 wie folgt aussieht:

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

Beachten Sie, dass es ein paar Unterschiede hier. Zuallererst ist das <fb:login-button> Element anders. Wie wir wissen, fehlt der Verweis auf die Login-PNG-Datei in IE8. Auch in Firefox gibt es zwei Elemente, jedoch wird in IE8 die zweite durch ein Flash-Objekt ersetzt.

Es scheint, dass die Facebook-API, auf die mit Ihrer LazyLoader() - Funktion verwiesen wird, je nach Browsertyp einen anderen Code zurückgibt. Ich bin mir nicht sicher, wo ich von hier aus hinfahren soll, aber ich werde später einchecken, wenn ich eine Chance bekomme.

Viel Glück.

Quelle

2010-03-27 23:20:08

Rückschau auf diese. Sieht so aus, als ob du es funktioniert hast. Ich bin gespannt, wie sich das Problem entwickelt hat. –

Hey Jeff, tut mir leid, dass ich nicht zurück gekommen bin, es war eine anstrengende Woche. Ich schaute ein wenig näher und fand eine doppelte Div-ID, die das Problem verursachte. –

Ich lief auf das gleiche Problem. Ich habe es behoben, indem ich das Skript gezwungen habe, das Tag und nicht den Körper zu laden.

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

, dann sicher, dass alles loaded ersten zu machen, habe ich die FB init() Aufruf in dem onload-Ereignisse des Tags, etwa so:

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

Viel Glück!

Best,

-Auri (www.aurigroup.com)

Quelle

2010-07-13 19:42:18

Ich hatte auch genau das gleiche Problem mit dem IE, während es bei anderen Browsern war ...

die Lösung war, Verwendung:

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

statt

<html>

Quelle

2010-11-06 06:35:51 user6890

Sie haben vielleicht nicht das OP-Problem gelöst, aber Sie haben meine Dank gelöst !!! – mazlix

Facebook Connect Symbol wird nicht im Internet Explorer angezeigt

Antwort

Verwandte Themen