Question

I have a problem consistently displaying Facebook Comments on my AJAX driven website. Each dynamic page of my website has Facebook Comments. The Facebook Comments display on the first visit to a page but when I navigate away from the page and return back to it the Facebook Comments no longer appear. If I refresh the page then the Facebook comments will reappear but they still disappear when I navigate away and return to the same page. I have a feeling that this issue has something to do with the second call to insertBefore(). Can someone suggest a solution to this issue? Below is my code:

MY CODE:

<div class="comments-detail-view">
        <div id="fb-root"></div>
        <script type="text/javascript">
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    js = d.createElement(s); js.id = id;
                    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxxx";
                    fjs.parentNode.insertBefore(js, fjs); //  **insertBefore()**
                }(document, 'script', 'facebook-jssdk'));  
        </script>
        <div class="fb-comments" data-href="UNIQUE DYNAMIC URL" ></div>
</div>

Answer 1

Try re-parsing with a function. In the example i can reload the fbc DIV with the comments box by firing the function and using xfbml to parse.

---

<div id="fbc"></div>
<script>
function comments(){
var lb=document.getElementById('fbc');
lb.innerHTML='<div class="fb-comments" data-href="UNIQUE DYNAMIC URL" ></div>';
FB.XFBML.parse(lb);
};
</script>