Disqus comment count in jQuery UI Tab title

Question

I'm trying to get the Disqus comment count to show up in the tab title of a jQuery UI tab.

Disqus says:

Append #disqus_thread to the href attribute in your links. This will tell Disqus which links to look up and return the comment count. For example:

<a href="http://foo.com/bar.html#disqus_thread">Link</a>.

Since my link is in a jQuery Tab it looks like this:

<a href="#tabs-2">Comments</a>

I've tried adding #disqus_thread to it and then the comment count does show up but this also breaks the tab functionality.

How can I add #disqus_thread to the href and not break the jQuery Tab? The full code looks like this:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1"><span>Info</span></a></li>
        <li><a href="#tabs-2"><span>Comments</span></a></li>
    </ul>
    <div id="tabs-1">   
        <p>Lorem ipsum</p>
    </div>              
    <div id="tabs-2">   
        <p>Lorem ipsum</p>
        <div id="disqus_thread"></div>
        <script type="text/javascript">
        // this contains the Disqus JavaScript
        </script>
   </div>   
</div>

Ryan V Ryan V · Accepted Answer · 2013-05-05T18:14:36

The comment counting script is fairly inflexible it looks for anchor tags that have the 'disqus_thread' hash. In your case, you'll probably need to use the API to get comment counts to present them differently.

This answer has an example of how to do this: Showing Disqus comment count in a DIV or SPAN - not <a href>

Keep in mind that you'll probably want to make the Disqus API call server-side, cache it, and use the example to read your cached file. Besides loading faster on your site, this will also keep you from going over the 1000 requests/hour limit.

Disqus comment count in jQuery UI Tab title

1 Answers