如何为 jQuery 灯箱中的每个图像添加单独的 Facebook 评论？答案

【问题标题】：How do I add separate facebook comments for every image in a jQuery lightbox?如何为 jQuery 灯箱中的每个图像添加单独的 Facebook 评论？
【发布时间】：2014-01-13 10:16:08
【问题描述】：

我最近使用 HTML5、CSS 和 jQuery 构建了自己的灯箱版本。在它的核心，jQuery 基本上只是将整个灯箱添加到当前显示的页面。我这样说是为了表明我没有使用任何花哨的设备，例如原型或 iFrame。我还能够将 cmets 添加到灯箱中，这就是问题所在。

我希望每个图像的 cmets 都是分开的。这意味着，用户应该能够评论每个单独的图像，而不是整个画廊本身。我遇到的问题是facebook cmets 只记录整个页面的commnets。因此，在灯箱中，当我转到下一张图像时，cmets 不会刷新。

我已尝试将单个图片 URl 传递给 facebook 请求的“data-href”属性，但没有成功。我真的不知道该怎么办......

据我了解，并通过谷歌进行大量搜索，cmets 需要链接到单个页面 URL。我可以看到问题出在哪里：它要求提供 html 页面 url，但我正在向它们传递图片 url。

1) 我应该使用 iframe 并在其中加载图片，然后将 iframe url 传递给“data-href”属性吗？ 2）我是否应该尝试使用原型（我什至不知道它们是什么，或者它们是否适用于我的案例哈哈）

基本上我如何告诉 facebook 保存链接到单个图片而不是整个 html 页面的 cmets？

附：这就像，我第三次发布相同的类似问题，所以我决定不再放代码......我以前做过，没有人回答，这次我觉得没有必要浪费空间。除了每个图像的 cmets 之外，有关代码的所有内容都有效。但是，如果有人想看代码，只要问，我就会放上去。

提前致谢！

/**解决方案更新**/ 我设法让它工作。事实证明，facebook 提前考虑并做到了，因此他们的 cmets 可以直接链接到图像，而不仅仅是 .html 文件。对于像我这样苦苦挣扎的冒险者：这是你必须做的： 1）设置data-href原本等于用户点击图片的绝对URL 2）当用户点击previous/next时，更新cmets的data-href以反映图片的变化，并在之后立即调用以下方法

FB.XFBML.parse();

--该方法基本上刷新了 cmets 插件并使其显示更新的 cmets。那是我的问题。从理论上讲，我的代码一直在工作，我只是没有重新解析它。我添加了那条线，它就像一个魅力。

有兴趣的可以在这里查看灯箱的大致框架：http://shakazulu.host-ed.me/lightbox/lightboxPractice.html

--不要评判，这只是我用来尝试的练习领域。我会尽量保留该代码，因为我注意到在 Google 上很难找到类似的东西。如果有人需要完整的 jQuery 代码或 CSS，只需询问，我将在此处发布。

祝你的编程冒险好运！

/*************强>/

【问题讨论】：

标签： jquery html facebook lightbox facebook-comments

【解决方案1】：

您是否尝试过为每张图片创建一个虚拟页面？例如，类似于

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

其中图片ID 是您数据库中的图片ID？这可以用作插件的假href。您可能需要在后台实际创建此页面，但它可以像显示图像和评论插件一样简单（以防 facebook 需要抓取它）。

或者，仅仅通过不使用 href 属性上的图像扩展名可能会使 facebook-sdk 误以为这是一个有效页面。可以将其视为在用户未启用 javascript 时创建图像页面的版本

【讨论】：

好的，我知道你在哪里......我想。您是说为每个图像创建一个虚拟页面并将它们全部存储在服务器上吗？因为我考虑过这一点，但我最终会在我的服务器上拥有数千页，这似乎有点矫枉过正。有没有办法让我在加载每个图像时为其创建一个虚拟页面？本质上，一系列事件如下：1）动态创建虚拟页面2）将图像加载到虚拟页面3）加载cmets并让facebook抓取虚拟页面4）在facebook收集到正确的cmets后，删除虚拟页面
是的，只需使用 example.com/picture.php?id=id 之类的东西（id 是图片 id）它只是一个 $_GET 参数。你可以使用 mod-rewrite 让它像上面的例子一样“漂亮”
好吧，这听起来像是一个愚蠢的问题，但我对 php 不是很熟悉。老实说，我不知道该代码的作用。通过图片ID，您是指图片名称吗？就像如果我的照片被称为“autumn.jpg”那将是我的身份。然后代码看起来像：data-href="example.com/picture.php?id=autumn.jpg"。再次抱歉，我很抱歉，我真的不明白你在说什么。再次感谢！
对不起，我只是假设您将通过表单上传图像并将它们存储在数据库中。你是手动上传的吗？
如果通过手动上传它们，你的意思是我打开 FileZilla，选择我的图片并点击上传，那么是的，我想我是。无论如何，我让我的画廊工作了。事实证明，Facebook 将 cmets 直接链接到图像没有问题。我遇到的“真正”问题是，当“data-href”属性发生变化时，我没有重新解析 cmets。我只是添加了 FB.XFBML.parse();在更新href的每一行之后，它就像一个魅力。如果您想看到它的实际效果，请检查原始帖子的更新。再次感谢。