Fancybox：如何为每个 JPG 设置 Facebook 评论？

Question

我正在尝试使用 JPG 设置 Fancybox 照片库，其中每个 JPG 都附有自己独特的 Facebook cmets 框。这里有一些讨论这个概念的线程，但没有一个给出明确、可行的答案，尤其是对于 Fancybox 用户而言。我发现至少有三个网站采用了这种灯箱图像/FB cmets 设置，但每个网站都有独特的怪癖（例如使用 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 的 title 选项之后创建了一个换行符，然后添加了 Facebook Like 按钮。 iframe 中的“this.href”是更改每张照片的 URL 的部分，这使 Facebook 能够为该 JPG 加载正确的 Like 按钮。您可以在以下地址的我的一个测试页面上看到我的脚本。 http://www.lycochoir.com/new/tattoo/thumbnails-like.html 请注意两张全尺寸照片之间的 Facebook Like 计数如何变化，这表明每个 URL 在每张照片加载时都连接到 Facebook。 （评论框也需要这样做。）

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

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

所以我换了那段代码，减去实际的 URL，代替调用 Like 按钮的 iframe：

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

但这不起作用。这是使用上述 cmets 代码的页面： http://www.lycochoir.com/new/tattoo/thumbnails-comments.html

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

Answer 1

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

试试这个代码：

$(".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
  

Answer 2

我找到了适用于该标题的解决方案。也许 JFK 会有更好的答案，但以下修改后的代码（基于我最初发布的 Fancybox Like 代码）也可以。简而言之，它从 beforeShow 部分的原始开头添加原始 if (this.title) 和换行符，然后将“+”添加到 fb-cmets 代码的行。但是，如果有人有更好的解决方案，请随时发布。

$(".fancybox").fancybox({
    minWidth: 400, // so fancybox doesn't shrink way too much

    beforeShow: function () {
        if (this.title) {

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

        this.title += '<div class="fb-comments" data-href="' + this.href + '" data-num-posts="2" data-width="400"></div>';
        }
    },
    afterShow: function () {
        FB.XFBML.parse();
        $.fancybox.update(); // resize after show
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});