Rev. 2.73

얼마 전 whos.amung.us를 알게되어 설치하였습니다. 의외로 흥미로운 블로그 위젯이더군요. 이 위젯은 사용자의 어떠한 요구도 없이 간단한 코드의 복사와 붙이기만으로 자신의 블로그에 현재 접속중인 사용자가 어떤 글을 조회하고 있는지 모니터링 할 수 있게 해 줍니다. 여담입니다만, 이것을 만드신 Tom씨와 Chris씨는 MySpace와 연동하는 또다른 소셜 네트워크 서비스를 모델로 잡으셨나 봅니다. 음... 아무튼, 세세한 설치방법까지 알려드리면 마음이 상하실 듯 하여 그냥 넘어 가겠습니다.

단순히 카운트 이미지가 출력되는 것에 흡족하지 못해 굳이 블로그를 떠나지 않고도 현재 접속자 및 인기 글 목록 등을 확인하게 해 주는 위젯을 만들었습니다. 이름하여 "whos.amung.us Widget AjaxExtention"입니다. 태터툴즈 클래식의 XML 파서를 살짝 손봐서 whos.amung.us의 API와 연동되도록 하고 Ajax와 JSON을 이용하여 서버와 통신합니다. 우측 상단에 작은 아이콘을 클릭하면 이해가 빠르겠습니다. 늘 그랬듯이 Prototype.jsScriptaculous(effect.js, dragdrop.js)를 기반으로 제작되었으며, 최대한 커스터마이즈 없이 사용할 수 있도록..., 구상만 했습니다;;

widget.jpg

기능 :

- 키값 및 타입 자동 검출
- 카운트 이미지 실시간 갱신
- 유저, 인기 목록 실시간 갱신(활성화 필요)
- URI 및 메시지 한글화
- 팬시 다이얼로그 적용
- 파랑, 빨강, 검정 스킨 설정가능
- 애니메이션 토글
- 위젯박스 드래그 가능
- 위젯박스 리사이즈 가능(좌우, 선택기능)
- IE6, IE7, FF1.5, FF2.0, Opera9.x 지원(테스팅 완료)

다운로드:

http://firejune.com/javascripts/whosamungus.js (자바스크립트 파일)
http://firejune.com/stylesheets/dialog.css (스타일시트 파일)
http://firejune.com/addon/whosamungus.phps (PHP 파일)
dialog2.zip(이미지 파일)

설치방법:

1. 다운로드한 파일을 적절한 곳에 업로드하고 인클루드한다.
2. php파일의 경로는 기본으로 /ajax 폴더로 설정되어 있다.(변경시 js파일 수정 필요)
3. 코드 수정 : 기존에 추가했던 whos.amung.us 링크에 onclick 이벤트를 추가한다.

수정전 :

<a href="http://whos.amung.us/show/ydlkufli">
  <img src="http://whos.amung.us/widget/ydlkufli" alt="who's online" width="81" height="29" border="0" />
</a>

수정후 :

<a href="http://whos.amung.us/show/ydlkufli" onclick="Whosamungus.toggle(); return false;">
  <img src="http://whos.amung.us/widget/ydlkufli" alt="who's online" width="81" height="29" border="0" />
</a>

4. 커스터마이즈: whosamungus.js 파일을 열어 this.options의 주석을 참조하여 환경을 설정한다. 업데이트 주기, 위젯의 너비, 위치, 스킨, 초기 화면 등을 설정할 수있다. 건드리지 않아도 무방함. 단, key값과 img태그의 id를 심어 놓으면 자동 검출과정이 생략되어 눈꼽만큼의 성능 향상이 예상된다.

사실, 업무시간에 농땡이 치면서 재미삼아 만든녀석이라 적잖은 버그가 있을 것으로 생각됩니다. 혹시라도 리포트 주시면 족족 업데이트하도록 하겠습니다. 참고로 자매품인 include.jsextensions.js(라이브러리 확장)를 함께 사용하시면 더욱 좋습니다.(없으면 안돌아 갈지도...)

Comments

인터넷 사용자의 70퍼센트 이상이 정보검색에 목적을 두고 있으며, 70퍼센트 이상의 방문객이 검색 사이트를 경유하여 방문하고 있다. 이 블로그또한 예외는 아니다. 검색을 통해 방문한 사용자의 편의를 위해 키워드를 강조표시 하는 것을 자바스크립트를 사용하여 구현해 보자. 이것은 구글에 캐시된 문서를 조회할 때 검색어가 강조되는 기능과 동일하다. 방문객이 검색한 키워드를 강조표시하여 문서의 빠른 탐색이 가능하도록 하기 위함이다.

