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

Question

So, I have a single page app that plays videos from our database. The page loads on www.foo.com/player.php and I use PHP to set a video ID parameter to have a shareable URL. So the page loads, the share URL is inserted to both FB and Twitter as http://www.foo.com/player.php?id=1 and the buttons share the proper URL. I'm using the standard implementations of both buttons.

The issue is, when the user changes the video, neither button updates the URL, it still shows http://www.foo.com/player.php?id=1 .

I've tried to add this to my AJAX success function:

$(".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);

If I check those data attributes in the console, they show the proper URL, so I know it's update the attributes with what I want, but the button functions don't pick up the new URL.

For Twitter, I found their suggestion to refresh the button with

tweet_button.render();

But that doesn't update my shared URL.

I also tried updating the browser's URL with the history.pushstate, and it does update in the browser's display, but still isn't detected by the share buttons.

Anyone dealt this this issue?

Answer 1

Twitter and Facebook both create iframes when they render their share buttons, which means you cannot affect them directly. What you need to do is reload the buttons entirely, removing the previous ones and replacing them with new ones. Here's how I do that:

In your html file, you prepare to load the buttons:

<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>

Note that the elements that will be replaced by buttons are not there. Also note that the external script for Twitter is not there. We're going to load those in a function, like so:

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){}
};

So what does that code do? For Twitter, first we create a new share-button link. This is what was absent from the html. Then we create a new script tag to load the missing js file. Next we empty anything that was already in our holder tag (the previous button). Then we update the text and url for our new share-button link, append it to our holder tag, and then append the script to the holder tag. When the script is loaded, it automatically looks for any twitter share-button links and turns them into buttons, generating the new button with the correct link.

The Facebook part is basically the same, except we didn't have to reload and append the script file. Instead we just call FB.XFBML.parse(document) to make the new Facebook share-button link turn into a button. You should be able to do the same with Twitter, but apparently it's inconsistent, so reloading the script each time is a consistent solution.

Now, whenever you want to update your share buttons, you just call the function, and let it do all the work. If you want it to happen every time an ajax call completes, for instance in a single-page backbone.js environment, then instead of putting it in a function, you can put it in $(document).ajaxComplete(function() { ... });

Answer 2

I'm not sure how or why, but if you simply change the data-url and reload, it doesn't work. I tried replacing the entire html of the element with the anchor element and then ran twttr.widgets.load(); after and it worked fine.