티스토리에 SNS 소셜 댓글 DISQUS 적용하기

DISQUS

안녕하세요 여러분! :) 오늘은 티스토리에 DISQUS를 적용하는 방법을 포스팅해보려고 합니다. 

DISQUS는 댓글 소셜 서비스. 댓글 기능을 제공하는 일종의 툴 같은 것입니다. 보통 깃허브 블로그에서 많이 사용하는 것 같은데, 이번에는 티스토리에 적용해보려고 합니다.

티스토리에는 플러그인으로 라이브리 댓글 서비스를 제공하긴 합니다만.... 그냥 왠지 DISQUS가 더 끌려서 적용해보겠습니다! 약간만(?) 수정하면 쉽게 따라할 수 있습니다. :)

---

1. 디스커스 회원가입

disqus.com/

https://disqus.com/

홈페이지를 방문하시면 위와 같은 화면을 보게 될 것입니다. GET STARTED를 누르고 회원가입을 진행해주세요! 구글, 페이스북 등의 계정을 연동하여 회원가입을 진행할 수 있습니다. 

그리고 I want to install Disqus on my site를 클릭해주세요

이런 화면이 보이면 website name을 적고 (도메인 주소가 아니니 자유롭게 작성해주셔도 될 것 같습니다!) 카테고리, 언어를 선택해주세요. 저는 한국어가 보이지 않아서 영어를 선택했습니다.

요금제별로 선택하는 화면이 나옵니다. 저는 당연히 무료로..^^ 선택했습니다!

선택 후 스크롤을 쭈욱 내리시면 위 버튼이 있고 여기서 소스코드를 생성하실 수 있습니다. 

소스코드를 전부 복사합니다. 

 

2. 티스토리에 DISQUS 적용하기

이제 소스코드를 저희의 티스토리 블로그에 붙여봅시다!

블로그 설정 -> 스킨 편집 -> html 편집을 클릭해줍니다.

소스코드를 자세히 보시면 <div ~~></div> 태그가 있고 <script>~~</script> 이렇게 두 파트로 나뉘어 진 것을 보실 수 있습니다.

<div> 태그는 disqus가 위치했으면 하는 곳, 댓글이 있는 곳에 div 태그를 넣어주면 되고, <script> 부분은 </body> 바로 앞에 넣어주면 됩니다!

저의 경우에는 <div class=="comments"> ~~ 이 부분이 코멘트 부분이어서 주석 처리를 해주고 disqus의 <div> 태그를 넣어주었습니다. <script>는 </body> 태그 앞에 붙여주었구요!

혹시 저와 설정이 다르시다면 크롬 개발자 도구에서 확인해가시며 찾아가면 될 것 같습니다. :)