변경된 소셜 댓글창 Disqus, 티스토리에 쉽게 달자

댓글의 자유를 느껴 보세요!! ^^

 
소셜네트워크라는 화두가 중심이 되는 요즘입니다. 그래서 인지 웬만한 인터넷 서비스 이름엔 모두 소셜이란 단어가 붙게되는 듯 합니다. 특히 인터넷과 관련된 이름들에 있어서는 더더욱. 물론 대부분은 이름만 소셜한 경우가 많습니다. 좋은 서비스들은 어딘가 기존의 방식과는 달리 상호작용에 용이합니다. 또한 연결하고자 하는 사람들과의 관계를 원활하게 도와줍니다.

그중 하나가 작년 부터 일부 블로그에 설치되기 시작한 것이 소셜댓글창입니다. 그리고 그 중 가장 보편적으로 많이 설치하고 있는 건 바로 디스커스(Disqus)입니다. 국내에도 소셜 댓글창을 개발하여 보급하고 있는 라이브리, 티토크 등이 있긴 합니다. 하지만 모두 유료 또는 일부에게만 배타형식으로 제공되고 있어 쉽게 접하기는 어려운 상황입니다. -개인적인 바램은 빠른 시일 내에 디스커스 처럼 보편적으로 공개되는 서비스가 되길 바랍니다.- 국내에서 개발된 소셜댓글창의 장점이라면 한글이라서 아무래도 설치하는데 부담이 덜하다는 점일텐데... 이가 없으면 잇몸으로라고... 디스커스(Disqus)도 괜찮습니다.

소셜댓글창이란 말그대로 댓글창에 댓글을 달면, 등록한 모든 서비스의 내 계정으로 댓글이 보여지고 또 누군가 그 댓글에 답을 달면 내 메일과 소셜댓글창이 설치된 사이트 모두에 그 내용이 등록되도록 설계된 열린 소통의 기능을 수행하는 댓글 시스템을 말합니다.

이를테면, 트위터나 페이스북, 오픈아이디 및 메일서비스 등에 계정이 있는 경우 디스커스(Disqus)가 설치된 -사이트에서 디스커스(Disqus)에 등록되어 있지 않아도- 디스커스(Disqus) 댓글창에 댓글을 남기고 원하는 서비스를 선택하기만 하면 댓글이 그 사이트에 남겨지는 동시에 내가 선택한 트위터 및 페이스북 등으로 댓글을 보낼 수 있습니다. 기존 댓글이 남긴 해당 사이트에서만 확인할 수 있었다는 점에서 뭔가 부족했지만 디스커스(Disqus)와 같은 소셜 댓글은 언제라도 쉽게 확인할 수 있다는 점에서도 진일보한 시스템이라고 할 수 있습니다.

▲ 디스커스(Disqus)에 로그인 하지 않은 상태에서 보여지는 디스커스(Disqus) 댓글창 화면모습

또 디스커스(Disqus)에 아이디가 등록된 경우라면, 한번 로그인하여 IP가 바뀌지 않는 한 동일한 컴퓨터에서는 어느 사이트에서든 자신의 아이디로 별도의 로그인할 필요없이 편리하게 댓글을 달고 소셜네트워크 사이트들로 자신의 댓글을 송출?할 수 있다는 장점은 아주 큰 매력이 아닐 수 없습니다.

더우기 이 디스커스(Disqus) 서비스를 가만히 살펴보니 독자적인 서비스로써의 기능을 강화하고자 하는 듯 하면서도 여러 사이트와 동시에 엮는 형태로 클라우딩 시스템처럼 소셜네트워킹 방식을 구현한다는 점은 디스커스(Disqus) 서비스의 성장 잠재력을 느끼게 합니다.

그것을 엿볼 수 있는 것 중 하나는 디스커스(Disqus)가 트위터의 팔로우(Follow) 방식과 페이스북의 좋아요(Like)를 차용하면서도 언제 어디서든 디스커스(Disqus)가 설치된 곳이라면 소통할 수 있게 한다는 점입니다. 트위터와 페이스북 역시 열린 소통을 지향하지만 각각 자신 -트위터와 페이스북- 을 중심으로 연결고리를 만들어 가는 것과는 차별화된 특징이라고 할 수 있습니다. -물론 디스커스(Disqus)가 지향하는 바도 트위터와 같은 실시간 정보교류의 중심메카를 염두에 두고 있어 보입니다. 그래서 한편으로 트위터 또는 페이스북을 조금 늦게 시작한 분들이라면 Disqus를 중심으로 하는 데 보다 앞선 사용자가 될 기회가 될 수도 있지 않을가 생각합니다. 그러나 아직 모바일 지원이 부족한 부분 등 개선해야할 사항들이 여럿 보이긴 합니다.-

