It's easy to display disqus recent comments with disqus's built-in comment embed feature. This method does not require an API key as demonstrated in here, and is much simpler to implement on any site.
Ready-to-Paste Code
<div id="recentComments">
<script src="https://short_name.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=48&excerpt_length=100"></script>
</div>
Do This:
1. Replace short_name in the script URL with your Disqus shortname (mine is sdavidprince).
Parameters in the Script:
num_items=5 = Number of recent comments to display.
hide_avatars=0 – Set to 1 to hide avatars.
avatar_size=48 = Controls the size of avatars (in pixels).
excerpt_length=100 – Limits the number of characters in comment previews.
Styling
You can Style the widget to match any design you want here is my simple styles
#recentComments{max-width:800px;margin:20px auto;padding:15px;background:linear-gradient(135deg,#ffffff 0%,#f0f7ff 100%);border-radius:12px;box-shadow:0 4px 15px rgb(66 133 244 / .15);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;border:1px solid #e1edff}#dsq-recentcomments{list-style:none;padding:0;margin:0}.dsq-widget-item{padding:15px;margin-bottom:12px;border-radius:8px;background:rgb(255 255 255 / .8);border:1px solid #e8f0fe;transition:all 0.3s ease}.dsq-widget-item:hover{background:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgb(66 133 244 / .12)}.dsq-widget-item:last-child{margin-bottom:0}.dsq-widget-avatar{float:left;margin-right:15px}.dsq-widget-avatar img{border-radius:50%;border:3px solid #4285f4;box-shadow:0 2px 8px rgb(66 133 244 / .2);transition:transform 0.3s ease}.dsq-widget-avatar img:hover{transform:scale(1.1)}.dsq-widget-user{color:#1a73e8;font-weight:600;text-decoration:none;font-size:15px;background:linear-gradient(120deg,#4285f4,#34a853);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}.dsq-widget-user:hover{background:linear-gradient(120deg,#34a853,#4285f4);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}.dsq-widget-comment{color:#3c4043;font-size:14px;line-height:1.6;margin:10px 0;padding:8px;background:rgb(242 245 255 / .5);border-radius:6px;border-left:3px solid #4285f4}.dsq-widget-meta{font-size:12px;color:#5f6368;margin-top:8px;padding-top:8px;border-top:1px solid #e8f0fe}.dsq-widget-meta a{color:#ea4335;text-decoration:none;transition:color 0.2s ease}.dsq-widget-meta a:hover{color:#fbbc05;text-decoration:underline}.dsq-loading{text-align:center;color:#4285f4;padding:20px;font-style:italic;background:linear-gradient(120deg,#4285f4,#34a853);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}@media (max-width:480px){#recentComments{padding:10px}.dsq-widget-avatar{width:32px;height:32px}.dsq-widget-comment{font-size:13px}.dsq-widget-meta{font-size:11px}}@keyframes rainbow{0%{border-color:#4285f4}25%{border-color:#34a853}50%{border-color:#fbbc05}75%{border-color:#ea4335}100%{border-color:#4285f4}}.dsq-widget-item:hover .dsq-widget-avatar img{animation:rainbow 3s infinite}#recentComments{max-width:800px;margin:20px auto;padding:20px;background:linear-gradient(145deg,#f0f4ff 0%,#ffffff 100%);border-radius:16px;box-shadow:0 8px 30px rgb(0 0 0 / .08)}#recentComments:before{content:"Recent Comments";display:block;font-size:24px;font-weight:700;margin-bottom:20px;color:#2D3748;background:linear-gradient(120deg,#6B46C1,#3182CE);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}#dsq-recentcomments{list-style:none;padding:0;margin:0}.dsq-widget-item{background:#fff;margin-bottom:16px;padding:16px;border-radius:12px;border:1px solid rgb(226 232 240 / .8);transition:all 0.3s ease;position:relative;overflow:hidden}.dsq-widget-item::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:linear-gradient(to bottom,#6B46C1,#3182CE);border-radius:4px 0 0 4px}.dsq-widget-item:hover{transform:translateY(-2px);box-shadow:0 12px 20px rgb(107 70 193 / .1)}.dsq-widget-avatar{float:left;margin-right:15px;position:relative}.dsq-widget-avatar img{width:48px;height:48px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #6B46C1;transition:all 0.3s ease}.dsq-widget-item:hover .dsq-widget-avatar img{transform:scale(1.05);box-shadow:0 0 0 2px #3182CE}.dsq-widget-user{display:inline-block;color:#2D3748;font-weight:700;font-size:16px;text-decoration:none;margin-bottom:4px;transition:color 0.3s ease}.dsq-widget-user:hover{color:#6B46C1}.dsq-widget-comment{color:#4A5568;font-size:15px;line-height:1.6;margin:8px 0;padding:8px 0}.dsq-widget-meta{font-size:13px;color:#718096;margin-top:8px;padding-top:8px;border-top:1px dashed rgb(203 213 224 / .5);display:flex;align-items:center;gap:8px}.dsq-widget-meta a{color:#3182CE;text-decoration:none;transition:all 0.3s ease;position:relative}.dsq-widget-meta a:hover{color:#6B46C1}.dsq-widget-meta a::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:linear-gradient(to right,#6B46C1,#3182CE);transform:scaleX(0);transition:transform 0.3s ease}.dsq-widget-meta a:hover::after{transform:scaleX(1)}.dsq-loading{text-align:center;padding:20px;color:#6B46C1;font-style:italic;background:linear-gradient(120deg,#6B46C1,#3182CE);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}@media (max-width:480px){#recentComments{padding:15px;margin:10px}.dsq-widget-item{padding:12px}.dsq-widget-avatar img{width:40px;height:40px}.dsq-widget-user{font-size:14px}.dsq-widget-comment{font-size:14px}.dsq-widget-meta{font-size:12px}}@keyframes shine{0%{background-position:-100% 0}100%{background-position:200% 0}}.dsq-widget-item:hover::before{background:linear-gradient(45deg,#6B46C1,#3182CE,#6B46C1);background-size:200% 100%;animation:shine 3s infinite linear}How to Implement on Blogger:
<> Go to Layout in your Blogger dashboard.
<> Add an HTML/JavaScript gadget.
<> Paste the code into the gadget.
<> Save and view your site.
Advantages of This Approach:
1. This is a default recent comment script by disqus
2. No need to sign up for or configure an API key like the previous shared post.
3. Works instantly with minimal setup.
4. Easily change the number of comments, avatars, and excerpt lengths.
Notes:
This method works only if Disqus is already installed and active on your site.
It fetches comments dynamically from Disqus using their widget.
Since it’s an external script, any changes or issues on Disqus's end may affect the display.
That's all.
