How do I add separate facebook comments for every image in a jQuery lightbox?

Question

I recently finished building my own version of a lightbox using HTML5, CSS, and jQuery. At the core of it, jQuery basiically just adds the entire lightbox to the current displayed page. I say this to make it clear that I'm not using any sort of fancy devices such as prototypes or iFrames. I was also able to add comments to the lightbox and that's where the problem comes in.

I want the comments to be separate for every image. Meaning, users should be able to commenton each individual image, not the whole gallery itself. The problem I'm having is that the facebook comments only record commnets for the whole page. So, while in the lightbox, the comments don't refresh when I go to the next image.

I've tried passing the individual picture URl to the 'data-href' attribute that facebook requests but that didn't work. I really don't know what to do...

From my understanding, and much searching thru google, the comments need to be linked to an individual page URL. I can see where the problem comes in: it asks for html page urls but I'm passing them picture urls.

1) Should i use an iframe and load the picture in there, then pass iframe url to the 'data-href' attribute? 2) Should i try using prototypes (i don't even know what those are or if they would even apply to my case lol)

Basically how do I tell facebook to save comments linked to an individual picture and not the entire html page?

P.S. This is like, my third time posting the same similar question so I decided not to put the code up again... I did before, no one answered and this time I felt there was no need to waste the space. Everything about the code works tho except for the comments for every image. If someone wants to see the code, however, just ask and I'll put it up.

Thanks in advance!

/**SOLUTION UPDATE**/ I managed to get this to work. It turns out facebook thought ahead and made it so their comments can be linked directly to an image and not just a .html file. For any struggling adventurers out there like me: here is what you have to do: 1) Set data-href originally equal to the absolute URL of the image that the user clicks on 2) When the user clicks previous/next, update the data-href of the comments to reflect the change in picture and call the following method right after

FB.XFBML.parse();

--That method basically refreshes the comments plugin and makes it display the updated comments. That was my problem. In theory, my code was working the whole time, I just wasn't re-parsing it. I added that line and it works like a charm.

For anyone interested, you can check out the rough framework of the lightbox here: http://shakazulu.host-ed.me/lightbox/lightboxPractice.html

--Don't judge, it's just a practice domain I use to try things out. I will try to keep that code up there as long as I can as I noticed it's very hard to find something similar on Google. If anyone needs the whole jQuery code or the CSS, simply ask and I will post it here.

Good luck in your programming adventures!

/*************/

Answer 1

Have you tried creating a dummy page for each image? E.g something along the lines of

 http://www.example.com/picture/picture-id

where picture-id is the picture id in your database? This could be used as the fake href for the plugin. You might need to actually create this page in the background, but it could be as simple as just displaying the image and the comment plugin (in case facebook needs to crawl it).

Alternatively, just by not using an image extension on the href attribute may fool the facebook-sdk into think it's a valid page. Think of it as creating a version of the image page for when a user doesn't have javascript enabled