Firejune

올초에 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 정보가 없는 노드를 버린다.
- 생성할 블로그 메타 사이트의 배열을 만든다.
- 블로그 메타 사이트 수만큼 아이콘을 생성한다.