Cumulus for TiStory.com 1.23

티스토리가 본 블로그의 데이터를 다 날려버리는 덕분에 다시 작성한 포스팅임.

텍큐닷컴이 문을 닫게 되어 이 플러그인을 다시 티스토리 용으로 포팅했다.
이 플러그인은 Roy Tanck 님이 워드프레스 용으로 개발한 것을 티스토리 용으로 포팅했다가 다시 텍큐닷컴 용으로 포팅한 것을 또 다시 티스토리 용으로 포팅한, 나름의 역사와 전통흑역사가 있는 플러그인이다.
물론, 최신버전인 1.23을 포팅함.

기존 버전 이미지 재활용. 외형적으로 바뀐 건 없음.

1.23에서는 보안 Cross-Site Scripting (XSS) 취약점을 완전히 없애기 위해 구조를 일부 바꿨는데, 관련 포스팅은 읽지도 않고 냅다 덤볐다가 수정에 시간을 좀 낭비했다. 쩝.

설치 과정은 아래와 같다.


1. 파일 설치

아래 파일을 다운받아 압축을 풀면 swfobject.js, TiCumulus.js, tagcloud.swf의 3개의 파일이 나온다.
이  세 파일을 스킨 직접올리기 기능을 이용해서 올린다.

invalid-file

2. 스킨 수정 #1

스킨의 헤더 영역에 아래의 코드를 적는다.
</head> 태그 바로 앞에 적으면 된다.

<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript" src="./images/TiCumulus.js"></script>

3. 스킨 수정 #2

스킨에서 아래와 같은 부분을 찾는다.
스킨마다 조금씩 모양이 다르지만, 공통적으로 있는 부분이 <s_random_tags> ~ </s_random_tags>이다.

<div id="tagcloud" class="widget">
  <h3 style="padding-bottom:3px;">Tag clouds</h3>
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>

여기서 <s_random_tags>의 바깥쪽에 있는 <ul> ~ </ul>을 아래와 같이 수정한다.

<div id="htags" style="display:none;"><tags><s_random_tags>
    <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]">[#\#_tag_name_#\#]</a>
  </s_random_tags><a href="/"></a></tags></div>
<div id="TiCumulus"><p>TiStory Cumulus Flash tag cloud by <a href="http://zockr.tistory.com">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript">
//<![CDATA[
  var flashvars = {
  tcolor: "0x2970A6",
  hicolor: "0x462A56",
  bgcolor: "#f7f7f7",
  tspeed: "100",
  distr: "true",
  mode: "tags",
  tagcloud: document.getElementById('htags').innerHTML.E4Cumulus('블로그 절대주소')
  };
  var params = {
  allowScriptAccess: "always",
  wmode: "transparent"
  };
  swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
//]]>
</script>

여기서 자신의 블로그에 맞게 수정해야 되는 변수는 아래와 같다.

- tcolor: 글자색
- hicolor: 글자 강조색
- bgcolor: 배경색
- tspeed: 움직이는 속도

그리고, 블로그 절대주소는 http://와 마지막 /를 포함하는 주소이다. 본 블로그에서는 http://zockr.tistory.com/을 사용한다.

덧. WP-Cumulus 1.23에서 내부적으로 바뀐 부분이 링크의 주소가 http://으로 시작하는 절대주소만 인식한다는 것이다.
이에 따라 절대 주소를 명시하도록 수정했다.