Say hello to Schnack.js: A new Disqus-like commenting drop-in for static websites

tl;dr: Schnack.js is an awesome, ad-free, open source Disqus clone that comes with a very minimal, hackable code base.

# How to embed Schnack.js

It works pretty much like other drop-in commenting systems. You drop a script tag under your blog posts, pass a few parameters and Schnack is doing the rest for you.

1
2
3
4
5
<div class="comments-go-here"></div>
<script type="text/javascript"
src="https://schnack.youdomain.com/embed.js"
data-schnack-target=".comments-go-here"
data-schnack-slug="my-blogpost-slug"></script>

Thanks to the wonders of modern science the embed.js comes at 2KB gzipped and minified. Your site has full control of the styling of the comments.

# How Schnack is protecting against spam

Schnack asks comment authors to sign in via Twitter or Github[1]. New comments need to be approved by the site owner before they show up. To save you some work you can also “trust” comment authors, in which case their comments are being approved automatically.

# How to install Schnack on your server

Schnack is a Node app and uses a SQLite database to store the comments. So all you really need to do is to clone the repo, run npm install and start the app.

To hook up the authentication you need to go to apps.twitter.com, create a new app and copy the api keys over to your config file.

Schnack needs to run on a subdomain of the domain your blog is running on, mainly because that’s what cookie authentication is limited to[2].

# Why did we decide to work on Schnack?

Ok, here’s a little backstory:

Last week I replaced my old Wordpress blog with a static Hexo website. Hexo gave me everything I wanted, except for one thing: I missed the comment box below my posts.

So I scouted out my options. Disqus was my first consideration, but I was put off by the ads that come with the free “Basic” plan, aside from privacy considerations.

Then I thought there must be an app for this, but when I didn’t find one that fit my needs (see next section) I decided it’s time to do some hacking[3]!

The next step was to put up a readme on Github, just to keep notes of what this app might look like and how it should be organized. My curious friends over at Webkid found the readme while Github-lurking on my repositories and that’s how we got started!

# Prior art

Of course, Schnack is not the first of its kind. There are several open source alternatives that I could’ve used but I decided not to.

The new flag ship amonst open source commenting systems comes from a well-funded Mozilla-project named Coral Project in collaboration with the Washington Post and New York Times. They have recently launched their comment software Talk which is now in use on washingtonpost.com.

But after looking into Talk’s code base I felt it was just way too complex for what I needed.

There also a few other open source commenting tools:

  • Discourse - looks pretty complex as well, and is written in Ruby on Rails which I refuse to even look at
  • Commento - looks clean and simple, but it’s written in Go, which is too fancy for me
  • Isso - I only saw this halfway through the coding. Looks actually very similar to Schnack, except it’s written in Python and doesn’t have third-party site authentication (but allows anonymous commenting).

But I wanted something for Node and haven’t found it so far. Let me know in the comments below if I missed another project!

# What’s up with that weird name?

For non-Germans out there: It’s called Schnack, not snack, and it has nothing to do with receiving sexual favors.

Schnack is simply a nice northern-German word for chatter that wasn’t already taken by other projects.

# Can I try Schnack now?

Yes, just leave a comment under this blog post!

# Standing on the shoulders of giants

It wouldn’t be possible to write an app like this in a few days without the amazing libraries it was built upon:

  • Thanks to Rich Harris for Rollup and Bublé, which we’re using to compile the super tiny Schnack comment renderer
  • Thanks to Jason Miller for unfetch - the “500 bytes” fetch polyfil we’re using for embed-Schnack communication
  • Thanks to Jared Hanson for making PassportJS, which we’re using to deal with Twitter and Facebook authentication
  • Also thanks to all the other open source contributors in the Node community. It’s been a lot of fun hacking Schnack.js together, mainly because of you!

# It’s 2017, are people still leaving comments under blog posts?

Well, you tell me!

But reading through some of my older blog posts reminded my that a good blog is never just a one-way broadcast. I couldn’t bring it over myself to dump all the comments, and I definitly don’t want to miss out on future discussions that may arise.

Fork on GitHub


  1. Other authentication provider like Facebook or Google can be added easily ↩︎

  2. We could've also used an iframe but I kind of didn't want to ↩︎

  3. Back when I made my first websites, almost all websites used to be static, hand-written HTML files, and you would write or download some CGI or PHP script to add a "guest book" to your page. This problem is basically how I learned programming. ↩︎

# Comments