Skip to content
Embed Hacker News comment tree automatically
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit e40934e Jun 9, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src filter for the top root comment where parent_id == null Jun 5, 2017
test Initial Commit May 29, 2017
.babelrc Initial Commit May 29, 2017
.editorconfig Initial Commit May 29, 2017
.eslintrc cleaning up code May 30, 2017
.gitignore Initial Commit May 29, 2017
.travis.yml Initial Commit May 29, 2017
LICENSE Initial commit May 29, 2017
README.md Create README.md Jun 9, 2017
_config.yml Set theme jekyll-theme-slate May 30, 2017
netlify.toml Initial Commit May 29, 2017
package.json basic model May 30, 2017
webpack.config.babel.js Initial Commit May 29, 2017

README.md

embeddable-hn

Embed Hacker News comment tree automatically on your website. Built with Preact.

Sites using this plugin

If you want your site featured here, submit a pull request.

How it works

There is always better discussion on HN than in your Disqus comment box. Instead of a link to HN, you can embed it on your page.

Benefits:

  1. Value-add your readers from other sources.

  2. Boost site ranking and SEO. (GoogleBot executes JavaScript).

  3. Keep discussion on your page.

  4. Alternatively, checkout txtpen for highlights and inline comments.

This tool queries from hn.algolia.com/api so the response time is around ~10ms. It won't slow your page down.

Basic Usage

  1. Embed the javascript file.

    a. Put these lines at the top of page before </head>

    <link rel="preload" href="https://txtpen.codes/txtpen-hn-embed.min.js" as="script">
    <link href="https://txtpen.codes/txtpen-hn-embed.min.css" rel="stylesheet">
    

    b. Put this after </body> tag

    <script src="https://txtpen.codes/txtpen-hn-embed.min.js"></script>
    
  2. Add HTML tag to embed comment tree.

<txtpen-hn-comment> </txtpen-hn-comment>
  1. That's it.

  2. Optional: if you want to specify the Story ID, add a meta tag similar to the one below. Otherwise it will query the url and link the corresponding HN comments automatically.

<meta property="hacker-news" content="{PUT_YOUR_STORY_ID_HERE}">

Development

git clone https://github.com/txtpen/hn.git
cd hn
npm install
npm run dev
# Production build:
# npm run build
You can’t perform that action at this time.