[ 일상? ] 티스토리 댓글 - DISQUS 연동하기

이번 포스팅은 티스토리 기본 댓글 기능 대신 DISQUS를 연동하는 방법에 대해서 설명하려고 합니다.

 

예전에 제 블로그 댓글에 이것저것 기능을 추가하려다가 완성되지 못한 상태로 가만히 놔두고 있었습니다.

그러다가 친한 형이 제 블로그에 댓글이 안달린다고 제보를 해주셨습니다.

(친한 형의 블로그 방문하기)

 

이 기회에 예전부터 하려고 했던 "Disqus 댓글을 연동하자!" 라고 마음을 먹었습니다 ! 

 

1. Disqus GET STARTED

우선 https://disqus.com/ 이 곳에 들어가면 아래의 [이미지 1] 과 같은 문구가 보일건데요. 저기서 "GET STARTED" 버튼을 클릭해줍니다! 

 

[이미지 1] - GET STARTED

 

버튼을 클릭하신 후 아래의 화면이 보일겁니다. 여기서 "I want to comment on sites" 를 눌러주시면 됩니다.

만약에 Disqus 회원이 아니시라면 회원가입을 하셔야 합니다.

저는 안타깝게도 이미 가입을 한 상태여서 이 포스팅은 이미 회원가입하신 분들을 대상으로 진행하도록 하겠습니다.

[이미지 2] - I want to comment on sites

2. 코드 찾기 

이제 제 블로그 코드에 넣을 Disqus 연동 코드들을 찾아줘야합니다. 

사실 정말 안타깝게도 제가 참고한 여러 블로그들은 회원가입하는 과정부터 설명을 해주셔서 제가 보이는 화면과는 달라서 저에겐 도움이 되지 못했습니다. 그래서 혼자 약-간 고군분투하다가 방법을 찾게 되었습니다.

 

이미 회원가입이 되신분이라면 위에 "I want to comment on sites" 클릭후 나오는 화면 우측 상단에 아래와 같은 네비게이터가 보이실건데요. 자신의 블로그 이름 옆에 "Manage" 버튼을 클릭해주시면 됩니다. 

 

[이미지 3] - Manage

이후 나오는 화면에 하단 배너를 보시면 아래의 이미지와 같을 겁니다. 여기서 "Installing Disqus" 를 누르시면 애타게 찾던 코드들을 발견하실 수 있습니다.

 

[이미지 4] - Installing Disqus

코드를 발견할줄 알았지만 아직 한 단계가 더 남아있습니다. 

위에서 "Installing Disqus" 클릭을 하시면 다음에 나오는 화면에서 아래와 같은 문구를 보실 수 있을겁니다.

여러 사이트 목록이 나와있을건데 잘 찾아보셔도 티스토리는 나와있지 않습니다. (티스토리야 힘내자!)

 

[이미지 5] - if (Tistory) = false 

 

애타게 티스토리를 찾다가 결국 페이지에 마지막까지 도달하게 되면 아래와 같은 배너를 발견하실 수 있습니다.

[이미지 5] - 직접 코드를 복붙하자!

위 배너를 클릭해주시면 됩니다! 

 

3. 코드 복붙하기 

다음 화면으로 넘어오셨다면 이제 정말로 코드를 발견하실 수 있을겁니다. 

이제 남은건 세상에서 가장 재밌는 일인 코드 복붙 뿐입니다.

 

[이미지 6] - 코드복붙! 

위의 이미지는 여러분들이 보고 계신 화면일건데요. 영어로 된 영상은 가볍게 스킵해서 스크롤을 내리셨다면 아래의 코드를 발견하셨을겁니다. 이 코드를 여러분의 블로그에 넣어주시면 됩니다 ! 

 

- 코드를 복붙하는 곳 찾기

블로그 관리 > 스킨편집 >  html 편집 > 홈을 글로 바꾸기 

 

 

[이미지 7] - html 편집은 여기 ! 

[이미지 8] 홈을 글로 바꾸는 것은 여기 ! 

html 편집하기를 누르시면 html 코드들이 보일겁니다.

이제 코드를 복붙하는 옵션에는 크게 두 가지가 있습니다. 하나는 기존에 티스토리 댓글 + Disqus 댓글, 또 다른 하나는 기존의 티스토리 댓글을 지우고 Disqus 댓글만 남기기인데요. 저는 후자를 선택하도록 하겠습니다.

 

- 기존의 댓글 코드 삭제

기존의 댓글 코드들은 스킨마다 class 명이 달라서 개발자 도구를 통해 확인해주셔야 합니다.

개발자 도구를 통해 기존의 댓글 코드를 확인해보니 class 명이 "area_reply" 였습니다.

[이미지 9] area_reply 안녕...

 

html 편집툴에서 ctrl+f를 눌러 area_reply를 찾아서 이 부분을 모두 지워집니다. (div 태그) 

어디서부터 어디까지 지워주어야 할지 고민이될겁니다. 아래의 이미지를 보시면 area_reply 밑으로 <s_rp> 태그가 보이실건데요. 이 태그가 끝나는 곳까지 지워주시면됩니다.

[이미지 10] START ~ 

아래의 드래그 되어 있는 </div> 태그까지 지워주시는 것과 동시에 Disqus에서 복사했던 코드를 붙여주시면 됩니다.

[이미지 11] END

 

다시 Disqus로 돌아가서 가볍게 Recommended와 (또) 영어로 된 영상을 지나 스크롤을 내리시면

[이미지 12] 정말 마지막!

위와 같은 코드를 찾으실 수 있을겁니다. 설명대로 </body> 태그가 끝나기 전에 위 코드를 복붙해주시면 됩니다!

 

 

+) 

이제 Disqus와 연동된 제 블로그를 확인해보실 수 있을겁니다.

다른 블로그들은 댓글이 잘 달리는데 왜 내 블로그에는 유독 댓글이 안달리는지 궁금했었는데, 친한 형의 제보로 애초에 댓글 달기가 안되는걸 알게 되었습니다. 그리고 Disqus 연동을 통해 댓글달기가 가능해졌는데요. 사실 이렇게 한다고 댓글이 많이 달릴거 같지는 않습니다만 댓글 많이 달아주시면 감사하겠습니다 ~ !

 

참고

[1] https://seollal.tistory.com/62

[2] https://jaejoong2.tistory.com/1