실시간 방문자 위젯 whos.amung.us - 스크립트 오류 없이 사용하기

 웹서핑을 하다보면 블로그 혹은 웹사이트에 실시간 방문자수를 표시해주는 위젯을 본 적 있으실 겁니다. 특히, whos.amung.us 에서 제공하는 위젯을 많이 보셨을텐데요.

출처 : whos.amung.us

> 블로그 실시간 방문자 위젯 : http://whos.amung.us/

 위 주소를 방문하시면 관련 위젯의 코드를 얻을 수 있습니다. 아래 이미지들을 참고하세요~

▼ whos.amung.us 에 방문하여 페이지 아래쪽을 보면 아래 이미지와 같은 메뉴가 보일겁니다. 그 녀석을 클릭!

▼ 그럼 다양한 위젯들이 표시될텐데, 원하는 형태를 선택하면... 아래와 같이 해당 되는 위젯의 코드가 부여됩니다. 이 녀석을 이용하여 자신이 원하는 위치에 실시간 방문자수를 체크해주는 위젯을 달 수 있습니다.

 이제부터가 이 포스팅을 작성한 주 목적입니다. 위와 같이 제공되는 코드를 단순히 복사해서 사용하면 정말 편리하긴 합니다. 그런데 파이어폭스, 크롬 등 타 브라우져에서는 그런 문제가 없는 듯 한데, 유독 인터넷 익스플로러(IE)에서는 위 코드를 그대로 사용할 경우 아래처럼 스크립트 오류가 표시됩니다. 물론 오류창이 새창으로 표시되지 않는 경우도 있긴 하지만, 상태 표시줄에서 분명 오류 느낌표를 확인할 수 있을 겁니다.

 테스트를 해보니 인터넷 익스플로러 6 부터 8 까지 모두 오류가 발생하더군요. 사실 이 문제를 발견한 건 예전 스킨을 쓸 때 였는데... 코드를 수정해서 사용하다가 현재 블로그 스킨으로 수정하면서 아무 생각없이 whos.amung.us 에서 부여하는 코드로 위젯을 달고는 우연찮게 스크립트 오류창을 보게 되었습니다. 그래서 문득 떠올라서 IE 에서도 스크립트 오류 없이 whos.amung.us 위젯을 사용할 수 있게 그 코드를 알려드릴까 합니다 ^^;;

IE 에서 스크립트 오류없이 whos.amung.us 위젯 사용하기

 사실 뭐 코드 자체를 응용하는 방법은 간단합니다. whos.amung.us 에서 예~~전에 제공하던 소스를 활용하는 방법인데요. 분명 같은 위젯을 달고 있는데 어떤 사이트에서는 IE 에서 스크립트 오류를 표시하지 않길래 살펴보다가 착안한 방법입니다 ^^

 위에서 whos.amung.us 사이트에서 위젯 코드를 얻을 수 있는 방법을 소개한 이유가 이것 때문인데요. 요즘 whos.amung.us 에서 제공하는 코드의 형태는 아래와 같습니다. 아래 코드는 Color Me 위젯에서 제공하는 코드로... 색상만 제 블로그 사이드바에 달린 것처럼 변경한 건데요. 사실 whos.amung.us 사이트에서 코드를 얻는 이유는 [사이트 키] 부분 때문입니다.

 사이트 키?? 아래에 임의로 123456789 라고 적어둔 부분입니다. 참고하세요 ^^

<script type="text/javascript" src="http://widgets.amung.us/colored.js"></script>
<script type="text/javascript">WAU_colored('123456789', 'ffffff000000')</script>

 다른 건 볼 필요도 없습니다. [사이트 키] 부분과 'ffffff000000' 로 표시된 [색상 코드] 부분만 참고하시면 되는데요. 이 2가지 코드를 아래 소스 코드의 관련 부분에 대입시켜주기만 하면 됩니다. 그리고는 원하는 위치에 적용하면 끝!
 아래 코드는 그 아래 메모장에 그대로 있으니 드래그가 안되서 코드를 사용하기 곤란하신 분은 메모장을 다운로드 받아서 적용하시면 됩니다.

<div align="center"><a href="http://whos.amung.us/stats/123456789/">
<img src="http://whos.amung.us/cwidget/123456789/ffffff000000.png" width="81" height="29" border="0" title="Click to see how many people are online" alt="실시간 방문자" /></a></div>

 빨간색으로 표시된 123456789 부분이 사이트 키, 노란색으로 표시된 ffffff000000 부분이 색상 코드입니다. 이 색상코드 중 앞쪽의 ffffff 는 색상 코드에서 흰색을 의미하는데, 위젯의 색깔을 나타내고, 뒤쪽의 000000 부분은 색상코드에서 검정색인데 위젯 속의 글자색을 표시합니다. 이 원리를 알면 원하는 색상으로 위젯을 구성할 수 있겠죠?

 

whos.amung.us 코드.txt

 위 코드를 이용할 경우 웹표준 유효성 검사에서 에러로 표시되는 건 아닐까 생각하신 분들은 걱정마세요. 아무 문제 없습니다 ^^ 실시간 방문자를 표시해주는 위젯을 달았는데 스크립트 오류를 뿜어내는 경우 혹은 앞으로 위젯을 추가할 생각이라면 위 방법을 적용해보세요~ 본인이 파이어폭스나 크롬 등을 이용한다고 해도 방문자는 대부분 IE 라는 사실 ^^;;; 이 포스팅은 여기까지입니다.