Fancybox Facebook Comments ?

[Eke]

Hello, 

 

I have a problem getting facebook comments next to my images in fancybox

 

here is my cms page source or contentbox source, have been trying to use both.

<script>// <![CDATA[
$(document).ready(function() {
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=339062419468905";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

$(".fancybox").fancybox({
    minWidth: 400, // so fancybox doesn't shrink way too much
   helpers: {
        title: {
            type: "inside"
        }
    }, 
    beforeShow: function () {
        this.title = '<div class="fb-comments" data-href="' + this.href + '" datanum-posts="5" data-width="400"></div>'
    },
    afterShow: function () {
        FB.XFBML.parse();
        $.fancybox.update(); // resize after show
    }
});
});
// ]]></script>
<a title="1st title" class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11224510_1610295642581380_4533728350559096260_o.jpg"><img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11224510_1610295642581380_4533728350559096260_o.jpg" width="285" height="214" alt="first" /></a> <a class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11312800_1610294962581448_906670266430069846_o.jpg"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xat1/t31.0-8/11312800_1610294962581448_906670266430069846_o.jpg" width="285" height="214" alt="" /></a> <a class="fancybox" rel="gallery1" href="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11039239_1610294879248123_3809809694460479005_o.jpg"> <img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11039239_1610294879248123_3809809694460479005_o.jpg" width="285" height="214" alt="" /></a> <a class="fancybox" rel="gallery1" href="https://scontent-ams2-1.xx.fbcdn.net/hphotos-xtf1/t31.0-8/11080565_1584378805173064_7896545141869454887_o.jpg"> <img src="https://scontent-ams2-1.xx.fbcdn.net/hphotos-xtf1/t31.0-8/11080565_1584378805173064_7896545141869454887_o.jpg" width="285" height="214" alt="" /></a> <a title="test" class="fancybox" rel="gallery1" href="https://scontent-fra3-1.xx.fbcdn.net/hphotos-xtp1/t31.0-8/11133991_1584380108506267_2355790075482831957_o.jpg"> <img src="https://scontent-fra3-1.xx.fbcdn.net/hphotos-xtp1/t31.0-8/11133991_1584380108506267_2355790075482831957_o.jpg" width="285" height="214" alt="" /></a>

 

 

and in the end of global.css

.fb-comments {
    top: 0px;
 }

I'm missing something to get the comments to show, i also tried the code inside jsfiddle with helper title that is not included in prestashop, gave me this result

http://jsfiddle.net/KQGtX/4/

 

There is a comment box showing for a short time.

 

I have also been looking at http://xinhsangchanh.com/ who made a example on how to use fancybox too show comments from facebook.

 

I'm also curious if there is a way to add jquery files to prestashop in a controller or something, I have been looking but have not found any solution.

 

Edit:

So I got the send comment box too show but it's stuck in the top right of the image without showing any comments

Edited June 16, 2015 by Eke (see edit history)