jquery - Fancybox:如何为每个JPG设置Facebook评论？

Question

我正在尝试使用 JPG 建立一个 Fancybox 照片库，其中每个 JPG 都附加有自己独特的 Facebook 评论框。这里有一些讨论这个概念的帖子，但没有一个给出明确、可行的答案，特别是对于 Fancybox 用户来说。我发现至少三个网站采用了这种灯箱图像/FB 评论设置，但每个网站都有独特的怪癖(例如使用 Flickr 流而不是图像)。

我对简单的 JPG/评论框如何在 Fancybox 中工作有一个想法，但我的代码无法正常工作，我希望有人能够为我指明正确的方向。

我首先使用向图像添加 Facebook Like 按钮的代码(此代码在 Fancybox 网站上给出)。我可以通过一些修改来实现此代码，例如删除 Twitter 按钮。这是我的脚本，它有效:

$("#newgallery a")
.attr('rel', 'gallery')
.fancybox({
    beforeShow: function () {
        if (this.title) {

            this.title += '<br />'; // Line break after title

            // Add FaceBook like button
            this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>';
        }
    }
});

上面的代码在 Fancybox 的标题选项后创建一个换行符，然后添加 Facebook Like 按钮。 iframe 中的“this.href”是更改每张照片 URL 的部分，这使得 Facebook 能够为该 JPG 加载正确的“赞”按钮。您可以在以下地址的我的测试页面之一上看到我的脚本。 http://www.lycochoir.com/new/tattoo/thumbnails-like.html 请注意两张全尺寸照片之间的 Facebook 点赞计数如何变化，这表明每个 URL 在每张照片加载时都连接到 Facebook。 (评论框也需要这样做。)

由于这种技术有效(尽管我并不热衷于为我的大 JPG 使用绝对链接，这是 FB Like 按钮连接的唯一方式)，我认为它可以用于交换 FB 评论框而不是“喜欢”按钮。不幸的是，这种类似的技术不起作用。以下是 Facebook 为您的评论框提供的代码(这是第一个缩略图):

<div class="fb-comments" data-href="http://www.lycochoir.com/new/tattoo/01.jpg" data-numposts="5" data-colorscheme="light"></div>

因此，我将该代码替换为调用 Like 按钮的 iframe，减去实际的 URL:

this.title += '<div class="fb-comments" data-href="' + this.href + '" data-numposts="5" data-colorscheme="light"></div>';

但这行不通。这是使用上述评论代码的页面: http://www.lycochoir.com/new/tattoo/thumbnails-comments.html

我承认我对 jQuery 不是很流利(尤其是从头开始编写它)，所以也许我错过了一些关键的区别，为什么这不起作用。我看到的最大区别是“赞”按钮有一个 iframe，而评论框只有一个 div。 Facebook 不为评论框制作 iframe 代码。但是这段代码不应该只是将 div 附加到标题下方吗？我究竟做错了什么？ (或者，如果有人知道 Fancybox 与 JPG/Facebook 评论库相结合的网站，请分享链接。)谢谢。

Answer 1

由于您在正文中包含了 Facebook 的 javascript SDK，因此该页面已被解析，因此您可能需要使用 FB.XFBML.parse() 重新解析它 ( REF )在 fancybox 的 afterShow 回调中。

试试这个代码:

$(".fancybox").fancybox({
    minWidth: 400, // so fancybox doesn't shrink way too much
    helpers: {
        title: {
            type: "inside" // better for the comments 
        }
    },
    beforeShow: function () {
        // notice : data-width matches our minWidth option
        this.title = '<div class="fb-comments" data-href="' + this.href + '" data-num-posts="2" data-width="400"></div>'
    },
    afterShow: function () {
        FB.XFBML.parse(); // reparse the document
        $.fancybox.update(); // resize after show (just in case)
    }
});

JSFIDDLE

注释:

• 请留下图像引用(我使用了您的)，以便演示对其他人仍然有帮助。

• 您可能需要在 facebook javascript 代码的 js.src 参数中设置正确的 APP ID，例如:

  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID"; // Set your own FB APP_ID