블로그story2009/05/19 23:15

티스토리 블로그에 트위터 달기

트위터... 가 무엇인지 설명까지 하는건

너무 포스팅이 길어질듯하여....

혹 트위터에 대해서 알고 싶다면... 아래 링크를 보면 될듯하다.


그리고,

블로그에 트위터를 추가하는 원본은 아이팟터치 어플에 대한 많은 포스팅을 해주시는 latte님의 아래 글...

그리고,
이제 본론이다.

라떼님의 글이 작년에 작성되었기에 지금은 약간 트위터쪽 함수가 바뀐듯하다.

우선 트위터에 가입되어있어야 하고, 위젯을 얻는곳은 아래..

로그인 하고 들어가면,
플래쉬 버전과 HTML 버전을 고를수가 있다. 난 HTML 버전을 추가했다. 
(플래쉬버전도 크기값 조절하면 꽤 괜찮아보인다;;)


아래 트위터에서 제공하는 HTML 이다. 
이것을 티스토리 관리자페이지 스킨>사이드바 에서 HTML배너 출력에 넣으면 된다.

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/knijeong" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/knijeong.json?callback=twitterCallback2&amp;count=5"></script>

기본HTML을 그대로 써도 되지만...
라떼님글 처럼 함수를 바꿔서 한글로 나오게 바꾸었다.

<script type="text/javascript">
function twitterCallback2(C) {
 var A=[];
 for(var D=0;D<C.length;D++) {
  var E=C[D].user.screen_name;
  var B=C[D].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(F){return'<a href="'+F+'">'+F+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(F){return F.charAt(0)+'<a href="http://www.twitter.com/'+F.substring(1)+'">'+F.substring(1)+"</a>"});
  A.push("<li><span>"+B+'</span> <a style="font-size:85%" target="_blank"  href="http://twitter.com/'+E+"/statuses/"+C[D].id+'">'+relative_time(C[D].created_at)+"</a></li>")
 }
 document.getElementById("twitter_update_list").innerHTML=A.join("")
}
function relative_time(C){
 var B=C.split(" ");
 C=B[1]+" "+B[2]+", "+B[5]+" "+B[3];
 var A=Date.parse(C);
 var D=(arguments.length>1)?arguments[1]:new Date();
 var E=parseInt((D.getTime()-A)/1000);
 E=E+(D.getTimezoneOffset()*60);
 if(E<60){
  return"방금 전"
 }else{
  if(E<120){
   return"약 1분전"
  }else{
   if(E<(60*60)){
    return(parseInt(E/60)).toString()+"분전"
   }else{
    if(E<(120*60)){
     return"약 한시간전"
    }else{
     if(E<(24*60*60)){
      return"약 "+(parseInt(E/3600)).toString()+"시간 전"
     }else{
      if(E<(48*60*60)){
       return"어제"
      }else{
       return(parseInt(E/86400)).toString()+"일 전"
      }
     }
    }
   }
  }
 }
};
</script>
<div id="twitter_div">
<a href="http://twitter.com/knijeong" id="twitter-link" target="_blank"><h3 style="margin-top:5px;padding-bottom:3px;border-bottom:1px solid #DCDCDC;text-indent:10px;">kni's twitter</h3></a>
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/knijeong.json?callback=twitterCallback2&amp;count=5"></script>

blogger.js 에서 twitterCallback2만 복사해서 영문을 한글로 바꾸기만 한것.. 일뿐. (좀더 신경써서 줄바꿈도 하고 띄어쓰기도 해서 바꿀까도 했지만, 귀차니즘때문에 걍 그대로 사용)
원본과 많은 차이는 없다.

혹 복사해서 사용하시는분들은 knijeong 부분만 본인의 트위터 아이디로 바꾸면 된다.

추가로.. 지금의 스킨의 박스 스타일을 사용하기 위해서... 아래 코드로 마무리하면 끝.

<div class="boxTopR">
<div class="boxTop-left"></div>
<div class="boxTop-mid"></div>
<div class="boxTop-right"></div>
</div>
<div class="boxMidR">
...위 코드 들어가는 부분...
</div>
<div class="boxBtmR" style="padding-bottom:0px;">
<div class="boxBtm-left"></div>
<div class="boxBtm-mid"></div>
<div class="boxBtm-right"></div>
</div>


Ps. 역시, 글을 쓰는건 어렵다.. 트위터도 어렵고;;

Ps2. 윽.. 익스6에선 코드가 제대로 안보이넹-_-;; 대략 고침;;


저작자 표시 비영리 동일 조건 변경 허락
Posted by kni
TAG , , ,
Trackback 3 Comment 1

TRACKBACK http://kni.pe.kr/trackback/9 관련글 쓰기

  1. 블로그에도 Twitt.. Twitter z  삭제

    2009/05/29 16:46TRACKBACK FROM Allure..s

    Title로 할게 없어서 'z' 라고 이유는 z = ㅋ simple is the best!! 깔끔하니 이쁘구만 +_+ 설치하는 방법은 그니님 글 참조 <티스토리 블로그에 트위터 달기> 어려운거 없이 잘 설치 되네요^^ 즐거운 주말 되시길..

  2. 프로필위젯, 트위터위젯 설치  삭제

    2009/05/30 16:32TRACKBACK FROM kini'n creations

    기본적으로 이 블로그는 '폐쇄형'을 지향하지만, 남들 하는 거 보고 언제 한 번 설치해야지 하다가 시간이 난 김에 프로필위젯과 트위터 위젯 시험 삼아 설치. 트위터 위젯은 어디다 둘까 조금 고민했는데 아무래도 이 블로그에 포스트를 올리는 것보다 한 줄 쓰는 게 더 빠를 것 같아서 프로필 위젯 바로 아래에다. • 프로필위젯, 아쉬운 점 스킨을 선택하라고 해서 블로그 디자인과 통일성 있는 것을 찾으려 했지만 쉽지 않았다. 이것도 딱히 마음에 드는 건 아..

  3. 트위터에서 필요한 매너들  삭제

    2009/05/30 23:18TRACKBACK FROM Homo Ludens

    저는 3월 17일부터 트위터를 시작해서 이제 사용한지 2달 반정도 되었네요. 그리 긴 기간은 아닙니다만, 요새 트위터에 입문하시는 분들이 꽤 있어서 몇가지 매너들에 대해 설명하려고 합니다. 여기서 이야기하는 내용들은 '필수'는 아닙니다만, 지켜주신다면 센스있는 트위터유저가 될 수 있을겁니다:) 1.트위터 사용 전에 다른분들의 사용법 읽기 트위터에 대해 다른분들이 아주 잘~ 써주신 사용법들이 있습니다. 꼼꼼히 읽어보신다면 적응이 빠를겁니다+_+ 트위터..

댓글을 달아 주세요

  1. 누마루

    글 잘보고 블로그에 트위터 달았습니다.

    2009/08/16 00:25 [ ADDR : EDIT/ DEL : REPLY ]