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按钮。＆＃34; this.href＆＃34;在iframe中是更改每张照片的URL的部分，这使Facebook能够为该JPG加载正确的Like按钮。您可以在我的一个测试页面上的以下地址查看我的脚本。 http://www.lycochoir.com/new/tattoo/thumbnails-like.html 请注意两张全尺寸照片之间的Facebook Like计数如何变化，这表明每张照片都会在每张照片加载时连接到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：

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（特别是从头开始编写）所以也许我错过了一些关键的区别，为什么这不起作用。我能看到的最大区别是Like按钮有一个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

Answer 2

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

$(".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'
        }
    }
});

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

2 个答案: