6 ms·

HN-comments-drawer: one line HN comments integration into sites

66 points by prakhar897 3y ago

jenadine 3y ago
The JavaScript makes query to https://hacker-news.firebaseio.com/ https://hacker-news.firebaseio.com/ But who is maintaining that?
- deleted 3y ago
  [deleted]
- firloop 3y ago
  That’s the official API for HN: https://github.com/HackerNews/API https://github.com/HackerNews/API
splatzone 3y ago
Smart! I especially like how the styling is customisable. It would be nice to also include timestamps which act as permalinks to each comment, and also the usernames could link to their HN profiles?
avinassh 3y ago
checked the live demo here - https://prakgupta.com/blog/moving_away_from_substack https://prakgupta.com/blog/moving_away_from_substack looks quite sweet!
rich_sasha 3y ago
Looks cool. I wondered about something like this before, and wasn't sure HN would be happy being a comment provider. Sure, many blog posts end up with a good discussion on HN, but it's not a given that any blog post deserves a HN posting. Especially with self-promotion (not marked as such) being frowned upon.
- mtmail 3y ago
  > wasn't sure HN would be happy being a comment provider. Likely it isn’t.
darekkay 3y ago
Looks good, I've added this project to my growing list of ways to include comments on static websites [1]. [1] https://darekkay.com/blog/static-site-comments/ https://darekkay.com/blog/static-site-comments/
- jay-barronville 3y ago
  Only on HN does a kind soul already have a list being curated for the exact thing posted. Haha. I love it.
- hoosieree 3y ago
  That's a good resource, thank you for compiling it and sharing it here. Do you happen to know if there's any that allows for one user to comment with service A, and another user to comment with service B?
  - darekkay 3y ago
    With all the tools that I've gathered, I don't recall a single one that would support multiple providers. Sounds like a gap in the market ;) Enabling multiple comment providers shouldn't be a problem, e.g. by adding "Comment with X" and "Comment with Y" buttons that load the respective service. But displaying aggregated comments from both providers is a bigger challenge.
    - hoosieree 3y ago
      Yeah, aggregating seems technically challenging, but doable. But I wonder if ActivityPub or some other "open social" protocol would suffice. I'm torn between "support open protocols in particular" versus "support as many things as possible".
