javascript - Facebook Like 按钮未显示在 fancybox 标题中

Question

嗨，我知道很多人已经问过这个问题，但我找不到可以帮助我的答案。

我拥有的是一个包含许多画廊的网页，这些画廊使用 fancybox 来显示大图片。我想要的是将 twitter 和 facebook 之类的按钮包含到图像的 fancybox 覆盖层中。

这是页面:http://studiovsf.nl/portretten-voorbeelden.html

我首先使用 JSFiddle 进行了尝试，一切都很好 ( http://jsfiddle.net/kmLWf/247/ )

html:

<a class="fancybox" title=" " data-fancybox-group="gallery1" href="http://www.studiovsf.nl/portfolio/portretten/carmen_1.jpg">using text iso image since i have not enough reputations</a><br/>

JavaScript:

    $(".fancybox")
    .fancybox({
    beforeShow: function () {
        // Add tweet button
        this.title = '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

        // 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=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
    },
    afterShow: function () {
        // Render tweet button
        twttr.widgets.load();
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
}); 

但是当我将此代码放入网页中时，仅显示 twitter 图标，缺少 facebook like 按钮。

我似乎无法弄清楚为什么。

如果有人能告诉我我做错了什么，我将非常感激。

谢谢， 鲁本。

Answer 1

如果您将正在运行的 Fiddle 的 Web 开发人员网络控制台与您的网站进行比较，您会注意到以下内容:在 Fiddle 中，Facebook 链接为

https://www.facebook.com/plugins/like.php?href=http://www.studiovsf.nl/portfolio/portretten/carmen_1.jpg&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23

但是在你的网站上是

https://www.facebook.com/plugins/like.php?href=portfolio/portretten/jardi_betty.jpg&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23

相关部分是 href= 的值，因为它是您网站上的相对链接。由于 Fiddle 中为 Facebook 按钮提供的代码是

this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + ....

对于每个 anchor 标记，并且href是绝对的，您可以检查是否可以将其调整为

 this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' 
+ 'http://www.studiovsf.nl/'  + this.href + ....

也许不是问题，但此外，您的页面上存在脚本错误:

TypeError: jQuery(...).superfish is not a function
jQuery('ul.sf-menu').superfish();

对于responsivemenu.js的第3行jQuery('ul.sf-menu').superfish();