Firebase Setup Guide for Blog Comments and Likes

This guide will help you set up Firebase Realtime Database to enable global likes and comments for all visitors to your blog.

Quick Overview

Your blog now includes Firebase integration that:

Step 1: Create Firebase Project

  1. Go to Firebase Console
  2. Click “Create a project” or “Add project”
  3. Enter project name (e.g., “my-blog-comments”)
  4. Disable Google Analytics (not needed) and click “Create project”
  5. Wait for project creation and click “Continue”

Step 2: Set Up Realtime Database

  1. In your Firebase project console, click “Realtime Database” in the left sidebar
  2. Click “Create Database”
  3. Choose your database location (pick closest to your audience)
  4. Select “Start in test mode” - we’ll secure it in Step 4
  5. Click “Enable”

Step 3: Get Your Database URL

  1. In the Realtime Database page, you’ll see your database URL at the top
  2. It looks like: https://YOUR-PROJECT-ID-default-rtdb.firebaseio.com/
  3. Copy this entire URL - you’ll need it for Step 5

Step 4: Configure Security Rules

Important: These rules prevent spam while allowing legitimate usage.

  1. Click the “Rules” tab in your Realtime Database
  2. Replace all existing rules with:
{
  "rules": {
    "likes": {
      ".read": true,
      ".write": true,
      "$postId": {
        "count": {
          ".validate": "newData.isNumber() && newData.val() >= 0 && newData.val() <= 99999"
        },
        "$other": {
          ".validate": false
        }
      }
    },
    "comments": {
      ".read": true,
      ".write": true,
      ".indexOn": "timestamp",
      "$postId": {
        ".validate": "newData.hasChildren() && newData.numChildren() <= 50",
        "$commentId": {
          "name": {
            ".validate": "newData.isString() && newData.val().length > 0 && newData.val().length <= 50"
          },
          "text": {
            ".validate": "newData.isString() && newData.val().length > 0 && newData.val().length <= 500"
          },
          "date": {
            ".validate": "newData.isString() && newData.val().length <= 50"
          },
          "timestamp": {
            ".validate": "newData.isNumber() && newData.val() <= now"
          },
          "$other": {
            ".validate": false
          }
        }
      }
    },
    "$other": {
      ".read": false,
      ".write": false
    }
  }
}
  1. Click “Publish” to save the rules

Step 5: Update Your Blog Configuration

  1. Open _layouts/post.html in your Jekyll site
  2. Find this line (around line 964): 
    databaseURL: 'https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com/'
  3. Replace YOUR_PROJECT_ID with your actual project ID from Step 3
  4. Example: If your URL is https://my-blog-abc123-default-rtdb.firebaseio.com/, then update to: 
    databaseURL: 'https://my-blog-abc123-default-rtdb.firebaseio.com/'

Step 6: Test Your Setup

  1. Build your Jekyll site: 
    bundle exec jekyll build && bundle exec jekyll serve

  2. Visit a blog post and open browser dev tools (F12 → Console tab)

  3. Look for these success messages: 
    ✓ DOM loaded, initializing like and comments system
✓ Loading global data...
✓ Attempting to load from Firebase...
✓ Loaded from Firebase: {...}
✓ System ready with Firebase integration!
  4. Test functionality:
  5. Check Firebase Console:

Step 7: Deploy

  1. Commit your changes: 
    git add _layouts/post.html
git commit -m "Configure Firebase for global likes and comments"
git push

  2. Deploy to your hosting platform (GitHub Pages, Netlify, Vercel, etc.)

  3. Test on the live site to ensure it works in production

Troubleshooting

❌ “Firebase not configured, using localStorage fallback”

Solution: Check that you replaced YOUR_PROJECT_ID with your actual project ID from Firebase.

❌ “Firebase load failed, using localStorage”

Possible causes:

❌ Data not saving to Firebase

Check:

  1. Browser console for error messages
  2. Firebase Console → Database → Rules are published
  3. Database URL is exactly as shown in Firebase Console

❌ Comments/likes not visible

Check:

  1. Browser console for JavaScript errors
  2. Page has like-button, like-count, and comment form elements
  3. Try hard refresh (Ctrl+F5 or Cmd+Shift+R)

Security & Features

🔒 Built-in Security:

🌟 Features:

🎛️ Customization Options:

To modify limits, edit these values in _layouts/post.html:

Cost & Usage

Firebase Realtime Database free tier includes:

For a personal blog, this is typically more than sufficient. You can monitor usage in Firebase Console → Usage tab.

🎉 You’re Done!

Your blog now has global likes and comments that work across all devices and browsers. Visitors can interact with your content, and their engagement will be visible to everyone.

Next steps you might consider: