独特的Facebook评论和Viddler Playlist视频

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 XFBML解析器。这将加载新播放列表的注释。加载新评论可能需要几秒钟的时间，所以我建议您在弄清楚所有问题后，为用户构建某种加载指示器。