Question

The Facebook comments count can be done in three different ways: (without directly using JS)

<fb:comments-count href="http://example.com" />

<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com" />

<div class="fb-comments-count" data-href="http://example.com">0</div>

The issue, however, is that doing something like this messes things up:

<p><div class="fb-comments-count" data-href="http://example.com">0</div> comments</p>

…because a <div> is firstly, not valid inside a <p> tag and secondly, looks wrong (though this could be fixed with CSS).

Basically, my question is: is there a way to do the above without using a <div> (a <span> for example), bearing in mind that I want to use the HTML5 method and (if possible!) want to avoid using javascript?

Clarification: I would like to avoid writing extra JS in the page simply because the MVC view currently looks nice and clean and I would prefer to keep it that way. Obviously, I’m still including the Facebook Connect library.

Answer 1

So, one solution would be to use a DIV instead of a P as the outer element.