올초에 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