태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

티스토리Disqus (디스커스)댓글 시스템을 적용하는 방법을 알기 쉽게 설명해달다고 Twitter로 연락 주신 분이 계셔서 튜토리얼을 작성해서 블로그에 올립니다. 블로그에서 댓글과 Twitter, Facebook 등 소셜 미디어와의 연동을 원하신다면 디스커스를 설치할 수 있습니다. 구글 블로거, 워드프레스 등 블로그 서비스를 사용하시는 분들도 이 글을 참조하실 수 있습니다.

1. Disqus계정 신청 : http://disqus.com/signup/?next=/add/

2. Disqus에 블로그를 등록 : http://disqus.com/add/

사용자 삽입 이미지

3. Disqus Settings (설정단계)

http://disqus.com/admin/settings/ 를 방문, Twitter Account 란에는 내 트위터 ID을 입력합니다.

사용자 삽입 이미지

Options (Social Media Reactions)에서는 원하는 서비스를 체크해줘야 하며 간단히 모든 서비스를 다 체크하시면 됩니다.  참고: Social Media Reactions란?

사용자 삽입 이미지

더 아래 부분으로 이동해 원하는 서비스만 체크를 하거나 전부를 다 체크하셔도 무방합니다. 특별히 Facebook Connect, Twitter Sign-in과 OpenID는 체크를 해주실 것을 권해드리며 이 설정을 해주면 블로그 방문자가 자신의 소셜 미디어 계정으로 직접 블로그에 로그인하여 댓글을 남길 수 있게 됩니다. Facebook Connect 부분 설정은 Disqus 설정화면에서 (How do I get this?)를 클릭하게 되면 그 아래부분에 펼쳐지는 영어로 된 도움말을 보시면 됩니다. Facebook API Key의 설정방법은 시간상 관계로 별도로 포스트하려 합니다.
사용자 삽입 이미지

Disqus Settings(설정) 단계의 마지막 부분  AppearanceCommunity Page에선 실지 별로 손을 본 필요는 없으며 설정페이지 최하단에서 최종 "Save"를 클릭하여 위의 모든 설정을 저장하면 됩니다.

3. Disqus 댓글 코드 삽입 단계 :

http://disqus.com/admin/tools 를 방문합니다.

티스토리 블로그는 Gerneric code를 선택해야 하며 Reinstall을 클릭하여 생성되는 코드 Code Snippet #1을 전부 복제하여 티스토리 블로그에서 댓글입력창을 보여주려는 위치에 삽입합니다.

사용자 삽입 이미지

저의 블로그처럼 댓글입력창을 본문하단에 위치하게 하려면 티스토리 스킨 HTML편집 모드에서 본문을 대표하는  코드 [##_article_rep_desc_##] 를 찾은 후 그 아래 위치에 Code Snippet #1 의 전체 코드를 삽입하면 됩니다. ( 선택사항으로 Feedburner 사용자는  Disqus에서 제공하는 Feedflare를 Feed하단에 넣을 수도 있으며 관련 설정 방법은 이 곳의 포스트를 참조바랍니다. ) 이외에 Code Snippet #2 와 사이드 바에 넣을 수 있는 댓글 Widget는 선택사항이며 적용을 하지 않아도 상관이 없으나 필요하다면 제가 이곳에서 설명한 내용을 참조해서 적용바랍니다.

기타 블로그 서비스 Blogger, Wordpress 등 특정 bsp의 경우에는 매뉴 창에서 Generic code가 아닌 자체의 블로그 서비스(bsp)를 클릭하여 대응되는 도움말을 따르시면 됩니다. 단 앞에서 얘기한 설정과정은 완전히 동일합니다.

Blogger 블로그에서의 Disqus 설정방법 :  블로거닷컴 블로그에 디스커스 설치하기
워드프레스의 경우는 DISQUS Comment System 이란 플러그인을 직접 사용하셔도 됩니다.

기타 참고 사항:

댓글 창 설치 완료후 Moderate에서 댓글을 관리할 수 있으며 Permissions에서 누가 댓글을 쓸 수 있는지 등 내용을 설정할 수 있습니다. 일반적으로 Permissions 부분은 초기상태로 그냥 놔두면 되며 이 경우 누구나 다 댓글을 남길 수 있는 권한을 가지게 됩니다.

Disqus 도움말 페이지 : http://wiki.disqus.net/

다음 번 글에서는 Facebook Connect 설정에 대해서 구체적으로 설명해드리겠습니다. 이 부분은 나중에 설정하면 되며 위의 과정을 거쳐서 블로그에 삽입한 기존 Disqus 코드 등을 뜯어고칠 필요가 없이 자동으로 적용이 될 수 있는 부분입니다.

관련 글

티스토리,블로거,워드프레스 블로그에 Disqus디스커스 적용하기(1) - 라이프해커
  1. Commented by 궁금 at 2010.06.22 03:27

    이런게 다있엇네요...

  2. Commented by 닉쑤 at 2010.08.21 00:09

    좋은정보 잘 봤습니다.
    지금은 인터페이스가 많이 바꼈더군요.
    여튼 잘 설치했습니다. ^^

    • Commented by 라이프해커 at 2010.08.21 14:51 신고

      제 글을 링크해주셔서 감사합니다. 아까 닉쑤님 블로그 죽 둘러보고 왔습니다 :)

      사실 제가 이 글을 쓴후 얼마 안지나서 disqus가 큰 변화가 있었습니다.전체 설정부분 인터페이스가 다 바뀌었고,Facebook API key등은 자동으로 획득하게 되어 있더라구요...아무튼 disqus는 참 훌륭한 도구라 생각됩니다.:)

  3. Commented by 깜냥 at 2010.10.28 08:04

    궁금한게 있는데요...
    저도 설치를 해봤는데... Reactions 부분이 잘 안됩니다.
    http://ggamnyang.com으로 접속하면 전체 페이지의 reactions가 모두 보이고 개별페이지로 접속하게 되면 reactions가 전혀 안보입니다.
    보니까 BackType쪽으로 보니 주소가 http://ggamnyang.com으로 검색해서 보여지네요...
    블로그글의 숫자로 검색이 되어 뿌려져야 하는데 말이죠...
    이걸 어떻게 해결하셨나요?
    도움 부탁드립니다!!!

    • Commented by 라이프해커 at 2010.11.02 13:53 신고

      답변이 무지 늦어서 죄송합니다.이 블로그는 사실 정지되어있는 블로그고 제가 가끔씩 올라와서 댓글을 확인합니다.^^

      티스토리는 블로그 홈페이지에 테터데스크를 적용해주면 문제가 해결되며, 다른 해결책은 없는 것 같습니다.제 블로그도 과거 동일한 문제가 있었고 최종 테터 적용해서 이 문제 해결했습니다.

      사실 제가 티스토리에서 워드프레스로 옮긴 이유중의 하나가 바로 이런 결함들때문입니다.워프에선 이런 문제가 없으며 블로그서비스 자체의 SEO가 아주 잘 되어있습니다.

  4. Commented by at 2011.10.30 07:12

    비밀댓글입니다

  5. Commented by muggle80 at 2011.12.07 13:36 신고

    disqus 가 요즘..제대로 동작을 안하는 거 같네요.....
    저만 그런 줄 알았는데, 여기도...;

    이유가 뭐지..;;

    • Commented by 라이프해커 at 2011.12.16 12:30 신고

      블로그가 이사를 가서 오래전에 댓글을 닫아뒀었는데, 이제야 보게 되었네요.

      저도 문제가 있군요. 여러가지로 시도해보고 혹시 해결된다면 알려드리겠습니다.