Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Embed Hacker News comment tree automatically

Resources

License

Releases

No releases published

Packages

No packages published