在“灯箱”中添加 facebook 评论

Question

I am building a website to showcase some photos. The photos are viewed using a lightbox like effect. I want to add facebook comments inside the 'lightbox' but the comments doesn't load.

$(function() {

    $('.pics').click(function(){

         ...
         ...

         $(".comments").html("<div id=\"fb-root\"></div><script src=\"http://connect.facebook.net/en_US/all.js#xfbml=1\">" + "<" + "/" + "script>" + "<fb:comments href=\"example.com\" num_posts=\"5\" width=\"800\"></fb:comments>");

          }); 

    });

Thanks in advance.

Answer 1

I think you should try rendering the comments first but keep them invisible. Something like:

<div id="comments" class="hidden">      
  <fb:comments href="example.com" num_posts="5" width="800"></fb:comments>
</div>

Assume the hidden class makes the div invisible.

Now with JavaScript code you should be able to do this:

$(".pics").click(function(){
    $("#comments").show();
});

I have not tested this yet and there's an off-chance Facebook won't load the comments into an invisible element. If that's the case, you might be able to get away with rendering it and adding the hidden class after the page loads, though there might be a flicker.

Answer 2

I think you should try this one http://www.zemgo.net23.net/lightbox.html