태그 구름 (태그 클라우드:Tag Cloud) - 티스토리(Tistory)블로그에 태그 구름 적용하기

태그 구름 (Tag Cloud) 는 메타 데이터에서 얻어진 태그들을 분석하여 중요도나 인기도등을 고려하여 시각적으로 늘어 놓아 웹사이트에 표시하는 것이라고 할 수 있습니다.
사용자는 이렇게 표시된 태그중 마음에 드는 키워드를 발견하고 그것을 선택하여 그 메타 데이터에 원래 연결된 웹 페이지로 이동을 하게 됩니다.


티스토리(Tistory) 블로그를 대상으로 하여 태그 구름(Tag Cloud)을 적용해 보도록 하겠습니다.

TiCumulus.zip

압출 파일을 풀면 swfobject.js, tagcloud.swf, script.txt 파일이 있습니다. 




1. swfobject.js, tagcloud.swf 파일들을 티스토리 파일 업로드 기능을 이용해서 업로드 합니다.

2. HTMLl/CSS 편집에서 소스 코드를 수정해야 합니다.

Ctrl+F 키를 눌러서 찾기 기능을 이용하여 '태그목록'을 검색하였습니다. 's_random_tags'로 검색하셔도 됩니다.
기존에 있는 태그목록 모듈인
<ul><s_random_tags> ~ </s_random_tags></ul> 부분을 삭제 하고 아래 스크립트를 작성합니다. 

스크립트를 보기 좋게 나열 하다 보니 소스코드 일부가 잘려 버렸네요 ;;
압축 파일 안에 보시면 script.txt  파일이 있는데요, script.txt  파일내용을 복사 (Ctrl+C) 해서  
<ul><s_random_tags> ~ </s_random_tags></ul> 부분을 삭제한 위치에서 붙여 넣기 (Ctrl+V) 하시면 됩니다.



<!-- 태그 구름 위젯 설정 --> <DIV style="DISPLAY: none" id=htags> <TAGS> <S_RANDOM_TAGS> <A class= href="http://grimreper.tistory.com/script/powerEditor/pages/"> </A> </S_RANDOM_TAGS> <A href="http://grimreper.tistory.com/"></A> </TAGS> </DIV> <DIV id=TiCumulus> <P>Tistory Cumulus Flash tag cloud by <A href="http://zoc.kr/">BLUEnLIVE</A> requires Flash Player 9 or better.</P> </DIV> <SCRIPT type=text/javascript src="./images/swfobject.js"> </SCRIPT> <SCRIPT type=text/javascript> var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff"); t.addVariable("tcolor", "0x222222"); t.addVariable("hicolor", "0xff0000"); t.addVariable("mode", "tags"); t.addVariable("distr", "true"); t.addVariable("tspeed", "100"); t.addParam("allowScriptAccess", "always"); t.addParam("wmode", "opaque"); t.addVariable( "tagcloud", document.getElementById('htags').innerHTML.replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'") ); t.write("TiCumulus"); </SCRIPT>

3. 적용이 완료 되었습니다.

{ 주석 처리하시면 제대로 적용되지 않습니다.
삭제 하시던가 추가할 스크립트 코드 보다 아래쪽에 위치하도록 하세요,
적용 안되는 오류를 찾는다고 자그마치 1주일이 소요 되었습니다. ㅠ.ㅠ }




혹시 스크립트 코드에 대한 자세한 사항이 궁금하시다면
http://www.roytanck.com/2008/05/19/how-to-repurpose-my-tag-cloud-flash-movie/ 를 방문해 보시기 바랍니다.

영문으로 되어 있어서 보기가 좀 그렇지만,

태그 클라우드 적용시에 원하시는 모양으로 어느 정도 구현이 가능하지 않을까 생각 됩니다.