현재 접속자 현황 - whos.amung.us

Who is among us?!

 

오늘 얼마나 놀러들 오셨나~ 이번주는 방문자가 몇이나 되나~ 늘 관심이 가는 내용이죠?

 

그러나 이런것 외에도...

 

지금 당장 롸잇나우 몇명이나 내 블로그를 보고 있지?!!

이런게 궁금할 때 쓸 수 있는 무료 서비스(위젯)가 있어 소개합니다.

 

whos.amung.us - free real-time stats!

가입도 필요 없고, 설치도 코드 하나 받아서 스킨에 넣어주면 끝납니다.

(제 블로그 하단 푸터에 추가된 거 보이시나요?)

 

이용방법

1. whos.amung.us/ 에 접속
2. 우상단 메뉴에서 </>GET CODE 를 클릭하거나 페이지 하단으로 이동해서 </>GET STARTED 클릭
   (또는 whos.amung.us/getstarted/ 로 바로 접속)
3. 제공되는 Dynamic | Small | Original | Colored | Tab | Map 6개중 원하는 스타일 선택 (전 small 사용중)
4. 선택한 스타일에 따라 색상/크기/위치 등 추가 설정 완료 후 Get Code 를 눌러 필요한 코드 생성
5. 생성된 코드를 스킨의 원하는 곳에 복사 후 붙여넣기!
   (사이드 바에 노출할거면 이때 html출력 플러그인을 써도 편함)

아래는 제가 스킨의 푸터 카피라이트 부분에 설치한 소스 예시입니다.

<p class="copyright"><s_if_var_footer-text-2></s_if_var_footer-text-2>
  <span id="amungus" style="position: absolute; margin-left: 10px;">
      <script id="_waukhl">var _wau = _wau || []; _wau.push(["small", "고유식별번호", "khl"]);</script><script async src="//waust.at/s.js"></script>
  </span>
</p>

3번줄이 생성된 코드인데요, 고유식별번호는 각자 다를거고요,

복사한 코드를 <span id="amungus"> ... </span> 로 감싸주었습니다. (왜 span 으로 덮었는지는 아래에 추가 설명이...)

 

암튼, 이렇게 하면 동접자 카운터 설치가 끝납니다.

 

설치된 카운터 클릭 시 상세조회 페이지로 이동하고 그 곳에선 더 많은 정보를 볼 수 있습니다.

(그보다 더 많은 정보를 원한다면 유료 가입을... 그러나 무료로도 충분히 많은 기능을 제공하고 있네요.)

 

추가 팁

카운터 클릭 시 현재 페이지 이동이 아닌 새창으로 띄우고 싶다면 아래처럼 꼼수를 적용할 수 있습니다.

document.getElementById('amungus').addEventListener('DOMNodeInserted', function() {
	this.getElementsByTagName('div')[0].onclick =	null;
	this.getElementsByTagName('div')[0].onclick = function() {
		window.open("https://whos.amung.us/stats/"+_wau[0][1]+"/"); 
	}
});

단, 카운터를 설치 할 때 생성된 코드가 <span id="amungus"> ... </span> 로 감싸져있어야 합니다.

 

카운터가 설치되면 body 하단에 동적으로 트래킹을 위한 안보이는 1픽셀짜리 이미지 몇개가 추가됩니다.

그런데 이게 페이지 스타일/구조에 따라 페이지 하단에 불필요한 여백을 한줄 만들어낼 수 있습니다.

 

이럴땐 아래 스타일을 페이지에 추가하면 깔끔해집니다.

body > img {
    position: absolute;
}

(페이지 실제 내용은 대부분 container 로 감싸있을 것으로 가정했을 때, body 직속 이미지에 적용되는 스타일입니다.)