CODEWITHSUNDEEP
ajaxfacebookwordpresstwittercomments
Jan
Jan

Reputation: 1

Display Facebook Comments on Ajax generated page/website

I have been delving into possible StackOverflow solutions for 3 days and more... Have tried basically anything that was suggested - but I just can't seem to get it to work.

I have a wordpress website with a bought theme. This theme uses Ajax to load it's pages & posts. The website can be found here: http://www.eonevent.com - as an example.

What i'm facing now is that both the Facebook comments and the twitter widget are not loaded or displayed when accessing this page (http://www.eonevent.com/#/socialize) through the normal navigation options. It does work however when accessing the page without the "#/".

Now i've been reading that you have to use FB.XFBML.parse for the Facebook comments - but I haven't been able to make that work... And I've tried many different options.

My current setup is as follows...

This is a part of code in the header.php file:

<div id="fb-root"></div>
<script>
     (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 = "//connect.facebook.net/nl_NL/all.js#xfbml=1&appId=373787556026745";    
          fjs.parentNode.insertBefore(js, fjs);
     }
     (document, 'script', 'facebook-jssdk'));
</script>

This is what I use on the page where the comments have to appear:

<fb:comments href="<?php the_permalink(); ?>" num_posts="2" width="500">     
</fb:comments>

And then I've tried to make that all work with adding:

FB.XFBML.parse

But all to no avail.

Any suggestions would be more than welcome - also regarding the twitter widget. I just don't seem to be able to figure it out - even though it might be pretty simple!

Thanks in advance,

Upvotes: 0

Views: 1077

Answers (1)

Subharanjan
Subharanjan

Reputation: 668

Try putting this code in the success part of the AJAX call in your jQuery script. You might be using jQuery get/post/ajax etc..

//facebook comments
var isFacebook = $(data).find('.fb-comments');
var document = window.document;
var contentNode = $(".content");       
if(isFacebook != 'undefined' ) {
    var scriptText = 'FB.XFBML.parse();';
    var scriptNode = document.createElement('script');
    scriptNode.appendChild(document.createTextNode(scriptText));
    contentNode.appendChild(scriptNode);
}

Upvotes: 1

Related Questions