Using Jquery to load Facebook fb:profile-pic - not working in IE

Question

Hey.... I followed the tips given on

Loading Facebook fb:profile via ajax

In my app, I am basically loading more comments posted by the user via Jquery and along with each comment showing the user's picture using the fb:profile-pic tag

This is a sample of how I'm building the string via Jquery

$(document).ready(function() 
{
  $(".more_comments").live('click',function() 
  {
    $.getJSON("/store/more-swipes",function(data) 
    {
      newcomment += "<fb:profile-pic uid='"+data.fb_userid+"'/>";
      newcomment += ""+data.user_name+": ";
      newcomment += ""+data.user_comment+": ";
     $("#morecomments").append(newcomment);
    });
return false;
  });
});

So the profile-pic was not being displayed - After reading the above link, I added

if ( FB.XFBML.Host.parseDomTree )
  setTimeout( FB.XFBML.Host.parseDomTree, 0 );

The weird thing now is - its working in Chrome and Firefox but not in IE Cant figure out why. Any help will be appreciated. Thanks

Answer 1

Try putting your code in the load event:

$(window).load(function(){
  // your code here...
});

Answer 2

Hey I'm not sure of the reason why - but making this change - the code started working in IE

From

newcomment += "<fb:profile-pic uid='12345'/>";

To

newcomment += "<fb:profile-pic uid='12345'></fb:profile-pic";

Hope it helps someone else - I wasted a lot of time debugging this one. Thanks