I have a website that does not have page refreshes when the visitor navigates to other pages (the site is similar to hotornot.com in functionality).
I’m trying to use Facebook comments, which I’ve managed to use fine for the first page the visitor lands on. When the visitor navigates to a second page I’m trying to update the comments box to be relevant to the next “page”.
Please see my code below:
<head>
<script type="text/javascript">
function facebookcomments() {
fbdiv = document.getElementById("fbcm");
fbdiv.innerHTML = '<div id="fb-root"></div>';
(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&appId=343149849069221";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
hard_url = "http://www.example.com/usernames/" + thisusername + "/" + thisitem;
showcomments = document.getElementById("show_comments");
showcomments.innerHTML = '<div id="fb-comments" class="fb-comments" data-href="' + hard_url + '" data-num-posts="2" data-width="470" mobile="false"></div>';
}
</script>
</head>
<body onload="facebookcomments();">
Essentially I generate a unique URL for the page when the page loads and pass this into the Facebook comments script. This function then populates the comments div onload.
I am triggering the facebookcomments(); function when someone clicks to go to the next item on the playlist. I was hoping the innerHTML function would simply swap out the current set of comments, with the relevant set for the new “page”, however, it disappears completely instead.
Any help would be appreciated.
After adding a Facebook element to your page, you need to call FB.XFBML.parse()
Add that function call in the last line of your function and you should be fine.