[Tistory] 티스토리 블로그에 DISQUS를 이용한 SNS 인증 댓글 기능 추가하기

티스토리 블로그에 DISQUS를 이용한 SNS 인증 댓글 기능 추가하기

블로그를 하는 목적에는 여러가지가 있지만 저의 경우 가장 큰 목적은 스스로의 동기부여 입니다. 제가 겪었던 시행착오나 궁금했던 점들을 블로그에 정리하여 올려둡니다.

그리고 누군가 똑같은 문제를 겪었었을때 저의 블로그를 통해서 저보다 쉽게 문제를 해결하고 도움을 받았다고 댓글을 남겨주실때 그만함 기쁨과 동기부여가 없습니다.

그러나 아쉽게도 이글을 올리는 시점까지는 제 블로그에 익명 댓글 기능만 존재합니다. 따라서 이번글에서 DISQUS 댓글 기능을 제 티스토리에 연동해보려고 합니다.

DISQUS란

디스커스(DISQUS)는 페이스북이나 트위터 구글같은 서비스 사용자들에게 입증된 거대한 플랫폼 계정을 통해서 댓글을 남길 수 있도록 하는 서비스입니다. 쉽게 말해 페이스북같은 SNS 계정만 있으면 따로 가입을 하지 않아도 댓글 소통이 가능하도록 하는 서비스죠.

DISQUS 가입하기

DISQUS를 블로그에 장착(?) 하기 위해서는 당연히 DISQUS에 가입해야 합니다. DISQUS 입장에서도 아무한테나 이런 소셜댓글 기능을 오픈해주면 악용될 수 있기 때문입니다.

1. 먼저 DISQUS에 접속하도록 합니다.

https://disqus.com/

2. Get Started를 클릭합니다.

페이스북이나, 트위터, 구글 계정이 있으시다면 정말 간단하게 가입이 가능하고, 그렇지 않으면 하단에 이름 이메일 비밀번호 등을 입력하여 가입이 가능합니다.

가입 직후 티스토리 연동하기

가입후 아래와 같은 페이지가 나타나는데, "내 사이트에 Disqus를 설치하고 싶어" 버튼을 클릭합니다.

웹사이트 정보를 입력합니다.

Website Name - 디스커스에서 관리하기 위한 용도이므로 구분하기 쉬운 이름을 입력합니다.

Category - 웹사이트의 종류.

Language - Korean을 찾아봐도 없네요? 알아보니 한국어가 공식 지원에서 빠졌다고 하는군요. 한국어를 설정하는 방법은 다음 링크를 참고합니다.  -> [DISQUS] 디스커스 한국어 설정하기

 

요금제별로 구독을 할 수 있습니다. 무료버전과 유료버전으로 나뉘어져 있는데 큰 차이점은 문제 발생시 고객지원이 되는지 안되는지에 있는것으로 보이네요.

Basic 버전은 핵심 기능 사용은 가능하지만 지원이 안되므로 무료인 듯 하네요. 저는 Basic으로 갑니다.

자신의 웹사이트가 어떤 플랫폼인지를 묻는데, 티스토리는 없으므로 스크롤을 쭈욱 내려줍니다.

"제가 사용하는 플랫폼이 안보여요" 버튼을 클릭합니다.

이제 다음화면으로 넘어아게 되는데, 빨간 네모 박스 안에 있는 내용들을 복사하여 티스토리 스킨편집의 HTML 사이에 끼워넣어야 합니다. (여기서부터 약간의 고통이 시작될 수 있습니다.)

그 전에 설명을 해야할 부분이 있습니다.

네모박스 안의 내용을 보면 <div ~~~> </div> 와 그 나머지 두가지로 분류할 수 있는데, <div ~~~> </div> 부분은 DISQUS 댓글이 나타났으면 하는 부분에 끼워넣어야 하며, 그 나머지 부분은 </body> 앞에 넣어주어야 합니다.

이 부분은 스킨마다 끼워넣어야 하는 위치가 각각 다르기 때문에 HTML을 모르는 비 전공자들은 어려울 수 있습니다. 그래도 일단 해보도록 하죠.

티스토리 스킨편집에 DISQUS 코드 끼워넣기

백문이 불여일견 한번 직접 보도록 하겠습니다.

티스토리 관리자 페이지로 이동 후 스킨 편집으로 이동합니다.

HTML 편집을 클릭합니다. 작업을 시작하기 전에 혹시 모르니 현재 저장되어 있는 HTML을 모두 복사하여 텍스트 파일등으로 저장해 두세요!!

Ctrl + F를 누르고 </body>를 겁색합니다. 그리고 그 앞에 <div ~~~> </div> 를 제외한 나머지 부분을 붙여넣습니다.

이번에는 <div id="disqus_thread"></div> 를 붙여넣을 위치를 찾을 차례입니다. 이부분은 스킨마다 달라요. 

키보드에서 F12를 눌러 개발자 모드를 열어줍니다. IE, 크롬 모두 개발자 모드가 있습니다.

요소 선택 버튼(Ctrl + B)을 클릭해주세요. 크롬의 경우 Ctrl + Shift + C 버튼입니다.

그 상태에서 마우스를 움직여 어느 위치가 적당한지 탐색하고 원하는 위치가 나오면 클릭합니다.

개발자 모드에서 클릭한 요소가 무엇을 가리키는지 표시해줍니다. 방금 요소선택으로 클릭한 부분이 <i class="fa fa-comments"></i> 라는것을 알 수 있네요.

이제 위치를 잡았습니다. 저는 저 아래에 DISQUS 댓글을 삽입하고 싶습니다. 티스토리 스킨 편집 부분에서 fa fa-comments라고 검색합니다. 그리고 그 바로 아래 DISQUS 설치 부분에서 복사한 <div id="disqus_thread"></div>를 붙여넣습니다. 그리고 스킨을 저장합니다.

잠깐!!

저의 경우에는 제가 사용하는 스킨의 기본 댓글란에 DISQUS 댓글란을 집어넣은 것입니다. 그런데 이렇게 하면 기본 댓글과 DISQUS 댓글이 모두 보여지게 됩니다.

이럴때는 이전에 사용했던 개발자 모드의 요소선택 기능을 참고하여 기본 댓글 부분이 무엇인지 확인합니다. 그리고 해당 태그에 style="display:none;" 을 삽입해주면 보이지 않게 됩니다.

이제 다시 DISQUS로 돌아와 Configure를 클릭합니다.

Website URL에 자신이 방금 DISQUS를 설치한 웹사이트 주소를 넣어주세요. 그리고 Complete Setup을 눌러 설치를 마무리합니다.

저도 방금 막 DISQUS를 연동하면서 작성한 글이기에 앞으로 어떤 문제점들이 있을지 모르겠지만 현재 연동이 된것으로 확인이 됩니다.

연관글

[DISQUS] 디스커스 한국어 설정하기