Rev. 2.73

올초에 PHP로 만들어 공개했던 태그에 블로그 메타 사이트의 태그링크 달기의 자바스크립트 버전입니다. 요즘은 서버측 리소스 낭비를 조금이라도 덜기위해 PHP로 구현해 놓았던 것 중 자바스크립트로 가능한 것들을 하나, 둘씩 콘버전하고 있습니다. 역할은 종전의 것과 동일하며, 이올린의 태그서비스가 사라진 관계로 딜리셔스의 태그서비스로 변경하였습니다. 이 또한 Prototype 프레임웍 라이브러리를 기반으로 코딩되었습니다.

// Meta Tag Linker
var Metatags = Class.create();
Metatags.prototype = {
  initialize: function(array){
    $$(array).each(function(node){
      var pl = node.id.split('_')[1];
      $$('#tag_'+pl+' li').each(function(element){
        var href = element.down().href;
        if(href){
          var sites = ['technorati', 'allblog', 'eolin', 'delicious'];
          var url = href.split('/');
          var tag = url[url.length-1];
          for(var i=0; i < sites.length; i++){
            sites[i] = this.create(tag, sites[i]);
            element.appendChild(sites[i]);
          }
        }
      }.bind(this));
    }.bind(this));
  },
  create: function(tag, type){
    var link = document.createElement('A');
    var img = document.createElement('IMG');
    var icon, alt, href;
    switch (type){
      case 'technorati':
        icon='tn';
        alt='Technorati';
        href = 'http://technorati.com/tag/' + tag;
        break;
      case 'allblog':
        icon='ab';
        alt='Allblog';
        href = 'http://tag.allblog.net/' + tag;
        break;
      case 'eolin':
        icon='eo';
        alt='Eolin';
        href = 'http://www.eolin.com/tag/' + tag;
        break;
      case 'delicious':
        icon='de';
        alt='Delicious';
        href = 'http://del.icio.us/tag/' + tag;
        break;
    }

    img.src = '/images/t_' + icon + '.gif';
    img.alt = alt;
    link.href = href;
    link.appendChild(img);
    return link;
  }
};
// 사용하기
new Metatags('div.tag_label li');

- 지정한 영역에서 태그링크의 부모노드를 배열로 만든다.
- 배열에서 URL 정보가 없는 노드를 버린다.
- 생성할 블로그 메타 사이트의 배열을 만든다.
- 블로그 메타 사이트 수만큼 아이콘을 생성한다.

Comments

태터툴즈 1.0.x에는 방명록 또는 댓글 등에 패비콘을 표시하는 플러그인이 있다. 이 플러그인과 동일한 기능을 가진 자바스크립트 버전을 만들어 보았다. IE 및 파이어폭스 등에서 작동하며, 서버측 리소스를 차지하지 않는다. 태터툴즈 뿐만 아니라. 댓글을 남긴 방문객의 링크가 담긴 A태그에 이름이 싸인형태로 된 페이지에서 모두 사용할 수 있다. 단, Prototype 프레임웍이 로드되어 있어야 한다.

자바스크립트 :

//Visitor's Favicon Viewer
//Developer: 파이어준(FireJune) URL (http://firejune.com)

var Favicon = {
//Arrary element
align:function(array) {
$$(array).each(function(element) {
var node = element.lastChild;
var prepend = element.firstChild;
if(node.href != undefined && !prepend.firstChild) {
var url = node.href;
var img = Favicon.create(url, 'ico');
if(navigator.userAgent.indexOf("MSIE") != -1) img = Favicon.create(url, 'gif');
prepend.appendChild(img);
Event.observe(prepend.firstChild, 'error', function() {
Element.remove(prepend.firstChild);
});
}
});
},
//Create Favicon Image
create:function(url, type) {
var img = document.createElement('IMG');
if(url.substring(url.length-2, url.length-1) != '/') url = url.substring(0, url.length-1);
img.className = 'favicon';
if(type == 'ico') img.src = url + '/favicon.ico';
else img.src = url + '/index.gif';
return img;
}
}

- 지정된 배열을 만든다.
- URL 유무를 파악한다.
- 해당 URL의 ICO파일에 접근한다.
- IE에서는 ICO파일을 사용할 수 없으므로 index.gif에 접근한다.
- 작성자 이름앞에 IMG노드를 생성한다.
- 파일 수신에 오류가 발생하면 생성한 IMG노드를 제거한다.

사용하기:

Favicon.align('span.className'); // 클래스명 입력

- 클래스명은 방문자 링크가 있는 A태그의 부모 SPAN 또는 DIV태그의 클래스명이어야 한다.

※ 이 프로젝트는 프로젝트 위키에서 계속 이어집니다.다.

Comments

글 작성 완료시 테크노라티 오토-핑 테스트
코드 : inc_function.php 1574열부근

function sync_retune($num, $mode){
global $s_sync_url, $s_root_path;
$res2 = send_packet("http://www.allblog.net/MyPage/ManualRssSync.html", "rssurl=".$s_root_path."index.xml"); // 올블로그 실시간 싱크
$res2 = send_packet("http://www.technorati.com/ping/".$s_root_path."index.php?pl=$num",""); // 테크노라티 오토 핑
$data = "mode=".rawurlencode($mode)."&path=".rawurlencode($s_root_path."sync_view.php?pl=$num");
$res = send_packet($s_sync_url, $data);
if (strpos($res, "code>0 else return false;
}

테스트 환경
블로그툴 : 태터툴즈 클래식 1.0 OR
언어 : 한국어(UTF-8)
하드웨어: i686 i686
운영체제: Linux 2.4.22-2 i386
웹서버: Apache -OOPS Development Organization-
Apache/1.3.31 Server at firejune.com Port 80
PHP 버전: 4.3.10AnNyung
MySQL 버전: 4.0.21-log

성공!

테스트 결과
걸린 시간 : 글 공개로부터 3-4분
내용 전달 : 정상
한글 출력 : 정상
태그 정보 전달 : 정상

※ 태터툴즈 클래식에서 테크노라티를 사용하시는 분은 위 코드를 참조하여 설치하면 되겠습니다.

Comments