Disqus - github 블로그에 댓글 기능 추가하기
봄이 오고 있네요~ 봄이 되면 따뜻해 지겠죠? 제 마음도 따뜻해 졌으면 합니다…… ㅎㅎㅎㅎㅎ 이번에는 disqus를 이용하여 저번에 만든 github의 jekyll 페이지에 댓글을 다는 기능을 추가해 봅니다. 아무래도 혼자 게시글을 올리는것보다 댓글을 주고 받으면 더욱 재미있는 블로그 운영이 가능하겠죠?ㅎㅎㅎ (티스토리에 댓글을 다는 방법도 이와 유사합니다~)
disqus를 적용하면 아래와 같이 블로그에서 댓글 달기 기능을 추가 할 수 있습니다~ 이미지로 댓글을 달수도 있습니다!!!
댓글을 달때 facebook, google, twitter, disqus 자체 계정을 이용할 수 있습니다. 웬만한 로그인 기능은 모두 가능합니다~ 서론이 길었죠 바로 시작합니다!!!!
disqus 기능을 추가하는 과정은 다음과 같이 3단계로 진행됩니다.
- Disqus 가입하기
- Disqus 설정하기
- Github와 연동
1. Disqus 가입하기
disqus 가입을 먼저 해야 서비스를 이용하겠죠? Disqus 홈페이지로 이동합니다.
위 그림에서 오른쪽 상단의 signup에서 회원가입을 합니다.
아래 그림에서 각자 원하는 계정을 이용하여 가입을 합니다.
아래와 같이 등록했던 메일로 가서 verify를 하면 가입 완료!!!
마음에 드는 주제 3개를 follow 해줍니다. 생각하지말고 아무거나 고릅니다. 그리고 continue~
2. Disqus 설정하기
아래 그림. 글쓴 당시 디카프리오 형님이 아카데미 시상식에서 남우주연상을 받은 내용이 올라오군요!!! ㅊㅋㅊㅋ 하면서 오른쪽 상단 톱니바퀴 모양을 눌러 settings에 들어갑니다.
아래 그림. settings에서 profile로 간 후 기본정보를 수정합니다. 여기서 중요한 것은 website에 자신의 github 블로그 주소를 넣는것입니다!! 나머지 정보도 재량껏 입력한 후 save
아래 그림. 이번에는 disqus에서 본인의 site를 만듭니다. 이것은 후에 자신의 universalcode를 입히기 위한 작업이 됩니다.
아래 그림. 기본 정보를 입력합니다. 특별히 조심히 입력해야할 항목은 없습니다. 입력후 next!!!
아래 그림. 중간에 간단한 설문조사를 진행한 후 아래와 같은 페이지가 나옵니다. 우리가 사용하려는 github 플랫폼이 없네요 그렇다면 Universal Code 클릭!!!
아래 그림. 1번에 해당하는 코드 내용을 붙여넣기 해야하는 데요 복사 금지로 되어 있습니다. 해결책은 물론 있습니다~
기존의 https://유저아이디.disqus.com/admin/settings/universalcode/ 주소가 아닌
https://유저아이디.disqus.com/admin/universalcode/ 으로 가면 복사가 가능합니다 ~:)
3. Github와 연동
아래 그림. 이제 자신의 github계정으로 로그인 합니다. 그리고 _layouts -> post.html에서 아까 복사한 disqus의 universalcode 를 붙여 넣습니다.
아래 그림. 코드 구분을 해주기 위해 아래와 같이 주석을 달아주고 그 사이에 universalcode를 추가 합니다.
자신의 github 블로그에 가서 각각의 post에 들어가면 댓글을 달수 있음을 확인합니다
성공!!!
perfectlyrandom님의 블로그에 가면 코드에 대한 자세한 설명이 나와 있습니다.