Question

所以，我有一个单页应用程序可以播放我们数据库中的视频。该页面在www.foo.com/player.php上加载，我使用PHP设置视频ID参数以获得可共享的URL。因此页面加载，共享URL作为http://www.foo.com/player.php?id=1插入FB和Twitter，按钮共享正确的URL。我使用两个按钮的标准实现。

问题是，当用户更改视频时，两个按钮都不会更新网址，它仍会显示http://www.foo.com/player.php?id=1。

我试图将此添加到我的AJAX成功函数中：

$(".facebook-share-button").data("href", "http://www.foo.com/player.php?id=" + data.videoID);
$(".twitter-share-button").data("url", "http://www.foo.com/player.php?id=" + data.videoID);

如果我在控制台中检查这些数据属性，它们会显示正确的URL，因此我知道它会根据我的需要更新属性，但按钮功能不会提取新的URL。

对于Twitter，我发现他们建议用

刷新按钮

tweet_button.render();

但这不会更新我的共享网址。

我还尝试使用history.pushstate更新浏览器的网址，并且它会在浏览器的显示中更新，但仍然没有被共享按钮检测到。

有人问过这个问题吗？

Answer 1

Twitter和Facebook都会在呈现共享按钮时创建iframe，这意味着您无法直接影响它们。您需要做的是完全重新加载按钮，删除以前的按钮并用新的按钮替换它们。以下是我的表现方式：

在你的html文件中，你准备加载按钮：

<div id="fb-root"></div>
<script type="text/javascript">
    (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";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
 </script>
<span id='fbholder'></span>

<span id='twitterholder'></span>

请注意，将被按钮替换的元素不存在。另请注意，Twitter的外部脚本不存在。我们将在函数中加载它们，如下所示：

function reloadSocialButtons() {
    try {
        // Twitter
        var t = $("<a href='https://twitter.com/share' class='twitter-share-button'>");
        var tjs = $('<script>').attr('src', '//platform.twitter.com/widgets.js');
        $('#twitterholder').empty();
        $(t).attr('data-text', document.title);
        $(t).attr('data-url', location.href);
        $(t).appendTo($('#twitterholder'));
        $(tjs).appendTo($('#twitterholder'));

        // Facebook
        var f = $('<div class="fb-share-button" data-layout="button">');
        $(f).attr('data-href', location.href);
        $('#fbholder').empty();
        $(f).appendTo($('#fbholder'));
        FB.XFBML.parse(document);
    } catch(ex){}
};

那么代码是做什么的？对于Twitter，首先我们创建一个新的共享按钮链接。这是html中没有的内容。然后我们创建一个新的脚本标记来加载缺少的js文件。接下来，我们清空已经在持有人标签中的任何内容（前一个按钮）。然后我们更新新的共享按钮链接的文本和URL，将其附加到我们的holder标签，然后将脚本附加到holder标签。加载脚本后，它会自动查找任何Twitter共享按钮链接并将其转换为按钮，生成带有正确链接的新按钮。

Facebook部分基本相同，只是我们没有重新加载和附加脚本文件。相反，我们只需调用FB.XFBML.parse(document)即可将新的Facebook共享按钮链接变为按钮。您应该能够对Twitter做同样的事情，但显然它不一致，所以每次重新加载脚本都是一致的解决方案。

现在，每当您想要更新共享按钮时，只需调用该功能，然后让它完成所有工作。如果你希望每次ajax调用完成时都会发生这种情况，例如在单页backbone.js环境中，那么你可以把它放在$(document).ajaxComplete(function() { ... });

中，而不是把它放在一个函数中。

Answer 2

我不确定如何或为什么，但如果您只是更改data-url并重新加载，则无法正常工作。我尝试用锚元素替换元素的整个html，然后运行twttr.widgets.load();并且它工作正常。

如何在AJAX之后更新Facebook / Twitter分享按钮URL？

2 个答案: