티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

기존 텍스타일 서비스인 토트에서 티스토리로 이전하며 이것저것 바꿀수있는 재미가 있는 요즘.
기존 카운터가 사용하고 싶었지만 티스토리 자체 카운터는 역시 별로인듯해서
부족한 실력에 고민하다 하나 만들어봤네요.
플래시는 XE의 카운터플래시를 사용했으며 텍스타일등에서도 사용하는 기본 카운터기도하다.

처음엔 플래시 파일 스킨에 업로드하고 위의 태그하나 넣으면 끝날줄알았다.
보통카운터류의 플래시는 카운터값만 변수로 넣어주면 작동한다.
하지만 여기가 삽질의 시작일줄 미쳐 몰랐다.

당장 위와 같이 작동시킨다면 새로 만든 블로그는 정상 작동할것이다.
하지만 문제는 1000카운터 이상부터 발생한다.
기존 블로그에선 하루에도 많으면 천명이상 카운터가 있었고 실제 적용하니 정상 작동하는줄 알았다.
몇일 지나 천명을 넘기니 문제가 발생했다.

실제 카운터 파일을 onpc_counter.swf?n=123,456,7890로 테스트해보면
위와 같이 1~0까지 잘 표시된다.
하지만 티스토리의 카운터 치환자는 php의 number_format($count) 처럼 작동한다.
그래서 제일 뒤 전체카운터의 값이 7890이 아닌 7,890으로 변환된다.
php만해본 필자는 티스토리에서 php만 지원 된다면 몇줄의 코드만 넣어 변환하면 끝이겠지만

서비스행태의 블로그에서 지원할리 없으니 삽질을 많이했다. ㅜㅜ (설치형 블로그에선 가능하다.)
초보의 한계라고도 볼수있겠다. 뭐~ 시간이 흘러 처음해보는 자바스크립터를 이용해서 변환에 성공했다.

이제 초보가 만들었지만 초보도 이용 가능한 XE플래시 적용하기를 해보자!!
(참고로 자바스크립터는 처음 만져봐서 효율적이진 않을것이다. 그래도 작동엔 문제가 없으니 넘어가자)

아래의 첨부파일 2개를 받으면 onpc_html.txt라는 파일이 있다.
이것을 메모장등으로 열고 복사를 해두자.

그리고 한가지팁!!
11번째줄 ctc = ccnt * 1 + 0 ; 여기의 마지막 숫자0을 다른수로 바꾸면
전체 카운터 값에서 증가시킬수있다.
실제 통계치 + 임의의 숫자값이 표시된다.
블로그 이전으로 기존 전체카운터 추가시에 사용하면될듯하다.
전체 카운터가 보이는것만 오르는거라  통계자체가 오르지는 않는다.

자신의 티스토리 블로그에 접속후 1~4번 순서로 클릭후~
onpc_count.swf파일을 업로드하자! (첨부파일은 아래에있다)

업로드가 완료되면 html/css편집기로 가서 좀전 복사해둔 소스를 넣기만 하면된다.
1,2번으로 가서 #과 #사이에 @소스파일을 붙여넣기하면됨
아래에 저장 버튼을 눌러 저장하면 완료!!


참!! 소스를 넣기전에 사이드바에서 카운터모듈을 켜놔야한다.



소스를 넣을 위치 찾는 방법!!

Ctrl + F키를 눌러 현재 웹페이지의 특정 단어를 쉽게 찾을수있다.

일단 카운터로 검색하자
카운터 모듈이 나오면 성공!
스킨마다 틀리겠지만 만약 카운터로 안나온다면

##_count_total_##으로 찾아보자.




모두 끝났다 이제 블로그 메인으로 가보자~

사이드바에 위 처럼 플래시로된 카운터가 생겼을것이다.
적용 방법은 쉬우나 삽질한다고 고생 좀했다.
물론 자바스크립터를 잘 다룰줄 안다면 1분도 안걸렸을 것이다.ㅜㅜ

참고!!

사이드바 설정에서 HTML 배너 출력 기능으로 하면 삭제 수정이 편하겠지만..
위처럼 사이드바에서 추가하면 플래시가 작동 안한다.
적확하게는 플래시는 뜨나 카운터 수자를 불러올 치환자가 사이드바 HTML로는 못 불러오는듯하다.
그냥 위 방법 대로 HTML/CSS편집으로 해결하면된다.
그래도 규격을 지켜서 인지 끝나고 난후 사이드바 꾸미기에 가보면 (이름없음1)으로 나온다.
삭제나 이동은 자유롭게 할수있다.

onpc_html.txt파일과 onpc_counter.swf파일 2개이며
zip압축과 자동압축풀림 두개 준비했다.(7z사용)
그냥 텍스트 파일과 플래시 파일을 올릴려니 티스토리에선 플래시가 첨부파일이 아닌 플래시 작동으로 붙어버려 압축해서 올립니다.
귀찮으셔도 압축 풀어 사용하세요~


추가사항!!!!
최신크롬, 파이어폭스에서 플래시 표시 문제가 있네요.
다운 받으신 파일 적용하실때 아해 코드 추가해주시면됩니다.
type='application/x-shockwave-flash' wmode='transparent' 
플래시파일이라는 표시와 배경화면 투명하게 해주는 추가 코드입니다.
위치는 embed과 src사이에 넣어주시면됩니다.

 파일에 수정해서 새로 올립니다.  파일명2012 붙은게 수정버전이에요.

onpc_counter2012.exe

onpc_counter2012.zip

카운터가 많을경우 잘리는 경우가 있네요. width값을 늘려서 어느정도는 가능하지만
몇천만 단위에서는 정렬 문제로 카운터 숫자가 가려지네요.
그래서 편법으로 카운터를 두줄로 만들어봤어요. 프렌즈님의 제보로 알게되었구요. 두줄이지만 적용 가능합니다.
 

onpc_html_ct.txt

사이드바에 들어갈 태그만 위 파일로 수정하시면됩니다.

onpc_simple.txt

기존 플래시 카운터에서 심플하게 플래시나 이미지를 사용하지 않는 카운터 버전을 추가합니다.
플래시 지원 아해 표시가 안되던 iOS등의 모바일 기기에서도 출력이 가능합니다.
디자인도 비슷하게 적용해봤지만 폰트문제로 조금은 차이가 납니다.블로그에 맞는 버전 둘중에 하나 골라 사용하세요.
(2012.03 추가)