แชร์วิธีการเพิ่ม Giscus Comment System ให้กับ Static Website

หากใครทำเว็บ JAM Stack ไม่ว่าจะเป็น Gatsby, Next.js หรือ Static Site อื่นๆ ก็คงต้องมองหา Comment System ให้กับเว็บไซต์ของเรา ไม่เหมือน Wordpress ที่มีระบบ Comment ติดมาด้วย

ซึ่งพอเป็น JAMStack ตัว Comment ที่นิยมกัน ก็คงหนีไม่พ้น Disqus ซึ่งเวอร์ชั่นฟรี เราก็สามารถใช้งาน เพียงแต่ ต้องยอมให้มีการโหลดโฆษณา หรือติด Ads link บางหน้าเว็บเรา (กรณียืนยอม)

ซึ่งผมรู้สึกว่า ผมไม่อยากให้มันโหลดโฆษณา ทำเว็บช้าด้วย ก็เลยมองหาตัวเลือกอื่นๆ หลายตัว Commento, Isso, Giscus, Remark42, utterances สุดท้ายจบที่การเลือก giscus นั่นเอง

Giscus คืออะไร?

Giscus เป็น Comment System ที่ใช้ Github Discussions เป็นตัวเก็บข้อมูล เวลาที่เราแสดงความคิดเห็น ก็เชื่อมกับ Github ส่วนหน้าเว็บเรา ก็ทำการ Embded ตัว Discussion มาแสดง นั่นเอง

ข้อดีคือ

• Open Source
• ไม่มีโฆษณากวนใจ ไม่โดน tracking
• ไม่ต้องใช้ Database ใดๆ ขอแค่มี github repo
• หรือถ้าอยากโฮสเอง ก็ทำได้เช่นกัน

วิธีการใช้งาน

สามารถเข้าไปกดเลือก ใช้งานหน้าเว็บ Giscus ได้เลย โดยเงื่อนไขที่เราต้องมีคือ 3 ข้อ

1. ตัว repository เราต้องเป็น Public
2. ต้องติดตั้งแอพ giscus (ตัวที่อยู่ใน marketplace)
3. เปิดใช้งาน Discusstions ที่อยู่ในส่วน Settings ของ repo เรา

Page <-> Discussions Mapping

เราสามารถเลือกได้ว่าจะให้ Embeded Comment เราทำการ Mapping ด้วยอะไร เช่น pathname หรือ URL หรือ title ของเว็บ ก็ได้

สรุป สิ่งที่ผมตั้งค่าคือ

1. สร้าง repository ขึ้นมาใหม่ เป็นแบบ Public
2. เปิดใช้งาน Discussions และก็ติดตั้งแอพ giscus
3. หน้า giscus ใส่ชื่อ repo เราลงไป format คือ username/reponame
4. Mapping เลือก pathname
5. Discussion Category เลือก Announcements
6. Theme เลือกแล้วแต่เรา light / dark หรือใครจะเลือก system ก็ตามสะดวก
7. ที่เหลือไม่ได้ปรับแก้

สุดท้าย เราก็จะได้ script หน้าตาประมาณนี้

1
<script
2
  src="https://giscus.app/client.js"
3
  data-repo="[ENTER REPO HERE]"
4
  data-repo-id="[ENTER REPO ID HERE]"
5
  data-category="[ENTER CATEGORY NAME HERE]"
6
  data-category-id="[ENTER CATEGORY ID HERE]"
7
  data-mapping="pathname"
8
  data-reactions-enabled="1"
9
  data-emit-metadata="0"
10
  data-theme="light"
11
  data-lang="en"
12
  crossorigin="anonymous"
13
  async
14
></script>

ก็แค่นำ script ไปใส่ในเว็บ ก็สามารถมี comment บนเว็บเราได้แล้ว

เวลาที่ User จะคอมเม้น ตัวแอพ giscus จะขอสิทธิ์ Permission ของเรานะครับ การใช้งานก็แค่มี user github ก็ใช้งานได้เลย

ทำเป็น React Component

เนื่องจากว่าเว็บไซต์ผมเขียนด้วย Gatsby ฉะนั้น ก็เลยอยากแปลงเป็น React Component เพื่อนำไปใช้งานง่ายๆ โดยสิ่งที่ต้องทำคือ เพิ่ม <script> นั่นเอง ใช้ DOM ธรรมดาได้เลย

1
const script = document.createElement('script')
2
    script.setAttribute('data-repo', '')
3
    script.setAttribute('data-repo-id', '')
4
    ...
5
    ...

จะได้ Component เหมือนโค๊ดด้านล่าง

1
import React, { useState, useEffect, useCallback } from 'react'
2

3
const GiscusComment = ({ mapping }) => {
4
  const [isShowComment, setIsShowComment] = useState(true)
5

6
  const COMMENTS_ID = 'comments-container'
7

8
  const config = {
9
    repo: '',
10
    repoId: '',
11
    category: '',
12
    categoryId: '',
13
    reactions: '1',
14
    metadata: '0',
15
    theme: ''
16
  }
17

18
  const fetchComments = useCallback(() => {
19
    setEnabledLoadComments(false)
20
    const script = document.createElement('script')
21
    script.src = 'https://giscus.app/client.js'
22
    script.setAttribute('data-repo', config.repo)
23
    script.setAttribute('data-repo-id', config.repoId)
24
    script.setAttribute('data-category', config.category)
25
    script.setAttribute('data-category-id', config.categoryId)
26
    script.setAttribute('data-mapping', mapping)
27
    script.setAttribute('data-reactions-enabled', config.reactions)
28
    script.setAttribute('data-emit-metadata', config.metadata)
29
    script.setAttribute('data-theme', config.theme)
30
    script.setAttribute('crossorigin', 'anonymous')
31
    script.setAttribute('data-lang', 'en')
32
    script.async = true
33

34
    const comments = document.getElementById(COMMENTS_ID)
35
    if (comments) comments.appendChild(script)
36

37
    return () => {
38
      const comments = document.getElementById(COMMENTS_ID)
39
      if (comments) comments.innerHTML = ''
40
    }
41
  }, [giscusTheme, mapping])
42

43
  // Reload on theme change
44
  useEffect(() => {
45
    const iframe = document.querySelector('iframe.giscus-frame')
46
    if (!iframe) return
47
    fetchComments()
48
  }, [fetchComments])
49

50
  return (
51
    <div>
52
      {enableLoadComments && <button onClick={fetchComments}>Load Comments</button>}
53
      <div className="giscus" id={COMMENTS_ID} />
54
    </div>
55
  )
56
}
57

58
export default GiscusComment

ทีนี้เวลาใช้งาน ก็แค่เรียก Component

1
import GiscusComment from './GiscusComment'
2

3
// pathname
4
<GiscusComment mapping={location.pathname} />
5

6
// url
7
<GiscusComment managing={location.href} />

ตัว React Component ผมนำโค๊ดมาจากที่นี่ครับ Tailwind Next.js Starter Blog

เป็นอันเรียบร้อย ลองใช้งานโดยการคอมเม้นด้านล่างดูได้ครับ :)