최초 검색엔진 키워드 하이라이트라는 포스트에서 소개한 바 있으며, Scott Yang씨의 코드를 응용한 것이다. 초기 버전은 UTF-8 유니코드만을 지원하였기에 그다지 쓸모가 없었다. 최근 EUC-KR을 UTF-8로 변환하는 Ajax로직을 추가하면서 네이버, 다음, 엠파스 등, EUC-KR기반의 검색 서비스를 통해 접속한 경우에도 키워드가 강조표시 되도록 하였으며, 마이너한 몇몇 버그를 수정하고 검색패턴을 추가하였다.

요구사항 : prototype.js 1.4 이상
다운로드 : http://firejune.com/javascripts/hilight.js

euckr2utf8.php euckr2utf8.php (1.5 KB)

삽입방법 : 다운로드한 hilight.js파일을 열어 this.options의 주석을 참조하여 환경에 맞게 커스터마이즈하여 업로드하고 아래의 코드를 window.onload 이벤트에 넣거나 페이지의 가장 하단에 삽입한다. euckr2utf8.php 파일 또한 적절한 폴더에 업로드한다.

// Find search engine referrer for keyword highlight
if(document.referrer){
  [ '.*search\\.naver.*',
    'search\\.empas.*',
    '.*search\\.daum.*',
    'search\\.paran.*',
    'eolin\\.com/search/',
    'firejune\\.com/search/',  // your blog search pattern

    'google.*',
    '.*search\\.yahoo.*',
    'search\\.msn.*',
    'search\\.live\\.',
    'search\\.aol.*',
    'ask\\.com',
    'altavista.*',
    'feedster.*',
    'search\\.lycos\\.',
    'alltheweb\\.',
    'technorati\\.com/.*',
    'dogpile\\.com/info\\.dogpl/search/web/'
  ].each(function(engine){
    engine = '^http://(www\\.)?' + engine;
    if(document.referrer.match(engine)){
      var script = document.createElement ( 'script' );
      script.type = 'text/javascript';
      script.src = '/javascripts/hilight.js'; // set your javascript path
      document.getElementsByTagName('head')[0].appendChild(script);
      script = null;
      throw $break;
    }        
  });
}

테스트 :
1. 구글 : 검색엔진 키워드 하이라이트
2. 네이버 : 검색엔진 키워드 하이라이트(검색결과가 참 골 때리네요)
3. 야후 : 검색엔진 키워드 하이라이트
4. 다음 : 검색엔진 키워드 하이라이트
5. 이올린 : 검색엔진 키워드 하이라이트

Comments

겸사겸사(이벤트 참여, Adsense와 벤치마킹, 소스분석)해서 초 경량으로 달아보았습니다. 아시다시피 올블로그의 올블릿2 부터는 관련글 노출 외에도 구글 Adsense처럼 맞춤 광고서비스가 물려 있습니다. 관련글 노출에는 그다지 흥미가 없어서 광고서비스만을 노출시켰습니다. 아직 보완해야할 점이 많아보입니다. 올블릿은 자신이 작성한 글과 관련있는 포스팅을 엮어주는 연결 매체로는 매우 훌륭한 블로그 위젯이나, 광고 매체로 전환함으로서 올블릿의 성격이 모호해진것 뿐만아니라 양질의 광고를 가져오지도 못하는 것처럼 보입니다. 올블릿의 보급율을 이용한 광고메체로의 방향 전환은 조금 실망스럽기도 합니다.

아무튼, 가장 시급히 해결해야 할 점은 속도입니다. 국내 서비스임에도 불구하고 외국에서 받아오는 구글 Adsense의 출력속도보다 느립니다. 이것은 곧 블로그 자체의 페이지 로딩속도가 느려지는 심각한 문제로 이어집니다. 개인적으로 연관글 검색관련 로직이 포함되어있기 때문에 느려진 것은 아닌지 의심하고 있습니다만, 저와 같은 블로그로 인한 광고수익만을 원하는 사용자를 위한 API가 별도로 생기거나 정확하게 분리되었으면 하는 바램입니다.

과연 얼마만큼의 수익창출이 이어질지 궁금하군요.

Comments