Facebook 社交插件和 jQuery 问题

Posted 2023-02-21

【中文标题】Facebook 社交插件和 jQuery 问题

【英文标题】：Facebook Social Plugin and jQuery Issue

【发布时间】：2012-08-16 06:13:05

【问题描述】：

我正在使用 jQuery 将一些内容加载到我正在开发的 Web 应用程序中的类似灯箱的 div 中。使用 $POST，我正在调用一个动态填充的页面，其中包含一个 youtube 视频和一个 facebook 评论插件。

我加载的第一个视频带有 cmets，但之后的每个视频都是独立的，没有 cmets。关于可能发生的事情有什么快速的想法吗？

这是我正在加载的页面。

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

<object  > 
    <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"   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-></div>

这是引入它的调用（#view_video 是保存灯箱的 div，.video_wrapper 是显示加载信息的 div。每个缩略图都在一个带有 videothumb 类的 div 中，谁的 id 是设置为 youtube 视频的唯一 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>

谢谢！！！

【参考方案1】：

当您加载第一页时，Facebook JS SDK 也会被加载，并解析您文档中的 XFBML 标签。

下次您将 AJAX 页面加载到文档中时，JS SDK 已经嵌入到您的文档中，因此不会发生任何进一步的事情 - 并且不包括对 XFBML 标记的新解析。

您必须使用FB.XFBML.parse 告诉SDK 它应该再次搜索文档以查找（动态添加的）XFBML 标签。 （最好给它一个DOM节点作为第一个参数，这样它就不会再次搜索整个文档，而只是搜索发生动态变化的部分。）

【讨论】：

我明白了。所以我需要在 $('.video_wrapper').html(data); 之后添加该调用?