[HTML] 웹 페이지에 쉽게 댓글 기능을 추가해보자(Disqus)

🧑‍💻 Web/HTML

[HTML] 웹 페이지에 쉽게 댓글 기능을 추가해보자(Disqus)

Lennon 2022. 4. 6. 23:33

728x90

disqus는 서버까지 동원해서 어렵게 댓글 기능을 개발할 필요 없이 코드를 삽입하면 쉽게 댓글 기능을 개발할 수 있도록 나온 서비스이다.

한 번 쉽게 사용해보자!

Disqus – The #1 way to build your audience

Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.

disqus.com

우선 위 페이지에서 로그인 한다!

1. 아래 "I want to install Disqus on my site" 를 클릭한다.

2. 관련 정보를 입력한다.

3. plan은 밑에 Basic으로 설정한다!

4. 댓글 추가할 사항이 위에 있다면 그걸 클릭하고, 단순히 웹 html에 넣는 용도라면 아래

I don't see my platform listd .... 를 클릭한다.

5. 그러면 코드가 나올 것이다. 해당 코드를 복사하자!

6. 코드를 원하는 hmtl파일의 닫는 body태그 위에 붙여넣기 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Disqus</title>
  </head>
  <body>
    <h1 style="text-align: center; margin: 200px">Disqus Test!</h1>

    <div id="disqus_thread"></div>
    <script>
      /**
       *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
       *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
      /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
      (function () {
        // DON'T EDIT BELOW THIS LINE
        var d = document,
          s = d.createElement('script');
        s.src = 'https://my-site-자기주소.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      })();
    </script>
    <noscript
      >Please enable JavaScript to view the
      <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript
    >
  </body>
</html>

🔥 disqus는 서버가 있어야 동작된다. 만약 프로젝트를 배포하지 않았거나, 서버를 통해 여는 게 아니면 잘 동작되는 지 확인하기 위해 vscode에 Live Server를 설치해 확인해보록 하자.

7. 완성!

🔥 댓글을 남기면 서버에 저장되기 때문에 새로고침을 하든 뭘하든 데이터가 남아있다.

같은 스크립트를 다른 html파일에 사용하면 댓글은 독립적으로 구상된다.(👏🏻)

ex) index.html에 댓글 10개 있어도 다른 html에 동일한 disqus 스크립트를 넣으면 댓글 0개로 시작!

728x90