Show HN: Embed HN comments in your website

by franciscop • 10 years ago

137 73 10 years ago

franciscop25• 10 years ago

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.

capex2• 10 years ago

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

franciscop25• 10 years ago

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

jsingleton3• 10 years ago

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.

franciscop25• 10 years ago

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.

speps• 10 years ago

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

Socketubs3• 10 years ago

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/

franciscop25• 10 years ago

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.

franciscop25• 10 years ago

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

stevekemp3• 10 years ago

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

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

franciscop25• 10 years ago

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

reitanqild• 10 years ago

Nice although I am sceptical.

I kind of enjoyed the current userbase.

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

brazzledazzle• 10 years ago

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.

franciscop25• 10 years ago

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.

scott_s• 10 years ago

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.

davej2• 10 years ago

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

franciscop25• 10 years ago

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

davej2• 10 years ago

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.

jsingleton3• 10 years ago

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>

franciscop25• 10 years ago

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

jsingleton3• 10 years ago

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

zubspace• 10 years ago

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

sleepychu• 10 years ago

I think you need to know the HN post ID.

franciscop25• 10 years ago

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

bambax5• 10 years ago

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

jffry• 10 years ago

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

bambax5• 10 years ago

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

Navarr• 10 years ago

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

franciscop25• 10 years ago

Not future, you can already do it:

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

andrewstuart2• 10 years ago

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

bambax5• 10 years ago

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

franciscop25• 10 years ago

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/

bambax5• 10 years ago

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

bambax5• 10 years ago

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

phunehehe03• 10 years ago

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.

franciscop25• 10 years ago

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?

phunehehe03• 10 years ago

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

kinofcain2• 10 years ago

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.

sdegutis• 10 years ago

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.

kinofcain2• 10 years ago

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.

forgetsusername• 10 years ago

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.

n72• 10 years ago

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.

whiddershins2• 10 years ago

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.

tomaskafka• 10 years ago

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)

franciscop25• 10 years ago

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

dlss2• 10 years ago

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.

owenversteeg• 10 years ago

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

Jugurtha2• 10 years ago

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.

franciscop25• 10 years ago

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.

Jugurtha2• 10 years ago

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.

wkoszek• 10 years ago

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

sideproject• 10 years ago

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!

franciscop25• 10 years ago

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.

bootload• 10 years ago

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

franciscop25• 10 years ago

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.

jszymborski• 10 years ago

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.

Show HN: Embed HN comments in your website

Related Stories