
Show HN: Embed HN comments in your website - franciscop
https://comments.network/
======
bambax
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...](http://stackoverflow.com/questions/23961178/do-custom-elements-
require-a-close-tag)

~~~
franciscop
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/](https://jsfiddle.net/franciscop/eo5v6ghc/)

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

~~~
franciscop
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...](https://medium.com/@fpresencia/leveraging-modern-
apis-a13fa6d28f1a)

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

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

~~~
franciscop
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/](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.

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

~~~
franciscop
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!

------
jsingleton
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](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>

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

~~~
jsingleton
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](https://news.ycombinator.com/bookmarklet.html)

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

~~~
franciscop
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/](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?

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

~~~
franciscop
Wait so you'd rather not add
[https://comments.network/](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).

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

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

~~~
jsingleton
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](https://unop.uk) and I've seen others do something similar.

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

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

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

~~~
franciscop
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/](https://comments.network/) of the different
networks.

~~~
Jugurtha
> _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](https://github.com/HackerNews/API)
[http://blog.ycombinator.com/hacker-news-
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.

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

------
speps
Similar to this, except this one has Reddit comments as well :
[https://embedd.io/](https://embedd.io/)

~~~
Socketubs
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/](https://comments.network/api/)

~~~
franciscop
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/](https://comments.network/) to see
those bugs fixed really recently.

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

~~~
franciscop
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/](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/](http://embedd.io/)
snippet and [https://hn.algolia.com/](https://hn.algolia.com/) service (;

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

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

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

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

~~~
franciscop
I thought about it but I remember reading
[https://www.groovehq.com/blog/increasing-traffic-to-our-
site](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$?

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

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

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

[https://chrome.google.com/webstore/detail/hacker-news-
sideba...](https://chrome.google.com/webstore/detail/hacker-news-
sidebar%20%20/lhaapeacjhibkidjlohijakoflalfhdf)

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

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

~~~
dlss
reading GP's comment history
([https://news.ycombinator.com/threads?id=tomaskafka](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](https://www.hnwatcher.com) \-- dunno if it's any
good though.

~~~
franciscop
Oh I didn't mean _by him_ , I mean by a different person (probably) each time.

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

------
bootload
_< script
src="[https://comments.network/comments.js"></script>](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](https://github.com/HackerNews/API) for
favs/stories posted

\- find your firebase json repository [https://hacker-
news.firebaseio.com/v0/user/bootload.json?pri...](https://hacker-
news.firebaseio.com/v0/user/bootload.json?print=pretty)

\- download json posts by id. For example ^this post^ cf: [https://hacker-
news.firebaseio.com/v0/item/12904458.json?pri...](https://hacker-
news.firebaseio.com/v0/item/12904458.json?print=pretty)

\- parse and roll into your blog.

Wasn't that hard was it?

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

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

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

I created hackernews.club

[https://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](https://hackernews.club/hacker/profile/sideproject)

Love these types of HN tools though!

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

