Jekyll comments using Google forms

On This Page

There are lots way you can implement comments in Jekyll site Discus. If you are using Github page there is lots of way you can implement like Giscus, Utterances . But they are either add supported or have to unnecessary login via github. Here comments via google form and Google Sheets can be used.

Why google form

Along with above advantages you can see and modarate comments in one excel which very handy and also get notification of new comments. Moreover you have the data in one place. Another reason may be googls reliable fast server.

How it works

You get comments via google form and Google Sheets helps to get comments of particular post by query for particular post url in post_url column.

Google Sheets API endpoint that retrieves data from a specific sheet in a Google Spreadsheet in CSV format.

  const sheetId = 'YOUR_GOOGLE_SHEET_ID';
  const apiKey = 'YOUR_GOOGLE_API_KEY';
  const postUrl = 'URL_OF_YOUR_POST';
  const query = `SELECT A, C, D, E WHERE B = '${postUrl}'`;
  const url = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tqx=out:csv&sheet=comments&tq=${encodeURIComponent(query)}&headers=0`;

Setup google form and sheet

Heres How you can create a google form and connect with Google Sheets Submit HTML form to Google Form

Add fields to your form as you need. If you want anything optional in your comment section make that unchecked in google form required option unless it may redirect to form page saying fill required field.

Connect the Form to Google Sheets

After creating your form, go to the "Responses" tab. Click on the Google Sheets icon to create a new sheet that will store the responses. Now that the Google Form and Sheets setup is complete, you can add the form to your site.

Add to site

Now you add the comments form to post pages

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeXElMhFkfRfFOMJIQgUJa0mi9lrNUExF04AN4BNsI3AsTpRw/formResponse" method="POST">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="entry.2024848077" required><br><br>
  
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="entry.1580993660" required><br><br>
  
  <label for="comment">Comment:</label><br>
  <textarea id="comment" name="entry.1065046570" rows="4" cols="50"></textarea><br><br>
  
  <label for="posturl">Post URL:</label><br>
  <input type="text" id="posturl" name="entry.839337160"><br><br>
  
  <button type="submit">Submit</button>
</form>

<div id="comments"></div>
<script>
    // Function to format the date and time from the data
    function formatDate(stringDate) {
        // Split the string into date and time parts
        const dateTimeParts = stringDate.split(' ');
        const datePart = dateTimeParts[0]; // Date part like "7/12/2024"
        let timePart = dateTimeParts[1]; // Time part like "23:32:54"
        // Parse hours, minutes, and seconds from the time part
        const [hours, minutes, seconds] = timePart.split(':');
        // Convert hours to 12-hour format and determine AM/PM
        let ampm = 'AM';
        let formattedHours = parseInt(hours, 10);
        if (formattedHours >= 12) {
            ampm = 'PM';
            if (formattedHours > 12) {
                formattedHours -= 12;
            }
        }
        if (formattedHours === 0) {
            formattedHours = 12; // 12 AM case
        }
        // Format time in HH:mm:ss AM/PM format
        timePart = `${formattedHours}:${minutes}:${seconds} ${ampm}`;
        // Return the formatted date and time
        return `${datePart} at ${timePart}`;
    }
    // Get the current page URL
    const thisPageUrl = window.location.href;
    // Encode the SQL statement to be used in the URL
    const sqlStatement = encodeURIComponent(`SELECT A, C, D, E, F WHERE B = '${thisPageUrl}'`);
    // Construct the URL for fetching the data
    const csvUrl = `https://docs.google.com/spreadsheets/d/1hVRP9tYl8f4bsBjJP52hv74DwZ2pYpatxaNMG2rNY_M/gviz/tq?tqx=out:csv&sheet=comments&tq=${sqlStatement}&headers=0`;
    // Fetch the data from the Google Sheets URL
    fetch(csvUrl)
        .then(response => response.text()) // Get the response text (data)
        .then(csvText => {
            // Split the data into rows and then into individual cells
            const rows = csvText.trim().split('\n').map(row => row.split(','));
            // Get the container element for the comments
            const commentsContainer = document.getElementById('comments');
            // Loop through each row of the data
            rows.forEach(row => {
                const date = formatDate(row[0]); // Format the date and time
                const name = row[1]; // Get the name
                const comment = row[2]; // Get the comment
                const email = row[4]; // Get the email
                // Create a new div element for the comment
                const commentDiv = document.createElement('div');
                // Set the inner HTML of the div element
                commentDiv.innerHTML = `<strong><a href="mailto:${email}">${name}</a></strong> <em>${date}</em>: <p>${comment}</p>`;
                // Append the div element to the comments container
                commentsContainer.appendChild(commentDiv);
            });
        })
        .catch(error => console.error('Error fetching data:', error)); // Handle any errors
</script>

With this setup, you can easily add and manage comments on your Jekyll site using Google Forms and Google Sheets.

Drop Your Email

Comments

Add a Comment

© 2023-24 Mrinal Chandra Sarkar.