Facebook Comment URL Unreachable

I'm loading the facebook comments plugin in a modal window - content being injected into that window via ajax. As such the modal itself doesn't have a url, although I pass a fake URL when I set up the fb comments plugin in order for facebook to distinguish between modal pages.

Problem is although the comments work fine facebook displays an ugly warning message as it can't access the URL I've told it the page is on.

Code is:

        $(".element").click(function () {
        $("#page").slideDown();
        $.get("/articles" + $(this).children(".ajaxloc").text(), function (data) {
            $("#ajax-content").html(data);
        });

        $(document).ajaxComplete(function () {
            var url = $('#ajax-content h1').text().replace(" ", "");
            $('#fb-comments').remove(); // remove any old comment plugins
            $("#fbCommentsPlaceholder").html('<div class="fb-comments" id="fb-comments" data-href="https://example.com/' + url + '"data-width="620" data-numposts="5" data-colorscheme="light"></div>');
            FB.XFBML.parse(); // re-render the comments plugin in order to set it up on next modal click
        });

    });

I guess there are a couple of solutions involving redirects or history pushstate, but since the plugin works fine I don't want to over engineer a solution that I don't really need.

I've tried hiding it in CSS - even within the ajaxComplete function and after FB.XFBML.parse() but that doesn't seem to work.

(note that the URL above has been replaced with "http://example.com/")

The root page has all the og tags in it, and the app domain field in fb settings doesn't have www or anything in front of it.

Solution

I resolved this by setting the URI segment as a query string and not a directory.

Instead of this:

var url = 'https://example.com' + value;

Use this:

var url = 'https://example.com/?key=' + value;

That way the page doesn't need to exist but still satisfies Facebook's unique URL requirement.