Question

I have a JS photo gallery that loads individual images from an API into the page when users click a thumbnail. I’d like people to be able to add Facebook comments on each image. So I’ve got my Facebook comments element in the page that contains the gallery.

<div class="fb-comments" data-href="" data-num-posts="10" data-width="480"></div>

On loading the page and first populating the gallery I set the data-href attribute of the comments element to the URL for the first image (for example http://site.com/gallery/1027/1). Then if the user clicks on a thumbnail I reset that attribute to the URL for the selected image.

fbComments.attr('data-href', data.link + index);
FB.XFBML.parse();

The FB.XFBML.parse(); is what I’ve read you’re supposed to do to get Facebook to refresh the comments. I’ve added a comment to one image and tried clicking on the thumbnail for an image without a comment. But my comment for the first image is still there. Can anyone suggest why?

I’ve tried logging out the FB object in my JS file, and it logs OK, so it is available at the point I call it. I’ve checked that the click event in my JS is indeed changing the data-href attribute to the right value. And when I hardcode a different data-href in the fb-comments element the comments render as expected.

Answer 1

I suggest that you completely remove the previous comments box from the dom, then insert a new html with the right data-href and then call the FB.XFBML.parse method.

Another thing is that you should specify where to parse, like so:

FB.XFBML.parse(document.getElementById("container-id"));