블로그에 소셜댓글 시스템을 도입해 보자

요즘 해외 웹 서비스의 화두는 단연 소셜(Social)과 관련된 것이다. 이전에 소셜이라는 단어는 소셜네트워킹서비스(SNS)에 국한되어 있었다면 작년부터 페이스북 커넥트(Facebook Connect), 구글 프렌드 커넥트(Friend Connect) 등이 나오면서 모든 웹에 소셜(Social) 요소가 도입되고 있다고 해도 과언이 아니다. 이전의 웹이 컨텐츠를 보여주는 것에 머물렀다면 이제는 친구들과 함께 해당 컨텐츠를 쉽게 공유하고.. 이를 통해 컨텐츠 배포가 보다 쉽고 효율적으로 이루어지고 있는 것이다.

해외의 웹 사이트를 방문해 보면 해당 컨텐츠를 페이스북이나 트위터 등에 쉽게 올릴 수 있는 다양한 버튼이 있는데, 오늘 소개할 내용은 블로그를 비롯한 웹페이지의 댓글 자체를 보다 소셜(Social)하게 만들어 주는 소셜 댓글(Social Comment) 서비스인 디스커스(Disqus)라는 서비스이다.

페이스북에서는 페이스북 커넥트를 블로그의 댓글 시스템에 알맞게 커스터마이징한 페이스북 커넥트박스(Connect Box)라는 서비스도 선보였는데.. 이건 특정 파일을 자신의 블로그 시스템에 업로드해야 하기 때문에.. 진정한 설치형 블로그를 운영하지 않는다면 적용이 불가능하다. 구글도 프렌드 커넥트를 응용한 소셜바(Social Bar)라는 서비스를 제공하는데, 이 또한 설치형 블로그에만 적용할 수 있기 때문에.. 저처럼 티스토리에서 블로그를 운영하는 사람에게는 해당 사항이 없다. ㅠㅠ

디스커스(Disqus)는 설치형 블로그를 운영하지 않더라도 간단한 HTML 코드를 적용해서 자신의 블로그에 소셜 댓글 시스템을 구축할 수 있는 장점이 있다. 일단 이 서비스를 이용하기 위해서는 회원 가입 후 관련 코드를 생성해서 자신의 블로그의 적당한 곳에 붙여 넣어야 한다. 워드프레스, 블로거닷컴, 타입패드, 텀블러 등은 아주 자세하게 안내가 되어 있는데.. 여기에 속하지 않은 블로그의 경우 Genaric Code를 선택하면 된다. 참고로 저는 블로그 본문 바로 뒤에 Disqus 댓글 시스템이 나오도록 배치했다.

회원 가입 후 댓글 시스템에 대한 여러 가지 옵션을 조정할 수 있는데.. 아래 그림에서 보는 바와 같이 다른 소셜미디어(프렌드피드, 트위터, 플리커, 유튜브 등)에서 내 블로그에 대한 언급이 있으면 찾아서 해당 글을 보여 주는 옵션, Disqus 자체 트랙백 주소를 부여하는 기능, 동영상으로 댓글을 남길 수 있도록 하는 기능.. 그리고 가장 중요한 기존 페이스북 계정을 이용해서 내 블로그에 댓글을 달 수 있도록 하는 기능을 선택할 수 있다. 페이스북 커넥트를 설정하는 방법이 약간 복잡할 수 있는데.. 도움말을 참고하셔서 잘 설정하면 된다. (저도 별 지식이 없는 상태에서 했으니 다른 분들도 충분히 할 수 있을 것이다.)

옵션에 대한 설정을 하고 Genaric Code를 블로그에 삽입하면 아래와 같이 블로그 본문 아래에 댓글을 달 수 있는 창이 생성된다. 아래에서 보는 바와 같이 댓글을 다는 사람은 Disqus 계정이나 페이스북 계정으로 로그인해서 댓글을 달 수 있고.. 심지어 아무 곳에도 로그인하지 않고 이름/이메일/웹사이트 주소(옵션)만 입력하고도 제 블로그에 댓글을 달 수가 있다. 이 글을 보시는 분도 부담가지지 마시고.. 댓글을 달아 주시기 바란다. 페이스북 계정이 있으신 분은 바로 다셔도 된다. 굳이 Disqus에 회원가입을 하실 필요는 없다.

Disqus 계정으로 로그인한 다음 댓글을 달 때 한 가지 편리한 기능이 있는데.. 그것은 다름 아닌 자신이 단 댓글을 자신의 트위터에 업데이트할 수 있다는 점이다. 자신의 트위터 계정은 Disqus에 회원 가입하고 자신이 활동하고 있는 사이트 정보를 입력하는 곳에서 설정할 수가 있다. 트위터뿐 아니라 페이스북, 프렌드피드, 플리커에 있는 자신의 정보를 입력할 수 있으니 참고하시길... 요즘 국내 트위터 이용자도 점점 늘어나는 추세인데.. 여러분도 Disqus에 가입해서 댓글 시스템을 교체해 보시길..

