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 ments on each image. So I've got my Facebook ments element in the page that contains the gallery.
<div class="fb-ments" 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 ments element to the URL for the first image (for example ). 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 ments. I've added a ment to one image and tried clicking on the thumbnail for an image without a ment. But my ment 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-ments element the ments render as expected.
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 ments on each image. So I've got my Facebook ments element in the page that contains the gallery.
<div class="fb-ments" 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 ments element to the URL for the first image (for example http://site./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 ments. I've added a ment to one image and tried clicking on the thumbnail for an image without a ment. But my ment 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-ments element the ments render as expected.
I suggest that you pletely remove the previous ments 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"));