블로그 이미지
JEEN

서울에 사는 꽃청년의 IT찌질모험기

Rss feed Tistory
IT/Tips 2010.11.22 13:40

블로그 엔트리에 읽는 데 걸리는 시간을 표시

  예전에 lifehacker 인가에서 본 적이 있었는데, 블로그 엔트리를 읽기 전에 "이 블로그 엔트리를 다 읽는 데 몇분이 걸립니다" 라는 안내문구를 표시함으로 블로그 외부유입이 늘어났다 라는 도시전설이 있었습니다. 소스를 찾아보려고 URL 을 뒤져도 안나오네요.
  
  실제로 이를 적용한 사이트가 몇 군데 있는데, 그 중 하나가 제가 자주 들르는 일본의 기술평론사 홈페이지입니다.


  이 페이지를 보면 "この記事を読むのに必要な時間:およそ 5.5 ~ 10.5 分"이라고 되어 있죠. 5.5분 - 10.5분이라면 뭐 물론 개인차에 따르겠지만요;;;
  아무튼 그 전설을 듣고나서 티스토리에서는 어떻게 쓰면될까 했는데, 결국은 js 에서 할 수 밖에 없었습니다. 뭐 플러그인이라도 제공해주면 모르겠지만... 

  대충 깨작여볼까 하다가 그냥 먼저 적당한 검색키워드를 통해서 구글해본 결과 나름 간단하게 구현한 예제가 있어서 소개합니다.


  여기에는 html 길이를 기준으로 계산을 했는데, 이걸 text 로 고쳐서 티스토리에 올려봤습니다.


  그리고 위에서 보실 수 있듯이 이렇게 추가를 해주었더랬죠. :-)
  일단 위의 js 코드에서 제시한 분당 800자의 속도에 대해서는 어떤 기준인지 잘 몰라서 일단 그대로 써봤습니다. 어차피 일본어 읽는 거랑 한글 읽는거랑 비슷하겠거니...

<script type="text/javascript">
jQuery.fn.ReadTime = function(conf){
  var txtLen = $(this).text().length;
  var time = Math.floor(txtLen/conf.spd);
  var msg = (time>0)? time : 1 ;
  $(conf.timeTxt).text(msg);
  return this;
};
$(function(){
  $('.article').ReadTime({
    timeTxt : ".readtime",
    spd : 800
  });
});
</script>

  아무튼 위의 jsdo.it 에서 사용한 코드를 그대로 가지고 왔습니다. GeckoTang 씨에게 감사의 말씀을 전하며...
  위의 코드를 티스토리 [스킨] -> [HTML/CSS 편집] 에서 HTML/CSS 편집 란의 <head>...</head> 안에 붙여넣습니다. 

  그리고 안내문을 표시하기 위해서... 원하시는 장소에

<span>아래의 블로그 기사는 <span class="readtime"></span>분 안으로 읽으실 수 있습니다.</span>

  를 추가합니다. 자세한 내용은 소스보기를 통해서 확인해보세요.

  아무튼 뭐 대략적인 숫자를 내던지는데, 체감속도에 맞는지 어떤지는 모르겠습니다. 개인차가 있겠고, 그 범위를 계산해서 나중에 기회가 생기면 더 만지작거려서 고쳐나가면 되지 않을까 싶네요.
신고
TOTAL 474,069 TODAY 23

티스토리 툴바