페이스북 커넥트를 이용해서 페이스북 계정으로 로그인한 후 댓글을 입력하면 아래와 같이 자신의 페이스북 계정에도 업데이트할 것인가를 물어보는데.. 댓글 내용을 페이스북에 올리면.. 댓글 단 분의 친구들도 내 블로그 내용에 자연스럽게 관심을 가질 수가 있는 것이다. 왜 소셜 댓글 시스템인지 알 수 있는 대목이다. 위에서 잠시 언급했던 페이스북 커넥트박스를 설치하지 않아도 Disqus를 통해 동일한 효과를 누릴 수가 있는 것이다. 개인적으로 정말 하고 싶었는데..드디어 내 블로그에도 페이스북 커넥트 기능이 구현된 것이다. 얼마나 많은 분이 댓글을 달아 주실지 모르겠다.

한가지 더. 댓글 단 분의 프로필 이미지에 마우스를 갖다대면.. 이 분이 제 사이트에서 달았던 댓글 모두를 보여주는 아주 훌륭한 기능을 제공한다. 아래는 제가 페이스북 계정으로 제 블로그에 댓글을 달았던 내역을 보여주는 것이다.

Disqus를 이용해서 댓글 시스템을 구축한 분은 댓글 관리가 훨씬 더 편리해진다. 일단 Disqus에는 복수의 사이트를 등록할 수가 있는데.. 즉, 자신의 운영하는 웹사이트나 블로그의 댓글을 한 군데에서 편리하게 관리할 수가 있다는 점이다. 또한 댓글이 달리면 자신의 이메일로 해당 댓글 내용을 알려 주는 기능도 제공하기 때문에.. 블로그를 자주 방문하지 않아도 댓글 게시 여부를 신속하게 확인할 수가 있다.

아래는 내 블로그에 달린 댓글을 통합적으로 보는 화면인데.. 스팸처리, 댓글 삭제, 댓글 수정 및 해당 댓글에 대한 댓글을 바로 달 수 있는 기능도 제공한다.

해당 댓글을 볼 수 있는 위젯도 제공하는데.. 아래와 같은 위젯을 블로그 사이드바에 붙여 놓으면 해당 사이트 내의 댓글을 다른 분들도 신속하게 확인할 수가 있다.

이 댓글 시스템을 블로그에 적용했지만.. 기존 티스토리에서 제공하는 댓글 및 트랙백 시스템도 그대로 둔 상태이다. 다만 이전처럼 펼쳐놓지 않고.. 접은 상태를 디폴트로 해 놓았으니..익숙하지 않으신 분은 기존 댓글/트랙백을 이용해 주시기 바란다.^^

Disqus 댓글 시스템을 달아 놓고 여러 가지 테스트를 하는 중에 심각한(?) 문제를 발견했다. 저는 블로그 주소를 문자로 설정해서 쓰고 있는데.. 해당 주소를 인식하는데 문제가 있는 듯 하다. 테스트 결과 http://mushman.co.kr/entry/%EC%95%84%EC%9D%B4%ED%8C%9F%ED%84%B0%EC%B9%98%EC%9A%A9-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-%EC%A7%81%EC%A0%91-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EB%B3%B4%EB%8B%88 라는 포스트에 대해 댓글을 달면 브라우저마다 주소가 다르게 인식이 되는 듯 하다. (블로그 주소를 문자로 설정하는 것이 검색에 도움이 된다고 했는데.. 여기서 문제가 생길 줄이야..ㅋㅋ)

동일한 포스트인 http://mushman.co.kr/2691051 에 댓글을 달면 모든 게 잘 보이는데.. 위와 같이 문자로 되어 포스트 URL에 대해서는 브라우저에 따라 주소가 약간씩 달라지는 듯.. 결국 동일한 글에 대해서 댓글을 달아도 실제 사이트에서는 잘 보이지 않는 문제가 발생하고 있다. 이 부분은 어떻게 풀어야 할지 난감하다. URL 주소 자체를 숫자로만 사용하거나 영문으로만 사용하면 문제가 없을 듯 한데...이것을 어떤 식으로 해결해야 할 지.. 혹시 해결책을 아시는 분은 조언을 해 주시면 정말 감하겠습니다.^^

국내 블로그 서비스인 티스토리나 텍스트큐브닷컴 등에도 이런 소셜 댓글 서비스가 도입된다면 나름 큰 인기를 끌지 않을까? 티스토리 블로그를 운영하시는 분이라면 소셜 댓글 서비스를 여러분 블로그에 지금 적용해 보시기 바란다.

이 글은 스프링노트에서 작성되었습니다.