独特的Facebook评论与Viddler播放列表视频

Question

当用户在我们的Viddler播放列表中更改视频时，是否可以将页面上的Facebook评论框更改为新的评论框?

播放列表在同一页面上变化，没有刷新，所以如果我只是插入一个FB评论框，它将保持不变，无论什么视频被调用。

我知道这将是可能的与javascript…

下面是在这里创建的用于更改播放列表的脚本:

$(".playlist-link").click(function(e){
e.preventDefault();
var playlist = $(this).attr("href");
var url = 'http://www.viddler.com/tools/vidget.js' +
              '?widget_type=js_list' +
              '&widget_width=940' +
              '&source=playlist' +
              '&user=Fanaticgroup' +
              '&playlist='+ playlist +
              '&style=grid'+
              '&show_player=true'+
              '&player_type=simple'+
              '&max=12'+
              '&videos_per_row=6'+
              '&v=2.0'+
              '&id=7476737550';
$.getScript(url, function(data, textStatus){
});
});

现在这完美地完成了工作，并让我在选择播放列表后调用其他函数，如自动开始第一个视频等。

是否有一种方法可以在播放列表更改后调用新的FB评论框到页面上，并在每个新视频上?

Answer 1

根据Facebook文档，你可以像这样使用html插入评论社交插件:

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="500"></div>
<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=132892600147693";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

应该足够简单，在这一点上做类似的事情:

<div class="fb-comments" data-href="http://www.yourdomain.com/some/unique/path/identifying/your/playlist" data-num-posts="5" data-width="500"></div>
<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=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
var commentContainerTemplate = $('.fb-comments').clone();
function loadNewPlaylistComments(playlist_id)
{
    var currentComments = $('.fb-comments'),
    newComments = commentContainerTemplate.clone()
            .data('href', "http://www.yourdomain.com/some/unique/path/identifying/your/playlist/" + playlist_id)
            .before(currentComments);
    currentComments.remove();
    FB.XFBML.parse( newComments.get() );
}
</script>

然后，每次调用loadNewPlaylistComments()时，旧的注释将被删除，新的注释容器将被添加到页面中，并且FB xfml解析器将被执行。这应该会加载新播放列表的评论。加载新注释可能需要几秒钟的时间，所以我建议你在弄清楚所有内容后，为用户构建某种加载指示器。