이미 많은 분들이 디스커스(Disqus)에 대한 포스팅을 하셨습니다만, 최근 살펴본 바로 디스커스(Disqus)시스템에 일부 변화가 있었습니다. 가장 큰 변화는 -사실 변화라고 할 수는 없습니다. 설치하는 과정만 조금 번거롭게 바뀌었고 하는 것이 더 정확한 표현일듯 합니다.- 디스커스(Disqus) 서비스에서 설치하고자 하는 블로그에 삽입할 소스코드 생성에 있어 디스커스(Disqus)가 특정 서비스 -보통 모두 해외서비스임- 로 설정한 곳 이외의 사이트들에서 사용할 수 있는 범용코드(Universal Code)적용이 변경되었습니다. 

▲ 기존 디스커스(Disqus)에서 편리하게 생성할 수 있던 Universal Code 지원 화면

디스커스(Disqus)만의 소셜한 시스템을 구축하려다 보니 그랬는지 모르겠지만, 예전엔 사용자 별로 편리하게 생성할 수 있었는데 이번에 그것이 수동으로 바뀌어 아무래도 태그에 약하고 이런 소스코드 설치에 어려움을 겪는 분들껜 디스커스(Disqus) 설치가 예전 보다 조금 더 어렵게 느껴질 거라 생각했습니다. -사실 제가 그랬거든요. ^^ 동병상련이라고...-.-; ^^ - 

그래서 제가 포스팅하고자 하는 내용은 그 바뀐 범용코드소스(Universal Code)를 티스토리 블로그에 적용하는 방법을 말하고자 합니다. 기존 디스커스(Disqus) 등록 및 설치에 관한 내용은 비교적 많은 분들이 포스팅을 하셨기에 그 내용은 생략하겠습니다. 필요하신 경우 검색사이트 등에서 "Disqus" 또는 "Disqus설치"등의 키워드로 검색하시면 도움되실 내용들을 보실 수 있을 겁니다. 

참고로 이번 Disqus에 어떤 변화가 있었는지 정확히는 알 수 없지만, 이로 인하여 유독 IE브라우저에서는 Disqus가 잘 보이지 않는다던지 보이더라도 댓글 등록이 잘 되지 않는 문제가 종종 발생하고 있습니다. 이부분은 지금도 Disqus 내부에서 어떤 작업을 진행하고 있어 보입니다. 때문에 곧 문제가 해결되지 않을까 생각합니다. IE 이외에 오페라, 파이어폭스, 크롬 등에서는 아무런 문제없지 잘 적용됩니다.

※ 설명 전에 전제할 사항은 여러 경우의 수로 인하여 이곳 블로그에 적용한 것을 기준으로 설명 드릴 수 밖에 없음에 대해 양해를 구합니다. 특히 스킨이 Life In Mono(Light)이 아닌 경우에는 대부분 크게 차이는 없겠지만 설명드리는 내용과 다소 차이가 있을 수 있음을 감안하시기 바랍니다. 또한 디스커스(Disqus) 댓글창의 설치 위치를 다르게 하시고자 하는 경우에는 별도로 위치할 태그를 직접 찾아서 설정하여야 하므로 이 부분은 댓글로 남겨주시면 드릴 수 있는 범위 내에서 답변 드리겠습니다. 아울러 본 내용에 잘못된 내용이나 미흡한 부분 알려주시면 고맙겠습니다. (_ _)

자 그럼 디스커스(Disqus) 범용코드(Universal Code) 설치 방법을 말씀드리도록 하겠습니다.

①
먼저 디스커스(Disqus) 사이트로 이동하여 로그인을 하고 Admin메뉴에서 Install로 이동을 합니다.
그럼 디스커스(Disqus)에서 설치를 지원하는 특정 사이트들이 보이고 그 아래에 "Universal Code"라는 것이 보입니다. 그 "Universal Code"를 클릭합니다.

