If you'd like to show the most recent comments from your Disqus forum on your website, this simple disqus fetch API method will help you do just that.
This is how Disqus recent comments displays on the notification button on this site.
How It Works
The provided code fetches recent comments from your Disqus forum using their API.
It then displays each comment directly on your webpage with the author's name, comment, and a link to view the comment on post.
The Code
Here’s the code that allows anyone set it up on their site:
<!-- HTML Container for Disqus Recent Comments -->
<div id="disqusRecentComments"></div>
<!-- Include Font Awesome if its not on your template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script>
(function() {
// URL for Disqus API - Replace with your own API key and forum ID
const url = "https://disqus.com/api/3.0/forums/listPosts.json?api_key=YOUR_API_KEY&forum=YOUR_FORUM_ID&limit=5&related=thread";
// Fetch recent posts from Disqus API
fetch(url)
.then(response => response.json())
.then(function(data) {
// Get the container where the comments will be displayed
const commentContainer = document.getElementById("disqusRecentComments");
// Iterate through each post and display it as a simple list item
data.response.forEach(post => {
const postElement = document.createElement("div");
postElement.classList.add("post-item");
// Extract necessary data from each post
const authorName = post.author.name;
const message = post.raw_message;
const postUrl = post.url;
// Set up the HTML content for each post
postElement.innerHTML = `
<p><strong>${authorName}</strong> commented: </p>
<p>${message}</p>
<a href="${postUrl}" target="_blank">View full comment</a>
`;
// Append the post item to the container
commentContainer.appendChild(postElement);
});
})
.catch(function(error) {
// Log any errors to the console
console.error("Error fetching recent comments:", error);
});
})();
</script>Steps to Implement on Your Website
1. Get Your API Key:
Visit the Disqus Developer website and sign in. Generate an API key for your forum.
2. Replace API Details:
In the code above, replace YOUR_API_KEY with your actual API key and YOUR_FORUM_ID with your Disqus forum ID or username (mine is 'sdavidprince').
3. Add the Code to Your Site:
Insert the code into your HTML where you want the comments to appear. The <div id="disqusRecentComments"></div> will be the container for the comments.
4. Style the Posts (Optional):
You can style the posts in any way you prefer. Here’s a basic example:
#disqusRecentComments {
margin: 20px;
padding: 10px;
}
.post-item {
margin-bottom: 20px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.post-item a {
color: #1abc9c;
text-decoration: none;
}
Troubleshooting Tips:
API Key Issues:
Double-check that your API key is correct and has permissions to fetch posts.
CORS Issues:
If you face any CORS issues, you might need to adjust the request method or use a proxy service.
API Rate Limits:
The Disqus API has rate limits, so you may want to limit the number of posts fetched. use min of 3 and max of 100
Hope this post is useful...
...because
This approach provides a simple way to integrate recent Disqus comments on your site, uding disqus API and avoid loading disqus javascript when using the disqus recent comments embed widget.
