I've stumbled across several questions that revolve around issues with integrating Facebook comments, but unfortunately haven't had any luck finding a solution. I am attempting to incorporate Facebook comments within a website using the code provided by Facebook. I inserted the Javascript SDK within the tags.
<div id="fb-root"></div>
<script>(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>
Given that I desired to have the comments on all posts, I slightly altered the code to create the URL dynamically.
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="470" data-num-posts="10"></div>
I've also tried a non-PHP solution:
<script>
$(document).ready(function() {
$('.fb-comments').attr("data-href", document.URL);
});
</script>
The comments appear to work when initially posted, but are not saved on the Facebook end. When I check the number of comments from the Graph API, http://graph.facebook.com/?ids=http://example.com/, the total number remains 0. Any ideas? Could the problem be the result of not having an Application ID? The Facebook developers page makes it sound as if moderation tools are optional.
Turns out the order of the code was the issue. A Facebook App ID is not required. I had the aforementioned non-PHP solution above the Javascript SDK code. Once I rearranged these blocks, the comment box became functional.