②
클릭하여 이동한 "Universal Code"관련 페이지에서 중간 쯤 보시면 아래 이미지와 같은 "Embed code"라는 제목과 그 아래 서브창으로 소스크드가 보입니다. 그 서브 창내의 소스코드를 드래깅하여 복사하여 메모장(Notepad) 등에 붙여 넣습니다.

그 내용은 다음과 같습니다.

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    // var disqus_identifier = 'unique_dynamic_id_1234';
    // var disqus_url = 'http://example.com/permalink-to-page.html';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

③
상기 내용 중 글자 배경색이 빨간 부분을 각각 자신이 Disqus에 등록한 ID로 변경합니다. 아래처럼... 설명을 용이하게 하기 위하여 편의상 저의 아이디를 예로 아래 코드를 명기하였습니다. 실제 설치할 땐 반듯이 설치하고자 하는 분의 ID로 변경하시길... 당연히 그러시겠지만. ^^ ㅎ

var disqus_shortname = 'hisastro'; (''표시가 반듯이 있어야 함)
dsq.src = 'http://hisastro.disqus.com/embed.js'; (hisastro.disqus.com에는 ''표시가 있으면 안됨)

Embed code.txt

아~! 부가적으로 상기 "Embed code" 내용 중 블럭표시된 부분은 복사 붙여넣기를 하지 않아도 됩니다. 그 부분은 Disqus 로고를 표기하는 내용을 담고 있습니다.

④
그런 후 해당 티스토리 블로그의 HTML/CSS 편집에서 Ctrl + F 단축키를 통해 </s_tag_label> 또는 <div class="actionTrail">을 검색하여 </s_tag_label> 바로 아래 또는 <div class="actionTrail"> 바로 위에 상기에 편집한 범용코드(Universal Code)를 붙여 넣습니다. (아시죠? ^^ 복사한 것 붙여넣는 단축키 Ctrl + V)

⑤
그런 다음 다시 디스커스(Disqus)사이트의 Universal Code페이지로 이동하신 후 아래 이미지와 같이 페이지 하단에 보이는 "Comment count" 내용이 들어 있는 또다른 서브창의 소스를 드래깅하여 복사합니다.

그 내용 역시 아래와 같습니다.

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

⑥
위에서 설명한 것과 마찬가지로 이번에도 상기에 표기된 내용 중에서 글자색 배경이 빨간 부분을 자신의 디스커스(Disqus) ID로 수정합니다. 아래 역시 위에서 말씀드린 것처럼 이해를 돕기 위하여 저의 ID를 예로 표기하였습니다. 참고하시길... ^^

var disqus_shortname = 'hisastro'; (''표시가 반듯이 있어야 함)
s.src = 'http://hisastro.disqus.com/count.js'; (hisastro.disqus.com에는 ''표시가 있으면 안됨)

Comment count.txt

⑦
수정한 "Comment count" 내용을 복사하시고 HTML/CSS 편집에서 Ctrl + F 단축키를 통해 이번에는 </body>를 검색합니다. 그리고 복사한 "Comment count" 내용을 </body>태그 바로 위에 붙여넣기를 합니다.

⑧
마지막으로 HTML/CSS 편집에서 미리보기를 하여 정상적으로 디스커스(Disqus) 댓글창이 보인다면 정상적으로 잘 적용이 된 겁니다. 아~ 그러나 앞서 말씀드린 바와 같이 IE에서는 아래처럼 출력이 되어도 잘 적용된 겁니다. HTML/CSS 편집에서 "저장" 하셔도 됩니다.

  ☞  ※ IE에서는 이렇게 보이는 경우도 있지만 이는 정상적으로 적용된 상태입니다.


가능한 쉽게 설명드린다고 했는데, 웹프로그래밍 까지는 아니더라도 html 및 스크립트 소스들이 왕왕 보이는 까닭에 그저 어렵게만 보일 수 있다고 생각합니다. 그렇지만 위에서 설명드린 내용대로만 하시면 아무런 문제 없이 잘 적용되리라 생각합니다.

아무쪼록 Disqus 댓글창을 설치하고자 하시는 초보 블로거 분들께 작은 도움이라도 되었으면 좋겠습니다.

고맙습니다. (_ _)

글을 인용하실 경우 따뜻한 댓글(또는 트랙백)과 원문의 출처와 링크는 밝혀주시기 바랍니다.

 (_ _)
좋은 글이라고 생각하신다면 더 많은 분들이 이 글을 읽으실 수 있도록 추천 부탁드립니다.