asimpletune 3y ago
This is cool. I think small websites need to make a comeback and interacting with an audience is an important ingredient to that. I shared last week a commenting system that accepts comment submissions via email https://r3ply.com https://r3ply.com
deleted 3y ago
[deleted]
jacquesm 3y ago
HN is not meant for this. If you want an external comments section please use an appropriate vehicle.
deleted 3y ago
[deleted]
franciscop 3y ago
I did this exact same thing, called it Comments Network, around 8 years ago (img+discussion here, project doesn't exist anymore): https://imgur.com/a/98fpLs6 https://imgur.com/a/98fpLs6 https://news.ycombinator.com/item?id=12898366 https://news.ycombinator.com/item?id=12898366 In the end I was contacted by HN and was told to shut it down, and so I did since I didn't want to get into a fight. Wonder if you'll receive a similar message or they'll allow it now. There were 3 very important points that I don't see in your project: 1. I moved from "story ID" to "story URL" in the end, since a single URL can have multiple HN threads and I'd be interested in them. 2. The time of comment is _very_ important, not sure why you are not showing it? 3. I had to add some mechanism to block individual comments, while rare there _is_ SPAM and ad-hominem in HN and if you are showing the comments in your project, you might want to do a bit of comment moderation. How much, then it's to the person sharing it, with Comments Network you could also show a single individual comment
- bshshshshsh 3y ago
  I guess you made it before hacker news released their API?
  - rob74 3y ago
    I'm not that familiar with the topic, but it's one thing for HN to provide an API and quite another thing for them to be Ok with being used as a "comments section" or forum for someone else's site, blog etc.?
    - deleted 3y ago
      [deleted]
- gwbas1c 3y ago
  I'd be very interested in someone pointing the TOS to see if this is explicitly blocked. IMO: If Hacker News doesn't want this kind of thing, it should be explicitly called out in the TOS. Otherwise, they don't have much of a leg to stand on. (Except by blocking these kinds of things server-side.)
sleepyhead 3y ago
Great work, however noticed this: id="hn-comments-drawer storyId-38300167 maxDepth-3" Please use data-attributes or another more suitable alternative than id for settings. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Us...
deleted 3y ago
[deleted]
fried_rich 3y ago
Love it! I was procrastinating on a uni assignment so I rewrote the fetch logic to improve performance. Live demo: https://hn-comments-drawer.vercel.app/examples https://hn-comments-drawer.vercel.app/examples Code: https://github.com/giesf/hn-comments-drawer/ https://github.com/giesf/hn-comments-drawer/
- O1111OOO 3y ago
  > Love it! I was procrastinating on a uni assignment so I rewrote the fetch logic to improve performance. > Live demo: https://hn-comments-drawer.vercel.app/examples https://hn-comments-drawer.vercel.app/examples > Code: https://github.com/giesf/hn-comments-drawer/ https://github.com/giesf/hn-comments-drawer/ Dramatic. Not OP but thanks for doing this.
surprisetalk 3y ago
Here's my version of this (no deps, js has good html fallback), as posted on my blog. Note that it's a share button that also works as a link to the latest comments section, so you get the best of all worlds IMO [1] https://taylor.town/hn-discuss https://taylor.town/hn-discuss <a id="hn-discuss" href="https://news.ycombinator.com/submitlink"> Discuss this page on HackerNews. </a> const hn = document.getElementById('hn-discuss'); // Set href to "share current URL and title". hn.setAttribute( 'href', `https://news.ycombinator.com/submitlink` + `?u=${encodeURIComponent(window.location.href)}` + `&t=${encodeURIComponent(document.title)}` ); setTimeout( () => { // Replace href with most popular HN link from the past 4 months. fetch( `https://hn.algolia.com/api/v1/search` + `?tags=story` + `&restrictSearchableAttributes=url` + `&numericFilters=created_at_i>` + Math.round(new Date().getTime()/1000 - 4*30*86400) + `&query=${encodeURIComponent(window.location.href)}` ) .then(res => res.json()) .then(data => { const id = data?.hits?.[0]?.objectID; if (id) hn.setAttribute( 'href', `https://news.ycombinator.com/item?id=${id}` ); }) .catch(err => console.error(err)); }, // Wait 10 seconds before hitting Algolia! 10*1000 );
lloydatkinson 3y ago
I always go back and forth on adding comments to my site. Do I really want the negativity, especially places like HN, can provide? I think it's fairly common now for people to not add comment systems, of any kind, to their blogs.
- JCharante 3y ago
  The comments make the website feel alive though. I remember many Aaron Swartz blogposts would have a comments section many times longer than the original post
  - lloydatkinson 3y ago
    Yeah but do you want the HN typical-smarter-than-thou comments on your site? It sounds exhausting to need to worry about moderating that, for your mental health.
    - JCharante 3y ago
      Well my blog is on github gists so I can have comments available. My opinions are founded on ground principles and facts, and if someone tells me that a fact is wrong then I'm more than happy to evolve my opinion.
- amitp 3y ago
  I went back and forth but tried it, and looked at the comments I got. I decided I really liked the comments I was getting. Some asked questions. Some offered additional information. Some pointed out mistakes. It's been great!
bsnnkv 3y ago
Very cool idea and implementation. I had considered offering something similar for https://kulli.sh https://kulli.sh which also aggregates comments on posts from a whole bunch of other sources too, but after reaching out to a number of people whose shared posts actually get comments here on HN and other places, I quickly realized there is not much desire for something like this from people whose writing is actually discussed.
jefftk 3y ago
When I integrated something similar into my site I did the fetching server side, which dramatically reduces the load on HN. You might want to do something similar? (I'm a big fan of pulling comments back to the original post, as long as you can do it without causing trouble for the discussion site!)

66 points by prakhar897 3y ago

The JavaScript makes query to https://hacker-news.firebaseio.com/ https://hacker-news.firebaseio.com/ But who is maintaining that?

deleted 3y ago
[deleted]
firloop 3y ago
That’s the official API for HN: https://github.com/HackerNews/API https://github.com/HackerNews/API

splatzone 3y ago

Smart! I especially like how the styling is customisable. It would be nice to also include timestamps which act as permalinks to each comment, and also the usernames could link to their HN profiles?

avinassh 3y ago

checked the live demo here - https://prakgupta.com/blog/moving_away_from_substack https://prakgupta.com/blog/moving_away_from_substack looks quite sweet!

rich_sasha 3y ago

Looks cool. I wondered about something like this before, and wasn't sure HN would be happy being a comment provider. Sure, many blog posts end up with a good discussion on HN, but it's not a given that any blog post deserves a HN posting. Especially with self-promotion (not marked as such) being frowned upon.

mtmail 3y ago
> wasn't sure HN would be happy being a comment provider. Likely it isn’t.

darekkay 3y ago

Looks good, I've added this project to my growing list of ways to include comments on static websites [1]. [1] https://darekkay.com/blog/static-site-comments/ https://darekkay.com/blog/static-site-comments/

jay-barronville 3y ago
Only on HN does a kind soul already have a list being curated for the exact thing posted. Haha. I love it.
hoosieree 3y ago
That's a good resource, thank you for compiling it and sharing it here. Do you happen to know if there's any that allows for one user to comment with service A, and another user to comment with service B?
- darekkay 3y ago
  With all the tools that I've gathered, I don't recall a single one that would support multiple providers. Sounds like a gap in the market ;) Enabling multiple comment providers shouldn't be a problem, e.g. by adding "Comment with X" and "Comment with Y" buttons that load the respective service. But displaying aggregated comments from both providers is a bigger challenge.
  - hoosieree 3y ago
    Yeah, aggregating seems technically challenging, but doable. But I wonder if ActivityPub or some other "open social" protocol would suffice. I'm torn between "support open protocols in particular" versus "support as many things as possible".

asimpletune 3y ago

This is cool. I think small websites need to make a comeback and interacting with an audience is an important ingredient to that. I shared last week a commenting system that accepts comment submissions via email https://r3ply.com https://r3ply.com

deleted 3y ago

[deleted]

jacquesm 3y ago

HN is not meant for this. If you want an external comments section please use an appropriate vehicle.

deleted 3y ago

[deleted]

franciscop 3y ago

I did this exact same thing, called it Comments Network, around 8 years ago (img+discussion here, project doesn't exist anymore): https://imgur.com/a/98fpLs6 https://imgur.com/a/98fpLs6 https://news.ycombinator.com/item?id=12898366 https://news.ycombinator.com/item?id=12898366 In the end I was contacted by HN and was told to shut it down, and so I did since I didn't want to get into a fight. Wonder if you'll receive a similar message or they'll allow it now. There were 3 very important points that I don't see in your project: 1. I moved from "story ID" to "story URL" in the end, since a single URL can have multiple HN threads and I'd be interested in them. 2. The time of comment is _very_ important, not sure why you are not showing it? 3. I had to add some mechanism to block individual comments, while rare there _is_ SPAM and ad-hominem in HN and if you are showing the comments in your project, you might want to do a bit of comment moderation. How much, then it's to the person sharing it, with Comments Network you could also show a single individual comment

bshshshshsh 3y ago
I guess you made it before hacker news released their API?
- rob74 3y ago
  I'm not that familiar with the topic, but it's one thing for HN to provide an API and quite another thing for them to be Ok with being used as a "comments section" or forum for someone else's site, blog etc.?
  - deleted 3y ago
    [deleted]
gwbas1c 3y ago
I'd be very interested in someone pointing the TOS to see if this is explicitly blocked. IMO: If Hacker News doesn't want this kind of thing, it should be explicitly called out in the TOS. Otherwise, they don't have much of a leg to stand on. (Except by blocking these kinds of things server-side.)

sleepyhead 3y ago

Great work, however noticed this: id="hn-comments-drawer storyId-38300167 maxDepth-3" Please use data-attributes or another more suitable alternative than id for settings. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Us...

deleted 3y ago

[deleted]

fried_rich 3y ago

Love it! I was procrastinating on a uni assignment so I rewrote the fetch logic to improve performance. Live demo: https://hn-comments-drawer.vercel.app/examples https://hn-comments-drawer.vercel.app/examples Code: https://github.com/giesf/hn-comments-drawer/ https://github.com/giesf/hn-comments-drawer/

O1111OOO 3y ago
> Love it! I was procrastinating on a uni assignment so I rewrote the fetch logic to improve performance. > Live demo: https://hn-comments-drawer.vercel.app/examples https://hn-comments-drawer.vercel.app/examples > Code: https://github.com/giesf/hn-comments-drawer/ https://github.com/giesf/hn-comments-drawer/ Dramatic. Not OP but thanks for doing this.

surprisetalk 3y ago

Here's my version of this (no deps, js has good html fallback), as posted on my blog. Note that it's a share button that also works as a link to the latest comments section, so you get the best of all worlds IMO [1] https://taylor.town/hn-discuss https://taylor.town/hn-discuss <a id="hn-discuss" href="https://news.ycombinator.com/submitlink"> Discuss this page on HackerNews. </a> const hn = document.getElementById('hn-discuss'); // Set href to "share current URL and title". hn.setAttribute( 'href', `https://news.ycombinator.com/submitlink` + `?u=${encodeURIComponent(window.location.href)}` + `&t=${encodeURIComponent(document.title)}` ); setTimeout( () => { // Replace href with most popular HN link from the past 4 months. fetch( `https://hn.algolia.com/api/v1/search` + `?tags=story` + `&restrictSearchableAttributes=url` + `&numericFilters=created_at_i>` + Math.round(new Date().getTime()/1000 - 4*30*86400) + `&query=${encodeURIComponent(window.location.href)}` ) .then(res => res.json()) .then(data => { const id = data?.hits?.[0]?.objectID; if (id) hn.setAttribute( 'href', `https://news.ycombinator.com/item?id=${id}` ); }) .catch(err => console.error(err)); }, // Wait 10 seconds before hitting Algolia! 10*1000 );

lloydatkinson 3y ago

I always go back and forth on adding comments to my site. Do I really want the negativity, especially places like HN, can provide? I think it's fairly common now for people to not add comment systems, of any kind, to their blogs.

JCharante 3y ago
The comments make the website feel alive though. I remember many Aaron Swartz blogposts would have a comments section many times longer than the original post
- lloydatkinson 3y ago
  Yeah but do you want the HN typical-smarter-than-thou comments on your site? It sounds exhausting to need to worry about moderating that, for your mental health.
  - JCharante 3y ago
    Well my blog is on github gists so I can have comments available. My opinions are founded on ground principles and facts, and if someone tells me that a fact is wrong then I'm more than happy to evolve my opinion.
amitp 3y ago
I went back and forth but tried it, and looked at the comments I got. I decided I really liked the comments I was getting. Some asked questions. Some offered additional information. Some pointed out mistakes. It's been great!

bsnnkv 3y ago

Very cool idea and implementation. I had considered offering something similar for https://kulli.sh https://kulli.sh which also aggregates comments on posts from a whole bunch of other sources too, but after reaching out to a number of people whose shared posts actually get comments here on HN and other places, I quickly realized there is not much desire for something like this from people whose writing is actually discussed.

jefftk 3y ago

When I integrated something similar into my site I did the fetching server side, which dramatically reduces the load on HN. You might want to do something similar? (I'm a big fan of pulling comments back to the original post, as long as you can do it without causing trouble for the discussion site!)