I am trying to troubleshoot what I have done wrong here, coz it's not working.
I've been following the Disqus API Tutorial here: http://help.disqus.com/customer/portal/articles/1131783-tutorial-get-comment-counts-with-the-api.
I've followed everything, but nothing happens when I click on the button. There are so many variables that can go wrong here, but I'm hoping that it's just my HTML.
Thanks, Sar
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Disqus Comment Counts Example</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var disqusPublicKey = "DELETED FOR SECURITY -DISQUSPUBLICKEY";
var disqusShortname = "DELETED FOR SECURITY-MYDISQUSSHORTNAME"; // Replace with your own shortname
var urlArray = [];
$('.count-comments').each(function () {
var url = $(this).attr('data-disqus-url');
urlArray.push('link:' + url);
});
$('#get-counts-button').click(function () {
$.ajax({
type: 'GET',
url: "https://disqus.com/api/3.0/threads/set.jsonp",
data: { api_key: disqusPublicKey, forum : disqusShortname, thread : urlArray },
cache: false,
dataType: 'jsonp',
success: function (result) {
for (var i in result.response) {
var countText = " comments";
var count = result.response[i].posts;
if (count == 1)
countText = " comment";
$('div[data-disqus-url="' + result.response[i].link + '"]').html('<h4>' + count + countText + '</h4>');
}
}
});
});
</script>
</head>
<body>
<h1>Comment Counts Example</h1>
<div>
<a href=” folder/page-1.html”>
<h2>Test Post One</h2>
<div class=”count-comments” data-disqus-url=”http://www.mysite.com/folder/page-1.html”></div>
</a>
</div>
<div>
<a href=”folder/page-2”>
<h2>Test Post Two</h2>
<div class=”count-comments” data-disqus-url=”http://www.mysite.com/folder/page-2.html”></div>
</a>
</div>
<button type="button" id="get-counts-button">Get Comment Counts</button>
</body>
</html>
