Show HN: Embed HN comments in your website(comments.network)

137 pointsby franciscop10 anni fa74 comments

Show HN: Embed HN comments in your website

https://comments.network/

81 comments

bambax10 anni fa

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...

franciscop10 anni fa

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/

bambax10 anni fa

> 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).

bambax10 anni fa

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...

franciscop10 anni fa

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...

jffry10 anni fa

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...

bambax10 anni fa

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).

andrewstuart210 anni fa

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).

bambax10 anni fa

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! ;-)

Navarr10 anni fa

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

franciscop10 anni fa

Not future, you can already do it:

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

kinofcain10 anni fa

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.

whiddershins10 anni fa

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.

forgetsusername10 anni fa

>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.

sdegutis10 anni fa

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.

kinofcain10 anni fa

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.

franciscop10 anni fa

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.

whiddershins10 anni fa

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?

franciscop10 anni fa

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!

Terretta10 anni fa

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

Happen here. In context. In the community.

n7210 anni fa

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.

[deleted]10 anni fa

jsingleton10 anni fa

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>

franciscop10 anni fa

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).

jsingleton10 anni fa

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

phunehehe010 anni fa

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.

franciscop10 anni fa

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?

phunehehe010 anni fa

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".

franciscop10 anni fa

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).

phunehehe010 anni fa

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.

stevekemp10 anni fa

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.

franciscop10 anni fa

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.

jsingleton10 anni fa

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.

franciscop10 anni fa

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.

capex10 anni fa

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

franciscop10 anni fa

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;
    }

capex10 anni fa

So every comment has its own id?

franciscop10 anni fa

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

reitanqild10 anni fa

Nice although I am sceptical.

I kind of enjoyed the current userbase.

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

scott_s10 anni fa

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.

franciscop10 anni fa

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.

brazzledazzle10 anni fa

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.

return010 anni fa

(1)

Jugurtha10 anni fa

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.

franciscop10 anni fa

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.

Jugurtha10 anni fa

>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.

franciscop10 anni fa

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.

speps10 anni fa

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

franciscop10 anni fa

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

Socketubs10 anni fa

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/

franciscop10 anni fa

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.

Socketubs10 anni fa

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?

franciscop10 anni fa

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 (;

Socketubs10 anni fa

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.

stevekemp10 anni fa

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

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

franciscop10 anni fa

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)...

stevekemp10 anni fa

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.

zubspace10 anni fa

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).

franciscop10 anni fa

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).

sleepychu10 anni fa

I think you need to know the HN post ID.

davej10 anni fa

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

franciscop10 anni fa

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$?

davej10 anni fa

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.

jszymborski10 anni fa

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.

tomaskafka10 anni fa

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)

franciscop10 anni fa

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).

owenversteeg10 anni fa

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.)

dlss10 anni fa

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.

franciscop10 anni fa

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

dlss10 anni fa

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

bootload10 anni fa

<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?

franciscop10 anni fa

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.

wkoszek10 anni fa

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

[deleted]10 anni fa

sideproject10 anni fa

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!

franciscop10 anni fa

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.

lorddigital110 anni fa