[HTML] 댓글 기능 추가하기 (11step)

2022. 5. 29. 16:36

11단계로 HTML 웹페이지에 댓글 기능 추가하는 방법

# 사전 준비

(Github page 사용하는 방법 링크 - 작성예정)

# 댓글 기능 추가하는 방법

1. DISQUS 홈페이지 접속 (https://disqus.com/)

2. 로그인 (회원가입 필요)

3. 메인 홈으로 돌아가 "GET STARTED" 클릭

4. 사이트 종류 선택
- "I want to install Disqus on my site" 선택

5. 웹사이트 이름 입력

6. 플랜 선택
- 스크롤을 내리면 "Basic" 플랜에 "Subscribe Now" 선택 (무료 플랜)

7. 플랫폼 선택
- 소스코드만 필요하므로 아래 그림과 같이 빨간 네모로 이동함.

8. 소스 코드 복사
- 7번 그림에서 나타난 빨간 네모를 클릭 시 다른 페이지를 이동함.
- 소스 코드 적용 방법 영상과 복사 가능한 소스 코드 제공함.
- 소스 코드 복사.

9. 소스 코드 붙여넣기
- 작성된 코드에 붙여넣기

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <h1><u>Example : Comment</u></h1>
    <h2>Result</h2>

    <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://manbedded.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>

10. 댓글 기능 실행 오류
- 오류 발생 : We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.
- 원인 : DISQUS 에서 코드로 작성된 웹페이지에 접속이 안됨. (로컬주소때문에 접속 안됨)
- 해결 : github 에서 page 생성하여 웹페이지에 접속할 수 있도록 함 (Github page 사용하는 방법 링크 - 작성예정)

11. github page를 이용하여 댓글 기능 사용
- proceed 클릭

# 결과

- DISQUS 에서 제공하는 댓글 기능 소스 코드를 이용하여 웹페이지에 적용함.
- 주의할 점은 HTML파일로 작성해서 웹페이지를 여는 경우 댓글 기능이 나타나지 않음. (10단계 참고)

감사합니다.

잘못된 정보나 오타 및 수정사항이 있을 경우 댓글로 달아주시면 감사하겠습니다.

'GUI > HTML & CSS' 카테고리의 다른 글

[HTML] 웹페이지 방문자 분석 기능 추가하기 (10step) (0)	2022.05.29
[HTML] 채팅 기능 추가하기 (10step) (0)	2022.05.29
[HTML] 동영상 삽입하기 (0)	2022.05.29
[Atom] Atom Editor 사용방법 및 조작키 (updating) (0)	2022.05.27
[HTML] 태그 모음 (0)	2022.05.19

Manbedded