Show HN: Embed HN comments in your website | Hacker News Reader

Show HN: Embed HN comments in your website

comments.network

137 pointsfranciscop74 comments

This looks good.

Minor gripe: not sure if it's a good idea that the network be an attribute name instead of an attribute value; to this:

    <comment-box hackernews="11850599" limit="1" class="border"></comment-box>

I would prefer:

    <comment-box network="hackernews" items="11850599" limit="1" class="border"></comment-box>

If you have a different attribute name per network, the DTD changes every time you add a network. Not that anyone cares, but still.

- - -

Edit: a previous version of this comment asked why the tag was not self-closing; in fact, custom elements in HTML5 should indeed have a closing tag; see

http://stackoverflow.com/questions/23961178/do-custom-elemen...

I'm not sure that you can have self-closing custom tags in HTML5. Per [1],

  ...if the element is one of the void elements,
  or if the element is a foreign element, then
  there may be a single U+002F SOLIDUS
  character (/). This character has no effect
  on void elements, but on foreign elements
  it marks the start tag as self-closing.

The list of element types [2] is fairly short, so I think if you attempted to self-close a custom tag, behavior might depend on how the parser's error recovery treats custom elements.

[1] http://w3c.github.io/html/syntax.html#start-tags

[2] http://w3c.github.io/html/syntax.html#writing-html-documents...

You're right it seems! I have edited my comment to reflect this.

(Why would HTML5 have both self-closing and non-self closing tags though?? It's just a syntax shortcut, they should either take it or leave it, but create a special class of "empty tags" seems crazy to me).

I think keeping the network as an attribute name would allow it to do multiple networks in one box in the future.

Not future, you can already do it:

https://jsfiddle.net/franciscop/eo5v6ghc/

Except that the whole promise of XML and DTD is that you can have validated serialization of your objects. If the network is switched to an attribute name with a string value, it can no longer be validated that you've chosen a valid network, unless you use an enumeration (in which case you've still changed the DTD).

Yes, if you use an enumeration you do change the DTD each time you add a network, but not the structure of the element. It's not the same error and it doesn't tell you the same thing.

It's obviously not very important... I can't seem to be able to put into words why it bothers me so much! ;-)

That's an interesting idea, but since we have to manually add each network and then it's automatically parsed from that list, at least on my end it wouldn't make any difference at all. Also one of the main features is that you can mix different networks and different threads per network, so that would be really confusing: what does this mean?

    <comment-box network="hackernews reddit" items="11850599 11850500 11859454"></comment-box>

For the Edit: I searched this thorough, custom elements cannot be self-closing. And the closest thing that I found indicates that, even if they could be self-closing (void elements), then they cannot have anything inside (which is also not what I wanted).

See example:

https://jsfiddle.net/franciscop/eo5v6ghc/

> on my end it wouldn't make any difference at all

Sure, but attribute (or tag) names refer the the structure of the document whereas values refer to each special case; structurally (essentially) those two are the same:

    <comment-box hackernews="1">
    <comment-box reddit="4">

but you can't tell because they have different attributes.

Okay, so in order to write (current solution):

    <comment-box hackernews="11850599" reddit="11850500 11859454"></comment-box>

you could do:

    <comment-box network="hackernews" items="11850599"></comment-box>
    <comment-box network="reddit" items="11850500 11859454"></comment-box>

which would work just the same, you just have to group consecutive comment-box into one; or you could even do this:

    <comment-box sources="hackernews: 11850599; reddit: 11850500 11859454"></comment-box>

(inline css style).

The last example of my previous comment is a little ugly; in "real" XML we would write:

    <comment-box>
      <source name="hackernews" items="12"/>
      <source name="reddit" items="24 27"/>
      </comment-box>

which would be very readable; but since we don't have self-closing tags and we need to use hyphens in tag names, it's probably defensible to try to limit the number of tags and put as much information as possible inside attributes...

Totally agree about your conclusion (:

I think that's the same as with the modern <picture> and <video>. I recently tried something similar but in "traditional" html structure, but also found it a bit too verbose for my taste:

https://medium.com/@fpresencia/leveraging-modern-apis-a13fa6...

Can we not do this, please?

One of the reasons that HN comment threads are still mostly worthwhile when other sites and comment services are swamp fires is the community that has been built here.

That people have to come here to read and reply helps us form that community and our social norms.

Sometimes it's ok to remain a small club.

No, communities grow and evolve, it's inevitable. Trying to prevent that in order to avoid the problems it comes with is understandable, but ends up causing other problems in their stead.

It's how it grows, and whether growth is the priority.

Taking the HN comment community out of the context of the site makes it no different than any other drive-by commenting platform.

This thought process: "HN Comments are great. I want comments on my site. Other comment systems are terrible. I'll put HN comments on my site". Misses the point of why HN comments are great and why these comments-as-a-platform services have all resulted in the same level of awful, despite repeated and varying attempts to solve the problem.

Put a link to HN comments in your footer, bring them here, let the community and the mods help shape the discussion. Don't take the HN conversation out of context and splat it across the web.

If you want federated comments, use one of the existing, awful, toxic commenting systems that inevitably result from that sort of usage.

This has been asked/answered before, but basically it's all about context/relevance. I am adding more networks so you can keep things relevant. Made a blog post about your Raspberry Pi/Node.js server/Elixir? Cool, then HN might be a good fit and you can add the tag `hackernews="31415926535"`. Is it a cooking recipe? Then add that https://www.reddit.com/r/Cooking/ 's link to your post. Actually Reddit is great for this since they have many different topics, but I focused first on improving HN's version since that's the site I use most (it's still an alpha/dev version but wanted some feedback from HN).

Definitely harming the HN community is something that has been mentioned several times which I didn't consider because of what I mentioned above, so I will take that into account when I publish the final version. I don't want to change/harm the community at all, just so other people can read the awesome comments that happen here.

"... the awesome comments that happen here."

Happen here. In context. In the community.

As I stated in my above comment, I believe that encouraging visitors from one site to come directly to a comment (rather than the entire thread) specifically removes the context.

And that could be a bad thing, no?

That is a really good point. Even though before clicking the Reply button they can see that comment and its parents, I agree that it would be a better idea to go to that specific comment in the thread instead of to the reply screen that has no context. I thought there was no way of doing it, but each comment has its own id so I'll just link to the `#ID` so even more context is added when clicking on "reply". Thanks for the tip!

>Sometimes it's ok to remain a small club.

Well, it appears that other members of this community have different ideas about what this community "should be". And that's okay too.

Controlling a community very rarely works. Best thing, IMHO, is to embrace the market, as it were, and assume something will come along to fill the space once occupied by the thing you loved before it morphed. In other words, try lobster.rs.

I am actually with you in that, my guess is: the ability to click directly on "reply" that goes to a comment with no context would encourage discussion that is less nuanced.

I love the embedding of the comments. I love the ability to click to come to Hacker News and read the whole discussion. I don't love that particular feature though and wish it would be removed.

It's my understanding that keeping a discussion board like this one high quality is a very demanding and delicate task relying on great algorithms and lots of moderator effort.

I could easily envision that feature creating an overload.

Looks promising. There are plenty of issues with Disqus and running a full Discourse instance just for comments is probably overkill.

This is my current low-tech solution on https://unop.uk that works on any page (or any site for that matter):

  <a href="javascript:window.location=%22https://news.ycombinator.com/submitlink?u=%22+encodeURIComponent(document.location)+%22&amp;t=%22+encodeURIComponent(document.title)">Submit / Comment on Hacker News</a>

That is totally awesome, I didn't know you could submit it like that, many actions in HN are protected with custom/per session tokens. I wonder if it'd be violating HN's ToS somehow... I contacted them for asking about some white-hat stuff, so I'll ask them again about adding something like that, but my guessing is if it's properly labeled as yours it'll be okay. Did you happen to contact them/find affirmative language anywhere? (you are not my lawyer and whatever you say is not legal advice, don' worry).

I think it's probably fine. It only pre-populates a form and doesn't automatically submit. It's also almost exactly the same as the official Bookmarklet that's linked to from the footer of most pages on HN: https://news.ycombinator.com/bookmarklet.html

One thing that struck me the other day was that HN disallows commenting on items older than 2 weeks. This pretty much rules out the use case for me. I have been on the receiving end of intriguing comments that arrived after 2 years.

I would ask for Diaspora support, but after seeing that the comments will go through comments.network's infrastructure, I guess I'd rather not add that dependency.

Nice idea though, if you are cool with limiting comments to 2 weeks. I know some people do like that.

One of the main points developing this was making it flexible on the back-end so adding new networks is a breeze. I am considering options for https://comments.network/ future, since I would love for it to grow. Would you pay say 10-15$ for making it all open-source so you can install it on your own server?

Not in my case. I accept to sacrifice some features to keep my blog static. Maybe something on the client side that pulls comments from a public source will do. Maybe even just "email me if you have a comment and I'll include it here".

Wait so you'd rather not add https://comments.network/ dependency but also not host it yourself; how would you set it up then?

Also, would it be nice if Comments network integrated comments on their own when the thread is closed? So you can just comment on the site itself (once the network comments are closed it'd basically be an alternative to Disqus).

If I cared enough I would have used something with built-in comment support, or something like stevekemp posted in a sibling of the parent (aunt/uncle?). I'm not sure I want to do that, because it seems overly complicated for little value. Just having a way for somebody reach out if they really want to is enough for me.

I setup self-hosted commenting system for my static site:

https://github.com/skx/e-comments/

It could do with some more love, to add nested comments, but otherwise it might be of interest.

Author here, it's still an early alpha but I'd love to answer any questions that you have. I also have some questions for you if you are interested in the project:

- What are the features that you think are most exciting?

- Where would you use it? What kind of projects? I have some ideas of use-cases, but I'd love to hear yours.

Seems like a great idea! Just yesterday I created hn-comments[1], a collection of great comments made on HN. Can I embed a single comment as well? Edited for clarity.

[1] https://medium.com/hn-comments

There is a `sort` and a `limit` parameters so you might be able to work with these if it happens that the comment is in a specified place, but that's really hacky. Otherwise, I could think about adding filters such as:

    <comment-box hackernews="11850599" filter="id:3243534" class="border"></comment-box>

However arguably this is useful because you can show N comments and the UI is made around that.

You could also just hide everything else through CSS though:

https://jsfiddle.net/franciscop/fygps59v/2/

    comment-box .comment,
    comment-box .add {
      display: none;
    }

    comment-box #id-12898146 {
      display: block;
    }

So every comment has its own id?

In the back-end yes, and now in the front-end also (just pushed that update). They are identified in the list as:

    <li class="comment" id="id-6547567" class="ind-1">...</li>

See updated answer and jsfiddle above

Nice work!

How does the initial submission to the sites work? Am I missing something or is this currently a manual process? It would be cool if it submitted on the first comment.

N.B. If you auto add all your blog posts to HN you will get silently blocked from submitting (although it will still appear to work from your point of view). You will then need to, firstly notice this, then email the mods to get unblocked.

I've hit this myself, so now I just include a simple link to:

    javascript:window.location=%22https://news.ycombinator.com/submitlink?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)

You can see this at the bottom of all my posts on https://unop.uk and I've seen others do something similar.

I commented in another thread. TL;DR, I love your solution and will try to use AJAX/JS for it, but I'll contact HN first to see if it's okay with them.

Nice although I am sceptical.

I kind of enjoyed the current userbase.

Not sure I'd like anything that pushes HN far and wide.

I tend to agree and I say that with the full recognition of the hypocrisy of being a relatively new account. Cool idea though. I've thought about doing it with Reddit comments a few times over the years but I could only assume it's some kind of ToS violation.

More networks coming soon so you can actually show the comments where the appropriate audience is. I spent the last couple of days improving this so adding a new source is easy, and right now all the HN specific code stands on 130 lines (I am using 2 different sources for HN) and Reddit-specific code stands on 32 lines.

I wouldn't expect someone adding comments to a recipes blog, so they could add the appropriate source for the comments. Someone suggested Designer News, so I'll make the integration after the Product Hunt one.

I've read similar sentiments here for almost nine years - Hey, I like it here! And now that I'm here, I don't want it to change! But I don't think that's how healthy communities work.

I think when we use the word "embed", we should really "embed". In other words, for a given comment of id ID, it'd be better to get the table row of class 'athing' and id ID.

An important reason to embed is for visual authenticity. A Tweet is embedded with the styling that goes with it because it's recognizable. Similarly, I can see an HN comment with the styling and instantly know it's from HN.

Besides visual authenticity, another reason to embed is for functionality. You can interact with an embedded tweet. For an HN comment, this assumes the reader to have an HN account, which is not as likely as a user having a twitter account, but considering the audience this might be wrong. This is not the problem, though.. The problem is that an HN comment is not a Tweet. It is not a sound-bite and voting on a comment that was taken out of context (which can be a long thread) is simply stupid, or something only a stupid person would do.

The optimist would say: "someone with a Hacker News account isn't stupid enough to do that; they won't use the embedded comment for that". This makes embedding for functionality useless.

The pessimist would say: only stupid people would do that and there are really stupid people who actually would do that, so why include a functionality that only stupid people would use? This also makes embedding for functionality useless.

So I guess we're left with embedding for visual authenticity only. Or taking a screen shot of the element.

By embed I meant to embed the content; I've heard from quite a few people that they love that they can personalize it with simple CSS. I am not sure if this is a problem from me not being native (I'm Spanish) or just a special case/extreme use of the word embed. In both cases, embedding the functionality is not a possible due to common, sane web attack concerns; if I could allow you to change it then I could change it myself which would mean big trouble. What twitter does is keeping the control+developing their own code, an API/library that HN doesn't have available. And of course I'm now going down the road of asking for people's username/password of the different networks.

Also something has to be said about the advantages of thin clients/strong back-ends, which means standardizing the response from https://comments.network/ of the different networks.

>By embed I meant to embed the content; I've heard from quite a few people that they love that they can personalize it with simple CSS.

Well, then disregard what I said. What I wrote was the opinion from an end-user/page-reader perspective, not from the person who'll handle tweak the styling.

>I am not sure if this is a problem from me not being native (I'm Spanish)

I wouldn't be able to tell, not being native myself (I'm Algerian).

>What twitter does is keeping the control+developing their own code, an API/library that HN doesn't have available. And of course I'm now going down the road of asking for people's username/password of the different networks.

Pardon me, but have you looked at this https://github.com/HackerNews/API http://blog.ycombinator.com/hacker-news-api ? I'm sure you are aware Reddit has an API. Again, I'm sorry for failing to see what's the very particular problem to be solved, not being a developer and all.

They have APIs that other developers can use to build things, but not for embedding content into the pages itself (I haven't searched so much about Reddit but I have about HN). So basically these libraries are for pulling data, not for pulling functionality. In fact I am using one of them, Algolia on the back-end to pull the data. For truly embed it we'd need for HN to provide this functionality with some Javascript library/iframe/other, which they currently don't do.

Similar to this, except this one has Reddit comments as well : https://embedd.io/

And it works with url instead of story id by searching on HN or Reddit. Does it overwhelm browser by searching url like that?

- comments.network seems to use internal api[1]

- embedd.io directly request HN and Reddit

1: https://comments.network/api/

I see they are using Algolia to do the requests (at least for HN) on the front-end. Unfortunately it is limited, as you cannot get from there whether the current thread is opened for comments or whether the comments are opened for reply. That's why I'm parsing Algolia AND HN's website for each of the comments, to mix the data. Also it makes it easier doing the work on the back-end to add new services and not depending on a 3rd party. See the changelog on the bottom of https://comments.network/ to see those bugs fixed really recently.

I understand, but comments.network js snippet will stop working if you stop your server (comments.network/api), which is a 3rd-party service. Am I right?

Right now (alpha) yes, but I'm exploring other options for its future. Do you have any idea? I want to avoid fragmentation initially so open-source right now is not viable as I cannot support many different pre-releases from different users, but I've definitely considering open-sourcing it in the future ( see http://github.com/franciscop/ ).

For the sake of it I will point out that the alternative, is actually two different third-parties dependencies, http://embedd.io/ snippet and https://hn.algolia.com/ service (;

Since HackerNews itself use algolia, I think its safe to use it. And embedd can easily switch to official HN api.

I just saw that network.comments use internal api too for Reddit while it have a clean json API. I think it could be nicer for network.comments to be more transparent and to not depend on third party like network.comments internal api. In order to prevent servers maintenance and to give more privacy.

Imagine tomorrow, network.comments seduce every hackers on the world and have more than 100k blog are requesting network.comments/api server. You'll ask guys to install their own instance which is not your first goal to avoid installing stuff.

https://comments.network/ allows Reddit comments as well, but I just titled it accordingly to this page (:

And there are a few self-hosted "external comment" systems out there, including my own simple one:

https://github.com/skx/e-comments/

I will be checking it and the alternatives for the server-side if I decide to also include an in-page comment system, thanks.

But you probably shouldn't boast about the size "as simple as including a 5k Javascript file" when you have a dependency/require jQuery for your project to work on the client side (which is also not disclosed as it's only in an example, which could mean it's only for that example but checking the source it's an actual dependency)...

I'll rework the text to make it more explicit, and less boasty, but that really wasn't my intention.

I'm gonna be overhauling it over the next few weeks to support nested comments, and can almost certainly drop jQuery at that time too.

Oh, I've been waiting for something like this!

This seems to work very well combined with static site generators like Jekyll and Hugo, because you don't need any kind of server-logic and database.

The only other option I knew was Disqus, which in my opinion is a total train wreck on mobile (Messages not loading, clunky interface, awful branding).

I think you need to know the HN post ID.

Yes, right now I'm in a bit of a stalemate with that since you'll need first to submit it to the networks and then to manually add the id. It's not a priority right now, but would you be interested on it submitting the page/post when you publish the page? Say add a button that says "Submit to Hacker News" and when clicked it gets automatically sent there (if technically/legally possible).

Awesome, you should also charge a nominal amount for the same service but without branding.

I thought about it but I remember reading https://www.groovehq.com/blog/increasing-traffic-to-our-site (point 8) and other places that the benefits/disadvantages don' check out to remove it. I'm considering putting that on the bottom though. How much would you pay (for a lifetime) of removing it though? 10-50$?

Something around $20/year sounds about right to me. I'd prefer a subscription model to be honest, seems more sustainable and I don't want the service to be gone in a year.

I really like the idea and also how it looks, but the main reason I balk at using something like Disqus is that I hate having to pull in javascript from domains and servers I don't control on personal sites.

I think there is a large market for an open-source library that you can just drop in that functions exactly like this... particularly if you can manage to get it to run entirely client-side.

Shameless plug: Chrome extension that shows HN comments for a visited page:

https://chrome.google.com/webstore/detail/hacker-news-sideba...

(it sends all visited urls to hn.algolia.com though, to find the discussion - beware)

Meta-meta; almost every time that I get something to the front page some shameless plugs appear; real question, how do you do it? Do you just browse HN and happen to see it or have a notification somehow set up? I would be really interested on seeing/getting notifications related to my projects (not just for shameless plugs, I've given tips that I think are useful for someone starting something similar as I did).

reading GP's comment history (https://news.ycombinator.com/threads?id=tomaskafka) I'm not seeing any comments other than this one with the text "shameless plug" (though I didn't look back very far).

Also, to answer your question, a quick googling turned up https://www.hnwatcher.com -- dunno if it's any good though.

Oh I didn't mean by him, I mean by a different person (probably) each time.

Ahh, okay. That sounds like evidence for the "randomly happen to see" hypothesis then.

Personally, I've shamelessly plugged a few FOSS projects of mine on HN (to varying degrees of success.) It happens very rarely, over the course of years, and when I randomly stumble across something interesting. Although I only read stuff on HN once or twice a day typically, I "check" HN several times a day, scanning the frontpage in seconds to see if there's anything that interests me. If it's something relevant to a project I'm working on, and people seem interested, I might plug my project.

I've thought of setting up an alert for "opportunities to post a shameless plug" but decided against it (mostly because it seems against the spirit of HN.)

<script src="https://comments.network/comments.js"></script>

No need (for me). Recipe to roll your own comments for your DIY blog:

- write your own templates, content and engine

- crack out your python/alt-language and download the HN News API https://github.com/HackerNews/API for favs/stories posted

- find your firebase json repository https://hacker-news.firebaseio.com/v0/user/bootload.json?pri...

- download json posts by id. For example ^this post^ cf: https://hacker-news.firebaseio.com/v0/item/12904458.json?pri...

- parse and roll into your blog.

Wasn't that hard was it?

Not sure if serious or sarcastic. In case it's serious, you forgot:

- Parse Hacker News from multiple sources because no one of them gives you all the information and correlate the info on each.

- Add Reddit, Product Hunt, etc. Probably make it so that it's easy to implement on the back-end. Oh yeah you'll need a back-end because of the previous point.

- Make some cache mechanism according to their robots.txt.

- Optimize the assets.

- Test it in different browsers + smartphones.

Then that'd be rough outline of what I did (or plan on doing), so why repeat all the work when you just want a simple comment thread and not develop/maintain/host the solution yourself?

PS, if you want to do it for learning, please go for it! You'll learn a lot for sure and if you contact me I can give you some tips.

This looks really nice. Thanks for not forcing us to stick to yellow/orange colors etc.

shameless plug 2 (I saw another shameless plug)...

I created hackernews.club

https://hackernews.club

Which shows posts and comments of any HN user.

You can also create a HN profile widget you can embed anywhere. Here's mine.

https://hackernews.club/hacker/profile/sideproject

Love these types of HN tools though!

I am sorry but:

1. Other people doing something wrong is no justification at all, even though it's a human bias.

2. Other shameless plug was about a comment network for the front-end and back-end which includes HN, so it was not really shameless but an interesting and highly related project.

This is just a random ad from something related to HN but has no kind of relationship with the original post... so please don't SPAM on HN.

Reply on news.ycombinator.com