Commenting system for static websites using Firebase Realtime Database.
Fire Comments JS is a server-less, PHP-less, SQL-less and Disqus-less way to add a commenting system to your static web pages. Some notable features are:
- The biggest feature is the ability to reply to existing comments.
- Uses Gravatar to show profile pictures.
- Counts the number of comments.
- Converts links to
rel="nofollow"
and addstarget="_blank" rel="noopener"
automatically. - Prevents harmful XSS code to be rendered.
- You have full control over your data. Unlike any 3rd-party company such as Disqus.
Use this markup in your .html
file:
<div class="comments">
<!-- Title, with comment count -->
<h2><span id="comments-count"></span> Comments</h2>
<!-- Display comments here -->
<ul id="comments-list"></ul>
<!-- Reference to return comment form after this span, when the reply form is cancelled -->
<span id="comment-container"></span>
<!-- Comment form -->
<form id="comment" style="display:block;">
<h3 id="comment-form-title">Leave a comment</h3>
<textarea id="message" type="text" placeholder="Comment (HTML supported)" required></textarea>
<input id="name" type="text" placeholder="Name" required>
<input id="email" type="email" placeholder="Email" required>
<button class="btn" type="submit" name="action">Post Comment</button>
</form>
<!-- Reply form -->
<form id="reply" style="display:none;">
<h3 id="reply-form-title"></h3>
<div id="cancel-reply"><a href="#!" class="cancel-reply-link">Cancel Reply</a></div>
<textarea id="message" type="text" placeholder="Comment (HTML supported)" required></textarea>
<input id="name" type="text" placeholder="Name" required>
<input id="email" type="email" placeholder="Email" required>
<button class="btn" type="submit" name="action">Post Comment</button>
</form>
</div>
Fire Comments JS has four dependencies. Feel free to use their CDN links if you want.
- MD5 converts the email strings to MD5 hash, which is later used to display Gravatar profile pictures.
- Comment submission time is stored in Firebase using
firebase.database.ServerValue.TIMESTAMP
in the Unix format. Timeago converts the Unix format into human readable format. - XSS-Filters is used to prevent harmful XSS attacks. For now, XSS code can be submitted to the database, but will later be filtered when rendered.
- Firebase. Of course.
IMPORTANT: Use your own Firebase credentials. Create a new Firebase project if you haven't yet, go to your project overview and click "Add Firebase to your web app." Paste the code here.
<script src="js/md5.js"></script>
<script src="js/timeago.js"></script>
<script src="js/xss-filters.js"></script>
<!-- Paste your Firebase code here !>
Download the fire-comments.min.js
from here and include this in the end.
<script src="fire-comments.min.js"></script>
Submitting the comments will show a "Permissions denied" error because the default rules of Realtime Databse are restricted to Auth only. For testing purposes only, set the .read
and .write
rules to true
.
{
"rules": {
".read": true,
".write": true
}
}
Once you're done testing, you must change the .write
permissions to false
and add a $slug
rule to allow comment submissions.
{
"rules": {
".read": true,
".write": false,
"$slug": {
".write": "!data.exists()",
"$message": {
".write": "!data.exists() && newData.exists()"
}
}
}
}
Submit some comments and check your Firebase Realtime Database path.
It should look something like this [project-name]/comments/[path]/[key]
Fire Comments JS is licensed under the MIT license.