Inserting fb:comments with javascript

Question

How do I insert the facebook comment plugin using javascript? My website is ajax-driven and I need to load/reload the facebook comment plugin depending on a 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 doesn't work, so I tried creating the elements and then appending them, but then there is the <fb:comments> element, which is a problem.

Best regards, Ulrik

Answer 1

FB:Root should be a part of the page at build time, and use the Javascript provided by FB to asynchronously load Facebook JS libraries on document load....just like FB describe.

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 will initialise the FB:Comments.

You can see a working example of this on my page at Track Vision - races page I spent a while sweating on this code, but it's all functional now! FB documentation is shocking!

All the best