jQuery load() and Facebook Comments

Question

Long and short of it: Facebook comments aren't displayed when loaded from another page in a lightbox-type thing via jQuery.load(). FB comments are displayed when you go directly to the page being loaded in the lightbox.

The lightbox is a custom dealie that I wrote in jQuery that loads the post container DIV from the post's permalink page. To see what's happening, visit http://frank.is/blog/. Use the main link to view the post in a lightbox, and click PERMA → to see the post on its own page. It should be self-explanatory.

My question: what do I need to add to allow those comments to show up in the lightbox thing as well?

Answer 1

Put this in your AJAX call output:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="www.example.com" num_posts="2" width="500"></fb:comments>

<script>FB.XFBML.parse();</script>

Should work just fine!

Answer 2

Facebook API's annoy me. It's not clear where to get information so I feel your pain.

With that being said, it seems that you have raw XFBML uninitialized in the lightbox. It looks like you need to reparse the data after it is loaded.

<fb:comments migrated="1" publish_feed="true" width="600" numposts="10" href="http://frank.is/blog/2011/05/26/google-apps-on-iphone-connection-to-the-server-failed/" xid="VQ4yhN59hJmmSXq_post73"></fb:comments>

You can try manually calling parse after you load the XFBML into the lightbox:

FB.XFBML.parse();

or to target a component to optimize the load:

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