2009년 11월 4일 수요일

텍스트큐브(닷컴) 블로그에 DISQUS 달기 ― 절대주소 문제 해결!

▶ DISQUS가 뭐예요?

★ DISQUS는 댓글 시스템입니다. 그런데 ☞트위터 계정이나 야후 계정, 페이스북, ☞오픈아이디 등으로 댓글을 달 수 있다면 어떨까요?

★ 그래서 댓글에 답글이 달리면 트위터나 메일로 알려준다면 어떨까요?

★ 누가 트위터로 내 블로그 글을 링크하면 그것이 내 글에 그대로 댓글처럼 달린다면 어떨까요?

★ 게시물마다 ☞RSS 주소를 따로 얻을 수 있다면 어떨까요?


▶ DISQUS 가입과 설치

http://disqus.com에 가서 계정을 만듭니다.

CCL by 라이프해커

설정 메뉴에 들어가서 트위터, 야후, 오픈아이디, 기타 서비스에 체크해 주세요. 페이스북 연동 설정은 조금 더 복잡하더군요. ☞요기를 참고하세요. 페이스북을 쓰지 않는 사람은 그냥 통과.

설정 화면이 먼저였던가, 블로그 설치 화면이 먼저였던가 가물가물…. ㅡ,.ㅡa

주의사항. 트위터 쓰시는 분은 댓글 연동 설정 좀 해주세요. 저 위에 "Twitter Sign-in"에 체크하고 바로 밑에 트위터 아이디까지 써 줘야 댓글에 답글이 달렸을 때 그 아이디로 트위터 메시지가 날아갑니다.

댓글 달았을 때 자동으로 날아간 트위터 메시지입니다. '@48796619'는 댓글 연동이 안 되어서 Disqus가 아이디 대신 엉뚱한 숫자를 써넣어서 그렇습니다. 그 뒤에 이어지는 아이디는 제가 댓글 달면서 직접 써넣었습니다.

외국 서비스라서 워드프레스나 텀블러 같은 서비스는 플러그인으로 손쉽게 되는 모양입니다. 텍스트큐브(또는 티스토리)는 2009년 11월 현재 "Universal Code"를 선택해야 합니다.

이제까지 블로그에 달린 댓글을 버릴 생각이 아니라면 세 번째 단계는 무시하세요. 워드프레스 등으로는 댓글만 XML 파일로 뽑아서 DISQUS로 옮겨주는 플러그인도 있는 모양이던데, 누가 텍스트큐브용으로도 좀 만들어주세요. API도 공개해 놨더라고요.

그리고 첫 번째 단계는 그대로 하면 텍스트큐브(또는 티스토리)에서는 문제가 생기니 두 번째 단계부터 먼저 하세요. 코드를 복사해다가 텍스트큐브 스킨 편집 메뉴로 들어가서 </body> 코드 앞에 붙여주면 됩니다.

▶ 절대주소(PermaLink) 문제 해결하기

가장 중요한 첫 번째 단계입니다. 코드를 복사해다가 편집을 해줘야 합니다. 중간에 다음과 같은 코드가 알맹이입니다. 아래 코드 가운데 "wagnerian"은 제 DISQUS 아이디이니 바꿔줘야겠지요? ^^

    <script type="text/javascript" 
src="http://disqus.com/forums/wagnerian/embed.js"></script>
<noscript>
<a href="http://disqus.com/forums/wagnerian/?url=ref">
View the discussion thread.</a>
</noscript>`

이 코드 앞에 다음 스크립트를 보태야 텍스트큐브에서 문제가 생기지 않습니다.

    <script type="text/javascript">
var disqus_url = '[##_article_rep_link_##]';;
if( disqus_url.indexOf('"') > 0 ){
disqus_url = disqus_url.substring(0,disqus_url.indexOf('"'));
}
</script>

잠깐! 소스 퍼가려니까 막혀 있지요? 미안합니다. -_-; ☞요기를 클릭하시면 소스를 텍스트 파일로 받을 수 있습니다.

나중에 붙임. 티스토리는 이렇게 하니 안 되네요. ☞요기를 참고하세요.

이제 텍스트큐브 스킨 편집 메뉴로 들어가서 고쳐줍니다.

<div class="communicationSend"> 밑에 코드를 붙여 넣으면 보기 좋습니다.

▶ 남은 이야기

① 블로그에 원래 달린 댓글 입력 상자는 그냥 없애면 오류가 납니다. 그런데 `<div>` 태그에 숨김 속성을 주면 댓글 입력 상자가 보이지 않습니다. (☞jbh772님 지적)

그러니까, 이렇게 하면 됩니다:

<div style=display:none>
<div class="commentWrite">
    <div class="tt-input-div">
        <s_rp_input_form />                                    </div>
    </div>
</div>
</div>

② 텍스트큐브닷컴 블로그가 아닌 텍스트큐브 설치형 블로그를 쓰시는 분은 상대주소를 쓰지 않고 절대주소만 쓰도록 하면 문제를 근본적으로 해결할 수 있습니다. ☞요기에 자세한 내용이 있네요.

③ 그리고 이 글을 읽으신 분은 제가 무슨 프로그래머라도 되는 줄 아실 텐데, 사실 저는 아무것도 모르는 프로그래''입니다. -_-;; 따지자면 배운 게 아예 없지는 않고, C 언어 배우다가 '배열' 단원에서 '떡실신' 및 '쥐쥐'한 일은 있습니다. DISQUS 사이트에서 ☞개발자용 옵션이 있어서 그대로 해봤다가 안 되기에 삽질 끝에 디버깅 프로그램까지 써보고는, 막히는 곳을 여기저기 물어서 해결했습니다. 그 '안습' 사연을 여기에 자세히 쓰지는 않겠습니다. 흑흑흑…. ㅠ.ㅠ

글 찾기

글 갈래