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

如果比较工作中的 Web 开发人员网络控制台 Fiddle 和您的网站，您会注意到以下内容：在 Fiddle 处，Facebook link 是

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= 的值，因为它在您的网站上是相对的 link。由于 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(); 行

facebook 喜欢的按钮没有显示在 fancybox 标题中

facebook like button not showing in fancybox title

javascript

jquery

facebook

fancybox