Question

I am trying to embedded Facebook comment boxes dynamically generated by Backbone.js in my HTML I have the following code right after the body in my HTML file.

<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/en_US/all.js#xfbml=1&appId=147738045314917";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
</script> 

Then I dynamically generate the div tags using Backbone template. I embed the following html tag.

<div class="fb-comments" data-href="http://something.com" data-num-posts="2" data-width="470"></div>

The problem is that the comment box don’t always show for some reason. I am also using the Facebook SDK in this page too.

I don’t really get this, any help would be great. Thank a lot!

Answer 1

After adding new XFBML elements to the DOM (or the HTML5 equivalent in this case), you want to call FB.XFBML.parse on the containing element in order to transform these.