Facebook共享插件按钮未共享正确的URL

Question

My production site can be found here: http://infinite-brushlands-3960.herokuapp.com/

I have the javascript SDK set up as instructed here: https://developers.facebook.com/docs/javascript/quickstart/v2.5

When the user clicks "Share This Schedule", this code is run:

$('#share_schedule').click(function(){
    if ($('#share_url_ul').children().length >= 1){
        $('#share_url_ul').empty();
    }
    // Take care of no classes case "You cannot share an empty schedule."
    $.ajax({
        method: "POST",
        url: "/share/",
        data: JSON.stringify(localStorage),
        contentType: "application/json; charset=utf-8",
        dataType: "text",
        success: function(response){
            var shared_url = document.createElement('a');
            $(shared_url).css('display', 'block');
            $(shared_url).attr('href', window.location.href + 'shared/' + response);
            $(shared_url).attr('id', 'share_link');
            shared_url.innerHTML = window.location.href + 'shared/' + response;
            $('#share_url_ul').append(shared_url);

            $('#fb_share_btn').attr('data-href', window.location.href + 'shared/' + response);
        },
        error: function(error){
            console.log(error);
        }
    });
});

But despite the line that sets the facebook button's data-href attribute to the url that I want to share (as described here https://developers.facebook.com/docs/plugins/share-button ), clicking the button still shares my home page to facebook instead of the link I specified there. Inspecting the button in the browser inspector show that it indeed has the correct url as the data-href attribute.

Why isn't the plugin sharing the correct url?

Answer 1

Since you are changing the button url on ajax load, you have to re-initialize the facebook share button after changing the attributes.

Try adding this to the end of success callback

FB.XFBML.parse();

So you should have something like

$('#share_schedule').click(function(){
    if ($('#share_url_ul').children().length >= 1){
        $('#share_url_ul').empty();
    }
    // Take care of no classes case "You cannot share an empty schedule."
    $.ajax({
        method: "POST",
        url: "/share/",
        data: JSON.stringify(localStorage),
        contentType: "application/json; charset=utf-8",
        dataType: "text",
        success: function(response){
            var shared_url = document.createElement('a');
            $(shared_url).css('display', 'block');
            $(shared_url).attr('href', window.location.href + 'shared/' + response);
            $(shared_url).attr('id', 'share_link');
            shared_url.innerHTML = window.location.href + 'shared/' + response;
            $('#share_url_ul').append(shared_url);

            $('#fb_share_btn').attr('data-href', window.location.href + 'shared/' + response);

            FB.XFBML.parse();

        },
        error: function(error){
            console.log(error);
        }
    });
});