facebook like button not showing in fancybox title

Question

Hi I know a lot has already been asked about this, but I cant find the answer that will help me out.

What I have is a webpage with a number of galleries that are using fancybox to display the big pictures. What I want is to include the twitter and facebook like buttons to the fancybox overlay of the image.

This is the page: http://studiovsf.nl/portretten-voorbeelden.html

I tried it first using JSFiddle and there everything works great ( 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'
        }
    }
}); 

But when I put this code in my webpage only the twitter icon is shown, the facebook like button is missing.

I can't seem to figure out why.

If someone could tell me what I'm doing wrong I would be very greatful.

Thanks, Ruben.

Answer 1

If you compare the web developer net console for the working Fiddle and your website you'll notice the following: At the Fiddle the Facebook link is

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

But at your website it's

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

The relevant part is the value for href= as it's a relative link on your website. As the code provided in the Fiddle for the Facebook-Button is

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

for each anchor tag and the href is absolute, you can check if it'll work if you adjust it to

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

Maybe not an issue, but in addition, you have a script error on your page:

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

for line 3 jQuery('ul.sf-menu').superfish(); of responsivemenu.js