facebook喜欢按钮没有显示在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-Button 提供的代码是

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

对于每个锚标签，并且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();