类似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的按钮就不见了。

我似乎不明白为什么。

如果有人能告诉我我做错了什么，我会非常高兴的。

谢谢，鲁本。

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 + ....

对于每个锚标记和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();