Fancybox: how to set up Facebook comments for each JPG?

Question

I am trying to set up a Fancybox photo gallery, using JPGs, in which each JPG has its own unique Facebook comments box attached to it. There are a few threads here discussing this concept, but none gives a clear, workable answer, particularly not for Fancybox users. I have found at least three sites that employ this lightbox image/FB comments setup, but each has unique quirks (such as using Flickr streams instead of images).

I have an idea for how a simple JPG/comment box might work in Fancybox, but my code isn't working and I'm hoping someone might be able to point me in the right direction.

I started by using the code that adds a Facebook Like button to images (this code is given on the Fancybox site). I was able to implement this code with a few modifications, such as removing the Twitter button. Here is my script, which works:

$("#newgallery a")
.attr('rel', 'gallery')
.fancybox({
    beforeShow: function () {
        if (this.title) {

            this.title += '<br />'; // Line break after title

            // 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=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>';
        }
    }
});

The above code creates a line break after Fancybox's title option, then adds the Facebook Like button. "this.href" within the iframe is the part that changes the URL for each individual photo, which enables Facebook to load the correct Like button for that JPG. You can see my script on one of my test pages at the following address. http://www.lycochoir.com/new/tattoo/thumbnails-like.html Note how the Facebook Like count changes between the two full-size photos, which shows that each URL connects to Facebook as each photo loads. (This needs to happen for the Comments box too.)

Since this technique works (although I am not crazy about having to use an absolute link for my large JPG, which is the only way the FB Like button connects), I thought it could be used to swap in the FB comments box instead of the Like button. Unfortunately, this similar technique doesn't work. Here is the code that Facebook gives for your comments box (this was for the first thumbnail):

<div class="fb-comments" data-href="http://www.lycochoir.com/new/tattoo/01.jpg" data-numposts="5" data-colorscheme="light"></div>

So I swapped in that code, minus the actual URL, in the place of the iframe that calls the Like button:

this.title += '<div class="fb-comments" data-href="' + this.href + '" data-numposts="5" data-colorscheme="light"></div>';

But that doesn't work. Here is the page using the above comments code instead: http://www.lycochoir.com/new/tattoo/thumbnails-comments.html

I admit that I am not super-fluent in jQuery (especially writing it from scratch) so maybe I'm missing some key difference as to why this doesn't work. The big difference I can see is that the Like button has an iframe and the comments box just has a div. Facebook doesn't make iframe code for comments boxes. But shouldn't this code just append the div below the title? What am I doing wrong? (Alternately, if anyone knows a site in which Fancybox is combined with a JPG/Facebook comment gallery, please share the link.) Thanks.

Answer 1

Since you are including the Facebook's javascript SDK in the body, the page is already parsed so you may need to re-parse it again using FB.XFBML.parse() (REF) within fancybox's afterShow callback.

Try this code :

$(".fancybox").fancybox({
    minWidth: 400, // so fancybox doesn't shrink way too much
    helpers: {
        title: {
            type: "inside" // better for the comments 
        }
    },
    beforeShow: function () {
        // notice : data-width matches our minWidth option
        this.title = '<div class="fb-comments" data-href="' + this.href + '" data-num-posts="2" data-width="400"></div>'
    },
    afterShow: function () {
        FB.XFBML.parse(); // reparse the document
        $.fancybox.update(); // resize after show (just in case)
    }
});

JSFIDDLE

NOTES :

• Please leave the image references (I used yours) so the demo remain helpful to someone else.

• You may need to set the proper APP ID within the js.src parameter of the facebook javascript code like :

  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID"; // Set your own FB APP_ID
  

Answer 2

I found a solution that works for the title. Maybe JFK will have a better answer, but the following revised code (based on the Fancybox Like code that I originally posted) works too. In a nutshell, it adds in the original if (this.title) and line break from the original opening of the beforeShow section, and then adds the "+" to the line for the fb-comments code. If someone has a better solution, however, feel free to post.

$(".fancybox").fancybox({
    minWidth: 400, // so fancybox doesn't shrink way too much

    beforeShow: function () {
        if (this.title) {

        this.title += '<br />'; // Line break after title

        this.title += '<div class="fb-comments" data-href="' + this.href + '" data-num-posts="2" data-width="400"></div>';
        }
    },
    afterShow: function () {
        FB.XFBML.parse();
        $.fancybox.update(); // resize after show
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});