Show HN: A Web Widget for Displaying HN Comments

Published: 24 Mar 2024

Here is a simple widget with limited customization options for displaying Hacker news comments. Although nothing fancy, I feel it's still worth sharing for HN writers interested in quickly adding a comments section to their blog.

The Hacker News thread that I am taking as example is "Derivatives and Logarithms of 3D Transforms" by David Farrell (showing love to those who writes about math and graphics programming!).

Getting Started

To use the Hacker News comments widget, simply include it in your HTML text as shown in the example below!

<!-- Import the script -->
<script src="https://kstan.gitlab.io/lib/hn-comments_v1.0.js"></script>

<!-- 
Use the <hn-comments> tag and specify the itemId
The itemId may be obtained from the URL
e.g. https://news.ycombinator.com/item?id=43430498 
-->
<hn-comments itemId="43430498"></hn-comments>
            

The widget also comes with some limited options to allow you to customize its look and feel!

<!-- Import the script -->
<script src="https://kstan.gitlab.io/lib/hn-comments_v1.0.js"></script>

<!-- Setting a background for dark mode -->
<div style="background-color: #1E2021;">
    <!-- Use the <hn-comments> tag with specific properties -->
    <hn-comments 
        itemId="43430498"
        fontColor="white"
        labelFontColor="white"
        labelBackground="#2F394D"
        commentBackground="#282C34"
        leftBorder="#2F394D"
        loadingBarColor="#FE801B">
    </hn-comments>
</div>
            

Like so many alternative Hacker News UIs, this widget uses the Hacker News API.

... but why?

We have to first talk about the other commenting system - Disqus. And I think we can all agree that using Disqus is unpleasant. It comes with a heavy bloat, with super long request logs and tons of tracking networks (i.e., Google Analytics, Facebook, doubleclick.net, adnxs, adsymptotic, etc.). And you can't style it easily.

Meanwhile, HackerNews is already a central point for healthy discussions held by authenticated users mostly genuine in satisfying their intellectual curiosity on technical subjects.

Not all blogs need a comments section. But if it's one that has free and healthy exchange of ideas, putting it at the same space as my writing is definitely welcomed by me and my readers.

And if it brings people to Hacker News, one of the biggest archive of the IndieWeb? Even better!

Thank you for reading! I only do this for personal learning and fun. But if you find this to be a helpful tool, do consider showing your support by dropping a small tip! Cheers!