This walkthrough goes over different ways that you can add comments to your Write.as blog. These commenting options are mostly free & open source and, at most, are on a pay what you want subscription model.
The walkthrough will be updated with more details and methods as they come along. Feel free to leave questions, feedback, and suggestions about other ways to implement comments into Write.as - we’d love to hear them!
Commento
Commento is an awesome open source commenting platform. It is a subscription based on a pay what you want model. After setting up your account, adding Commento to your blog is just a matter of adding some code to the Custom JavaScript of your blog settings:
// src: https://cdn.commento.io/js/commento.js
var topP = document.createElement("p");
topP.innerHTML = '<div id="commento"></div>';
var cont = document.getElementById("wrapper");
cont = document.getElementById("post-body");
if (cont !== null) {
cont.appendChild(topP);
}
Commento allows for people to comment anonymously or with accounts. Big thanks to @Aris for bringing Commento up in a previous form post and @yungleary for helping us work our way to a stable implementation of the Commento embed:
Utterances
Utterances is an open source comment widget that is powered by Github. You need a Github account in order to get started. All you need to do is the following:
- Create a repo for your comments.
- Install Utterances Github app (make the app apply to the commenting repo or across all your repos)
- Add the following code to the Custom JavaScript of your blog settings, changing the :“user/repo” to fit your Github account and comment repo. Learn more about the other attributes here:
var comments = document.createElement("script");
comments.src = 'https://utteranc.es/client.js';
comments.async = true;
comments.crossOrigin = 'anonymous';
comments.setAttribute('repo', 'user/repo');
comments.setAttribute('issue-term', 'pathname');
comments.setAttribute('label', 'write.as');
comments.setAttribute('theme', 'github-light');
document.getElementById('post-body').appendChild(comments);
NOTE - comments can only be created by people that have a Github account. They will be prompted to log in and, once authenticated, they can comment on any of your blog posts. This is great for development focused blogs where the audience most likely has a Github account. Here is an example of Utterances in action. Big thanks to Robert Xu for showing us this!
Hypothesis
Hypothesis is an open source annotation tool that allows for sentence-level comments and highlights across the web. You can set up Hypothesis on your blog to resemble Medium-like highlights and in-line comments on your blog. All you need is a Hypothesis account (it’s free and you get to annotate across the entire web as an extra benefit). Once you’re set up, add the following code to the Custom JavaScript of your blog settings:
// src: https://hypothes.is/embed.js
window.hypothesisConfig = function () {
return {
"openSidebar": false,
"theme": "clean",
branding: {
appBackgroundColor: 'white',
ctaBackgroundColor: 'rgba(3, 11, 16, 1)',
ctaTextColor: '#eee',
selectionFontFamily: 'helvetica, arial, sans serif'
}
};
};
This will allow people to highlight and comment on parts of your blog posts as Hypothesis annotations. The commented sentences will turn up as highlighted, allowing for people to see the specific comments.
NOTE - comments can only be done by people with Hypothesis accounts. Again, it’s free and allows you to annotate across the web, not just the one post.
Check out my blog to see Hypothesis in action as a commenting system for a Write.as blog. Past users have implemented it too, including @mikka, so thinks to him for having tried it out: