Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Facebook Connect icon isn't showing up in Internet Explorer

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?

like image 452
John Duff Avatar asked Oct 14 '22 07:10

John Duff


2 Answers

I also had the exact same problem with IE while it was fine with other browsers...

the solution was to use:

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

instead of

<html>
like image 132
user6890 Avatar answered Oct 20 '22 15:10

user6890


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.

like image 42
John Duff Avatar answered Oct 20 '22 16:10

John Duff