如何在jQuery灯箱中为每个图像添加单独的facebook评论?

时间:2014-01-13 10:16:09

标签: jquery html facebook lightbox facebook-comments

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

我希望每个图片的注释都是分开的。意思是,用户应该能够对每个单独的图像进行评论,而不是整个图库本身。我遇到的问题是,facebook评论只记录整个页面的通用。因此,在灯箱中,当我转到下一个图像时,注释不会刷新。

我已经尝试将单个图片URl传递给facebook请求的'data-href'属性,但这不起作用。我真的不知道该怎么做......

根据我的理解,以及通过谷歌进行大量搜索,评论需要链接到单个网页网址。我可以看到问题出在哪里:它要求提供HTML页面网址,但我正在传递它们的图片网址。

1)我应该使用iframe并将图片加载到那里,然后将iframe url传递给'data-href'属性吗? 2)我应该尝试使用原型(我甚至不知道它们是什么,或者它们是否甚至适用于我的案例大声笑)

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

P.S。这就像,我第三次发布相同的类似问题,所以我决定不再重新编写代码......我之前做过,没有人回答,这次我觉得没有必要浪费空间。除了每个图像的注释之外,关于代码的所有内容都可以工作。但是,如果有人想查看代码,请询问,我会提出来。

提前致谢!

/ ** 解决方案更新 ** / 我设法让这个工作。事实证明,Facebook提前思考并使它们的注释可以直接链接到图像而不仅仅是.html文件。对于像我这样的任何挣扎的冒险家:这是你必须做的: 1)将data-href设置为最初等于用户单击的图像的绝对URL 2)当用户点击上一个/下一个时,更新评论的data-href以反映图片中的变化,并在

后立即调用以下方法
FB.XFBML.parse();

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

对于任何有兴趣的人,您可以在这里查看灯箱的粗略框架:http://shakazulu.host-ed.me/lightbox/lightboxPractice.html

- 不要判断,这只是我用来尝试的一个练习域。我会尝试将代码保留在那里,因为我注意到在Google上找到类似的内容非常困难。如果有人需要整个jQuery代码或CSS,只需询问,我会在这里发布。

祝你的编程冒险好运!

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

1 个答案:

答案 0 :(得分:2)

您是否尝试为每张图片创建虚拟页面?例如,

的内容
 http://www.example.com/picture/picture-id

其中picture-id是数据库中的图片ID?这可以用作插件的假href。您可能需要在后台实际创建此页面,但它可以像显示图像和评论插件一样简单(如果Facebook需要抓取它)。

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