Facebook comments plugin returning 500 error when creating a comment

I'm using the Facebook comments plugin in an MVC environment and it's crashing with a 500 error in the console when I add a comment. I do not get an error when all of the comments are loaded during page load. However, the comments are successfully added to the URL, so the error is happening after creating the create.

Here's relevant code, cleaned up as much as possible (JavaScript at the bottom)

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

<div class="w-container">
    <div id="allPosts">
        @foreach (var post in ViewBag.Posts.Data)
        {
            <div class="w-row">
                <div class="w-col w-col-12 w-col-medium-12 w-col-small-12">
                    <p>@post.MetaDescription ...</p>
                </div>
            </div>
            <div class="w-row post-button">
                <div class="w-col w-col-3 w-col-small-12">
                    <input type="hidden" class="postBodyHtmlHidden" value="@post.Body" />
                    <input type="hidden" class="postSlug" value="@post.Slug" />
                    <div class="fb-comments" style="display: none;" data-href="http://localhost:36998/blog#@post.Slug" data-numposts="5"></div>
                    <input type="button" value="Continue Reading" class="btn btn-primary continue-reading-btn" />
                </div>
            </div>
        }
    </div>

    <div id="postBody" style="display:none;">
        <div class="w-row">
            <div class="w-col w-col-12">
                <input type="button" value="Back" onclick="AllPosts()" class="btn btn-primary" />
                <br />
                <div id="postHmtlDiv">

                </div>
                <div id="postCommentDiv">

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('.continue-reading-btn').on("click", function () {
        var postHtml = $(this).closest('.w-row').find('.postBodyHtmlHidden').val();
        var postSlug = $(this).closest('.w-row').find('.postSlug').val();
        var postComment = $(this).closest('.w-row').find('.fb-comments').html();

        $('#allPosts').css("display", "none");
        $("#postHmtlDiv").html(postHtml);
        $('#postCommentDiv').html(postComment);
        $('#postCommentDiv .fb-comments').removeAttr('style');
        $("#postBody").fadeIn("slow");

    });

    function AllPosts() {
        $('#postBody').css('display', 'none');
        $('#postHmtlDiv').html('');
        $('#allPosts').fadeIn('slow');
    };

</script>

I don't know how to debug this.

The error looks like this (again, this after adding a comment):

The answer was simple! This code is not valid!

<div class="fb-comments" style="display: none;" data-href="http://localhost:36998/blog#@post.Slug" data-numposts="5"></div>

The data-href attribute cannot be localhost. I changed it to something else and it worked!