Insert fb: comments using javascript

Question

How to insert facebook comment plugin using javascript? My site is managed by ajax and I need to download / reload the facebook comment plugin depending on the hash (index.html / # frontpage) → (index.html / # movie1). My first thought was to use innerHTML:

document.getElementById('facebook').innerHTML = "<div id='fb-root'></div><fb:comments href='http://viljegse.dk/' num_posts='10' width='572'></fb:comments></div>"; 

This, however, does not work, so I tried to create the elements and then add them, but then there is the <fb:comments> element, which is the problem.

Regards, Ulric

Answer 1

FB: Root should be part of the page at build time and use the Javascript provided by FB to asynchronously load the Facebook JS libraries when loading documents ... just like the description of FB.

Then insert the FB comments using

 document.getElementById('theplace').innerHTML="<fb:comments blah blah blah></fb:comments>" 

and THEN

 FB.XFBML.parse(document.getElementById('theplace')); 

This bit of code initializes FB: Comments.

You can see a working example of this on my page on the Track Vision - race page. I spent some time sweating on this code, but now everything works! FB documentation is shocking!

All the best

Answer 2

I managed to solve the problem by calling FB.XFBML.parse in the onLoad () callback