Facebook Social Plugin and jQuery Issue

I'm using jQuery to load some content into a lightbox-like div in a web app I'm working on. Using $POST, I'm calling a dynamically populated page that holds a youtube video and a facebook comment plugin.

The first video I load comes with the comments, but each video after that comes by itself, sans-comments. Any quick ideas as to what might be happening?

This is the page I'm loading.

<? $video_id = $_POST['video_id']; ?>

<object width="800" height="499"> 
    <param name="movie" value="http://www.youtube.com/v/<? echo $video_id; ?>?modestbranding=1&amp;version=3&amp;hl=en_US&rel=0"></param> 
        <param name="allowFullScreen" value="true"></param> 
        <param name="allowscriptaccess" value="always"></param> 
    <embed src="http://www.youtube.com/v/<? echo $video_id; ?>?modestbranding=1&amp;version=3&amp;hl=en_US&rel=0" type="application/x-shockwave-flash" width="800" height="499" allowscriptaccess="always" allowfullscreen="true"></embed> 
</object>


<h5 style="margin:35px 0 8px 0;">Comment on this Video</h2>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=158242874284543";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://XXXXXXXXXXXX.com/viewvideo.php?video_id=<? echo $video_id; ?>" data-num-posts="12" data-width="800"></div>

And this is the call that brings it in (#view_video is the div that holds the lightbox, .video_wrapper is the div that displays the info that is loaded. Each thumbnail is in a div with the videothumb class, whos id is set to the youtube videos unique id):

<script>
    //VIEW VIDEO
    $('.videothumb').click(function() {
        $('#view_video').fadeIn('fast');
        this_video_id = $(this).attr('id');
        $.post( 'viewvideo.php', { video_id: this_video_id },
            function( data ) {
                //on complete
                $('.video_wrapper').html(data);
            }
        );
    });
</script>

Thanks!!!

When you load the first page, the Facebook JS SDK get’s loaded as well, and parses the XFBML tags in your document.

The next time you AJAX-load a page into your document, the JS SDK is already embeded into your document, so nothing further happens – and that includes no new parsing of XFBML tags.

You have to use FB.XFBML.parse to tell the SDK that it should again search the document for (dynamically added) XFBML tags. (Preferable give it a DOM node as first parameter, so that it does not search the whole document again, but just the part where dynamic changes have occured.)