Skip to content

Instantly share code, notes, and snippets.

@valueof
Created July 8, 2010 08:37
Show Gist options
  • Save valueof/467770 to your computer and use it in GitHub Desktop.
Save valueof/467770 to your computer and use it in GitHub Desktop.
Comments count code example
<html>
<head>
<title>Comments count code example</title>
<!--
Note: Disqus uses custom data- attributes to specify thread identifiers.
Those attributes are part of the HTML5 specs and already supported by all browsers.
For more information, see:
* http://ejohn.org/blog/html-5-data-attributes/
* http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data
-->
</head>
<body>
<!-- For this link, we will try to fetch comments count by URL: http://example.com/article.html -->
<a href="http://example.com/article.html#disqus_thread">First article</a>
<!-- For this link, we will try to fetch comments count by identifier: article2identifier -->
<a href="http://example.com/article2.html#disqus_thread"
data-disqus-identifier="article2identifier">Second article</a>
<!-- We will ignore this link because its href attribute does not end on #disqus_thread -->
<a href="http://example.com/" data-disqus-identifier="tenthousands">Anchor</a>
<script type="text/javascript">
// This is actual code that needs to be inserted.
var disqus_shortname = 'websiteshortname'; // Put your website's shortname here
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://disqus.com/forums/' + disqus_shortname + '/count.js'; // And here
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</body>
</html>
@Znarkus
Copy link

Znarkus commented Aug 13, 2010

Using a proprietary attribute breaks validation, can't you use the "rel" attribute?

@valueof
Copy link
Author

valueof commented Aug 14, 2010

We can't use rel because we have more than one way to identify the thread. For example, in addition to data-disqus-identifier we already have data-disqus-slug.

Also, data- attributes are part of HTML5 specs: http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data

@Znarkus
Copy link

Znarkus commented Aug 14, 2010

Couldn't you use it like

or something similar?

Otherwise I guess it's a good time to convert to HTML5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment