Значок Facebook Connect не отображается в Internet Explorer - PullRequest
5 голосов
/ 25 марта 2010

Я работаю над сайтом, который использует Facebook Connect и недавно внес некоторые изменения, чтобы кэшировать главные страницы, и если вы не вошли в систему (проверено с помощью вызова ajax), он загружает JavaScript Connect Facebook и отображает подключить кнопку на страницу. Это прекрасно работает везде, кроме Internet Explorer 7 и 8. Странная часть - я отображаю кнопки в скрытой форме регистрации / входа, и когда вы показываете любую из этих кнопок Connect, появляются. Вы можете посмотреть здесь , и вы увидите кнопку в Firefox, а не Internet Explorer. Если вы нажмете Войти, кнопка появится.

Это приложение на Rails, поэтому на стороне сервера мы отвечаем на вызов ajax с помощью rjs следующим образом:

  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

Первая строка заменяет заголовок, вторая - кнопки «Подключить» в модальных диалоговых окнах. Часть, отображаемая в заголовке, выглядит следующим образом:

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

Частичное отображение в модальных диалогах выглядит следующим образом:

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

Мне очень странно, что при отображении модального диалогового окна отображаются все значки. У кого-нибудь есть идеи или предложения о том, что происходит?

Ответы [ 4 ]

2 голосов
/ 06 ноября 2010

У меня тоже была та же проблема с IE, хотя с другими браузерами всё было в порядке ...

решение было использовать:

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

вместо

<html>
1 голос
/ 02 апреля 2010

Оказывается, у меня на странице было два div с идентификатором FB_HiddenContainer, и это вызывало проблему Удаление дубликата div исправило все.

1 голос
/ 13 июля 2010

Я столкнулся с той же проблемой. Я исправил это, заставив скрипт загружаться в тег, а не в тело.

Итак:

<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 () в событие загрузки тега, например:

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

Удачи!

Best

-Auri (www.aurigroup.com)

0 голосов
/ 28 марта 2010

Жесткий. Это не ответ, и вы, возможно, уже знаете все это, но, возможно, это даст вам некоторое представление. Сгенерированный исходный код для 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> отличается. Как известно, в IE8 отсутствует ссылка на PNG-файл для входа. Кроме того, в Firefox есть два элемента <iframe>, однако в IE8 второй <iframe> заменен объектом FLash.

Похоже, что API Facebook, на который ссылается ваша функция LazyLoader (), возвращает различный код в зависимости от типа браузера. Не знаю, куда идти отсюда, но я приеду проверить это позже, если у меня будет шанс.

Удачи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...