사용 방법

1. <head></head> 사이에 다음 코드를 넣습니다.
<script type="text/javascript">

var t_username = 'username'; // username 대신 여러분의 아이디를 넣으세요
var t_count = 5; // 한번에 나타낼 갯수를 적어 넣으세요

function throwHTML (obj){
  var statusHTML = [];
  for (var i=0; i<obj.length; i++){
    var username = obj[i].from_user;
    var status = obj[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'" target="_blank">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'" target="_blank">'+reply.substring(1)+'</a>';
    }).replace(/\B#([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/search?q=%23'+reply.substring(1)+'" target="_blank">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a class="twt_time" href="http://twitter.com/'+t_username+'/statuses/'+obj[i].id_str+'" target="_blank">'+relative_time(obj[i].created_at)+'</a> <span class="twt_slash">/</span> <a class="twt_reply"  href="http://twitter.com/?status=@'+t_username+'%20&in_reply_to_status_id='+obj[i].id_str+'&in_reply_to='+t_username+'" target="_blank">reply</a></li>');
  }
  return statusHTML.join('');
}

function twitterCallback(twitters) {
  document.getElementById('twitter_update_list').innerHTML = throwHTML (twitters);
}
 
function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);   if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return 'yesterday';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

function getRecentTweets(){
  var script = document.createElement('script');
  var head = document.getElementsByTagName('head')[0];
  script.type = 'text/javascript';
  script.src = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+t_username+'&include_rts=true&count='+t_count+'&callback=twitterCallback';
  head.insertBefore(script, head.firstChild);
}

if (window.addEventListener) {
  window.addEventListener("load", getRecentTweets, false);
} else if (window.attachEvent) {
  window.attachEvent("onload",getRecentTweets);
} else {
  window.onload=getRecentTweets;
}

</script>





2. 스크립트 중에서 맨 위에 t_username, t_count 부분을 수정해 주셔야 합니다.
var t_username = 'username'; // username 대신 여러분의 아이디를 넣으세요
var t_count = 5; // 한번에 나타낼 갯수를 적어 넣으세요



3. 최근 트윗을 위치하고 싶은 곳에 다음 태그를 넣습니다.
<div id="twitter_update_list" class=conts></div>
 


4. CSS는 입맛에 맞게 수정하시면 됩니다.
#twitter_update_list li           { list-style:none; font-family:verdana;color:#999;padding:0;margin-top:5px;line-height:15px;position:relative;left:-1px;}
#twitter_update_list .twt_slash          { font-size:85%; color:#777;}
#twitter_update_list .twt_time          { font-size:85%; color:#666;}
#twitter_update_list .twt_time:hover          {color:#2F7FBD;}
#twitter_update_list .twt_reply          { font-size:85%; color:#666;}
#twitter_update_list .twt_reply:hover          {color:#2F7FBD;}

* 수정하실 부분
twitter_update_list = 트위터 최근 글이 입력되는 DIV의 ID를 의미합니다.
twt_slash = 슬래시 (/) 부분의 CSS에 관여합니다.
twt_time = 시간 표시 부분의 CSS에 관여합니다.
twt_reply = 'reply' 부분의 CSS에 관여합니다.



적용된 모습




수정된 부분

1. 이전 버전에서는 최근 5일간의 트윗만 보여주던 것을 시간에 상관없이 보여주도록 수정했습니다.
2. 코드를 단순화 했습니다.
3. 해쉬태그를 적용했습니다.
4. '1 day ago' 대신 'yesterday'로 표시합니다.



파일 다운로드


메인 자바스크립트 코드를 포함한 js 파일입니다.
긴 코드를 직접 노출하기 싫다면, 파일을 받아 여러분의 계정에 올리고,
<script type="text/javascript" src="nicatio_gettwt.js"></script>
위 자바스크립트 코드를 <head></head> 사이에 넣으시면 됩니다.
(단, 여러분이 파일을 넣은 위치에 따라서 src 이하를 수정하셔야 합니다.)



주의 사항

자신의 트윗을 임의로 지우는 경우 삭제된 트윗으로 인해 화면에 원하는 트윗 수 만큼 표시되지 않을 수 있습니다.
예를 들어 5개를 표시하고 싶은데 4개로 표시됩니다. 하지만 수 분이 지나면, 다시 5개로 정상 표시됩니다.

한번에 너무 많은 양을 표시하게 될 경우 시간도 오래걸릴 뿐 아니라
타임오버 되어 제대로 불러올 수 없을 수도 있습니다.

현재 IE 8.0.6001, Google Chrome 9.0.597, Mozilla FireFox 3.6.13 에서 테스트 완료했습니다.
이외의 문제점이나 궁금한 점 있으시면 리플로 알려주시면 수정하겠습니다.
유용하게 사용하시기 바랍니다.

Posted by Nicatio

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 프로그램어려워~ 2011.04.05 19:22 신고  수정/삭제 댓글쓰기

    좋은 정보 감사합니다.
    혹시 페이스북도 이런식의 변경이 가능한가요?
    페이스북을 이렇게 해야하는데 제실력으로는 할수가 없어서요 흑.

    • Nicatio 2011.04.05 21:03 신고  수정/삭제

      페이스북에서도 API를 제공한다면 가능할지도 모르겠습니다.
      자세한 것은 저도 따로 알아보질 않아서 ^^

  3. 츄릅 2011.04.12 15:22 신고  수정/삭제 댓글쓰기

    트위터 api호출하는부분이요 시간당 제한이 있더라구요 150회로 이거 해결법 혹시 아시나요?

    • Nicatio 2011.04.12 17:26 신고  수정/삭제

      그런 제한이 있군요.
      제가 올려놓은 자료는 OAuth를 쓰지않기 때문에 해결이 불가능하고
      OAuth는 트위터측에 어떤 서비스 내용으로 API를 사용할지에 대해
      알려주고 얻을 수 있는 것으로 압니다
      그 이상은 제가 아는것이 없네요
      확실한건 그냥 자바스크립트 수준으로는 어려워보입니다

  4. 파싱은어려워 2011.05.04 14:59 신고  수정/삭제 댓글쓰기

    function twitterCallback(twitters) {
    document.getElementById('twitter_update_list').innerHTML = throwHTML(twitters);
    alert(innerHTML);
    }

    이부분에서 twitters 안에 들어있는 요소는 어떤거죠....?
    제가 원하는 정보만 불러오고 싶은데
    'profile_image_url' 이런것 처럼 데이타 정보가 어떤게 있는지 알려주시면 안될까요.... ? ㅜ ㅜ

    • 파싱은어려워 2011.05.04 17:53 신고  수정/삭제

      ........그걸봐도.....흐읅...........
      아이디를 가져오고 싶은데 ............
      어떤식으로 어떻게 가져오는건지 ...알구 싶어요..ㅜㅜ

    • Nicatio 2011.05.04 22:05 신고  수정/삭제

      http://api.twitter.com/1/statuses/user_timeline.json?screen_name=여기에님아이디&include_rts=true&count=5
      이 주소로 들어가보시면 거기에 답이 있습니다

    • Nicatio 2011.05.04 22:18 신고  수정/삭제

      알려드린대로, 소스코드 53번째 줄을 보시면,

      http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+t_username+'&include_rts=true&count='+t_count+'&callback=twitterCallback

      이렇게 되어있습니다.
      이렇게 하면 22번째 줄 처럼 콜백함수인

      function twitterCallback(twitters)

      을 통해 트위터 내용을 twitters라는 변수에 Object형태로 받아올 수 있습니다.
      twitters는 뭐 obj나 kkkkk등등 님 맘대로 바꿀 수 있는 것이고,
      저는 이 상태에서 다시한번 throwHTML을 호출합니다.

      9번째 줄에서
      var username = obj[i].from_user;

      이렇게 되어있습니다. 이 부분이 사용자 이름을 캐치하는 부분이고,
      이미 우리가 받아온 내용, 그러니까
      위 주소로 들어가보면 볼 수 있는 내용에 이미 포함된 것입니다.
      그 알 수 없는 영어들(이라고 생각되는 것) 중에서 from_user를 찾아보시면 있을 겁니다.

      지금은 없군요. screen_name으로 바뀐 것 같습니다.
      어차피 제가 쓰는 코드에서는 쓰지 않는 코드라서 지워도 동작에는 상관 없는데,
      제가 아직 지우지 않았던 부분이네요.

      아무튼,
      Object구조를 이해하시면 어떻게 이런 데이터들을 끄집어 낼 수 있는지를 알 수 있는데,

      var a:Object = {a:333, b:444 c:{d:555, e:666}};

      와 같은 구조라면
      a.b를 찍어보시면 444 가 나올 것이고
      a.c.d를 찍어보시면 555가 나옵니다.

      이해가 되시는지?
      지금 불러오는 건 이런 식의 거대한 Object입니다.

  5. 페이스북 2011.05.16 15:37 신고  수정/삭제 댓글쓰기

    페이스북은 파싱을 어떻게 해야하나요 ..? ㅜㅜ
    트위터는 님 덕분에 했는데...
    페이스북은 API를 봐도 로그인을 해야지만 가져올 수 있던데..
    혹시 아시나해서 글남겨 봅니다 ㅠㅠ

    • Nicatio 2011.05.16 17:51 신고  수정/삭제

      페이스북은 제가 아직 다뤄보지 않았습니다.
      로그인이나 권한을 얻어야만 받아 올 수 있다면,
      그러한 권한을 어떻게 받을 수 있는지 찾아보시고,
      API에서 리턴하는 내용이나 형식이 어떤 것인지 파악해서 그에 맞게 코딩을 하시면 됩니다.

      제가 아는 것이 없어 원론적인 이야기만 드렸네요.

  6. inside525 2011.06.15 11:17 신고  수정/삭제 댓글쓰기

    트위터 아이디만 가지고 profile_image_url 가져오고 싶은데 어찌해야될지....

  7. 고맙습 2011.06.16 01:17 신고  수정/삭제 댓글쓰기

    몇초간격으로 스크롤은 안되는지요?? 트윗위젯처럼요...

  8. quick 2011.06.28 09:40 신고  수정/삭제 댓글쓰기

    자바스크립트로(jQuery) 트위터 oAuth구현을 해야 하는 무엇을 어찌 해야 하는지여...
    도움 부탁합니다...

    • Nicatio 2011.06.28 21:48 신고  수정/삭제

      oAuth를 구현한다는 것 보다는 oAuth를 얻어서 그걸 이용하는 거라고 보시면 되는데요.
      위에서 다룬건 그냥 자바스크립트 수준이구요,
      그 이상의 것은 다뤄보지 않아 정확히 설명드리기가 어렵네요.

  9. NaRaan_i 2011.08.15 07:36 신고  수정/삭제 댓글쓰기

    좋은 정보 감사합니다. 혹시 멘션은 안나타게 하는 방법은 있나요??

    • Nicatio 2011.08.16 20:14 신고  수정/삭제

      script.src = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+t_username+'&include_rts=true&count='+t_count+'&callback=twitterCallback';

      이 부분을

      script.src = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+t_username+'&include_rts=true&count='+t_count+'&callback=twitterCallback&exclude_replies=true';

      이렇게 바꿔주세요.

      다만 불러오는 트윗 중 멘션에 해당하는 트윗을 제외시키는 방식이기 때문에,
      최근 n개의 트윗이 멘션인 경우 트윗 목록이 하나도 표지되지 않을 수 있습니다.

  10. 하얀별 2011.08.20 14:16 신고  수정/삭제 댓글쓰기

    페이스북과 구글 플러스용 위젯도 만들어 주세요! ^^;;

    • Nicatio 2011.08.21 18:38 신고  수정/삭제

      시간이 된다면 만들어 보겠습니다.
      일단은 그쪽에서 API 지원을 해줘야 겠네요.

  11. UVMAX 2011.08.31 01:39 신고  수정/삭제 댓글쓰기

    안녕하세요?

    최근부터 익스상에서 이 위젯 출력이 안나오는거같습니다~
    잘쓰고있었는데.. 확인좀 부탁드릴게요 ㅠ_ㅠ;
    저는 익스9를 쓰고있습니다.

    제 홈페이지에 달아놓은게 출력이 안되길래 이상있나 해서 와봤는데
    Nicatio님 홈피에도 출력이 안되있네요..

    크롬과 아이폰으로 접속해보니 제대로 나오는것 같은데 익스에서만 이러네요.

    • UVMAX 2011.08.31 02:29 신고  수정/삭제

      지금 일단 Nicatio님의 1.0버전으로 수정하니
      출력이 되네요. 2.0버전은 안됩니다ㅎㅎ;

      1.0버전은 잘되는거 같으니 큰 문제 없으면
      이걸 사용하면 되겠..지만 왠지 버전 다운(?)한것같은 느낌이^^ㅋ

    • Nicatio 2011.08.31 14:08 신고  수정/삭제

      안녕하세요. 관심 가져 주셔서 감사합니다.
      MS측에서 보안상의 이유로 어떤 패치가 된 이후로 이 문제가 발생하고 있습니다.
      이 문제에 대해서 1주일 정도 전부터 외국에서도 issue들이 올라오기 시작했습니다.
      여러가지 해결책을 모색중인데,
      현재로서는 클라이언트 단에서 자바스크립트 만으로는 해결이 불가합니다.

      트위터 위젯 (http://twitter.com/about/resources/widgets/widget_profile)
      이것 역시 현재 IE9에서 제대로 출력이 되지 않고 있습니다.

      현재 트위터 측에서 자체적으로 문제 해결 방법을 찾고 있다고 하니,
      기다려 보는 수 밖에는 없을 것 같습니다.

    • UVMAX 2011.08.31 14:19 신고  수정/삭제

      아하~ 그렇군요~
      기다려봐야 겠네요 ^^
      당분간은 1.0쓰고있어야 겠군요.
      감사합니다.ㅎㅎ

  12. channi84 2011.09.21 01:13 신고  수정/삭제 댓글쓰기

    안녕하세요 소스 너무 잘 사용하고 있습니다~ 킹왕짱 이시네요 ㅎ
    근데 한가지 여쭤볼게 있는데요
    지금 usertimeline으로 불러오는데요 여기서 특정글에 대한 rt나 reply목록을 나오게도 할 수 있는지 궁금합니다- ㅠ_ㅠ) 답변 매일매일 체크체크 할게요~ 수고하세요

    • Nicatio 2011.09.21 20:05 신고  수정/삭제

      RT라는 것이 "RT @someone" 형태로 내용이 추가된 상태로 RT된 것이나
      reply 목록의 경우 나오게 하는 것이 가능하긴 합니다.
      그렇게 되면 일단 user_timeline.json 로는 힘들고 Twitter search API를 사용해야합니다.
      트위터 홈페이지를 직접 가보면 검색 기능이 있는데
      거기서 @someone 을 검색하는 것과 거의 같습니다.
      약간 다른 점은 각각의 트윗 하나하나마다 존재하는 id값을
      RT 또는 멘션된 id값과 비교해서 같은 것만 표시해 줘야 합니다.
      Search API의 경우에는 최근 일주일 이내의 트윗 목록만 볼 수 있습니다.
      따라서 페이지에 표시하고 싶은 '특정 글'을 1주일마다 매번 갱신해 줘야 합니다.

      어찌됐든 가능하지만 코딩을 해야하구요.
      지금은 제가 시간이 여유치 못해서 코딩까지 해드리기는 힘들 것 같습니다.

  13. Nicatio 2011.09.30 01:29 신고  수정/삭제 댓글쓰기

    새로운 버전으로 업데이트 되었습니다.
    참고하시기 바랍니다.

    http://blastic.tistory.com/152

  14. 감사합니다. 2012.05.31 22:11 신고  수정/삭제 댓글쓰기

    rpp=1 로 사용하여 한개 글만 뿌리고 있습니다.

    근데 그 글에 리플 달아 버리면 리플단 글이 나와 버립니다.

    리플 글은 무시하고 원래 글이 나오게 할 수는 없나요 ?

    • Nicatio 2012.06.01 00:11 신고  수정/삭제

      script.src = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+t_username+'&include_rts=true&count='+t_count+'&callback=twitterCallback';

      이 부분에서

      script.src = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+t_username+'&include_rts=true&count='+t_count+'&callback=twitterCallback&exclude_replies=true';

      로 수정하시고

      for (var i=0; i<obj.length; i++){

      이 부분을 찾아서

      for (var i=0; i<1; i++){

      으로 수정하세요

      그리고 t_count = 1; 으로 된 부분을

      1보다 큰 숫자로 하시면 됩니다

  15. 2012.10.12 12:11  수정/삭제 댓글쓰기

    비밀댓글입니다

    • Nicatio 2012.10.12 13:23 신고  수정/삭제

      함수를 지우게 되면 에러가 나거나
      다른 javascript가 제대로 동작하지 않을 수 있습니다.

      statusHTML.push('<li><span>'+status+'</span> <a class="twt_time" href="http://twitter.com/'+t_username+'/statuses/'+obj[i].id_str+'" target="_blank">'+relative_time(obj[i].created_at)+'</a> <span class="twt_slash">/</span> <a class="twt_reply" href="http://twitter.com/?status=@'+t_username+'%20&in_reply_to_status_id='+obj[i].id_str+'&in_reply_to='+t_username+'" target="_blank">reply</a></li>');

      이 한 줄을

      statusHTML.push('<li><span>'+status+'</span></li>');

      이렇게 바꾸시면 됩니다.

      다만

      http://blastic.tistory.com/152

      의 새로운 버전을 적용하시는 것이 더 나을 듯 합니다.

  16. 엔지 2012.10.16 16:19 신고  수정/삭제 댓글쓰기

    혹시, 이 스크립트로 여러개의 아이디로부터 트윗을 받아서 출력할 수 있는 방법은 있나요? var t_username으로 꼼지락 거려봤는데 삽질뿐이라.. ^^; 도와주세요 ^^;;;

    • Nicatio 2012.10.16 16:40 신고  수정/삭제

      function getRecentTweets(){
      var t_username = ['id1','id2']; // username 대신 여러분의 아이디를 넣으세요
      var t_count = 5; // 한번에 나타낼 갯수를 적어 넣으세요
      for (var i=0; i<t_username.length; i++){
      var script = document.createElement('script');
      var head = document.getElementsByTagName('head')[0];
      script.type = 'text/javascript';
      script.src = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+t_username[i]+'&include_rts=true&count='+t_count+'&callback=twitterCallback';
      head.insertBefore(script, head.firstChild);
      }
      }

      위 함수랑

      function twitterCallback(twitters) {
      document.getElementById('twitter_update_list').innerHTML += throwHTML (twitters);
      }

      이 함수로 기존 함수를 덮어씌워주세요.

      var t_username = ['id1','id2']; 이 부분이 아이디 넣는 부분이고
      var t_username = ['id1','id2','id3','id4','id5']; ... 처럼 추가 하시면 됩니다.

    • 엔지 2012.10.16 17:54 신고  수정/삭제

      너무너무 감사드립니다!!! :) 외국사이트에 있는 스크립트로 삽질을 여러번했지만 이것처럼 쉽게 초보자도 설치할수있는건 처음이예요. 너무 감사드려요!!! :)

    • Nicatio 2012.10.17 00:19 신고  수정/삭제

      도움이 되었다니 다행입니다 ^_^

  17. wotjd1005 2012.11.26 09:32 신고  수정/삭제 댓글쓰기

    감사합니다. ㅎㅎ 시간날때 한번 해봐야겠어요~

  18. ruru 2013.01.22 17:32 신고  수정/삭제 댓글쓰기

    정말 절실했는데 유용한 정보 올려주셔서 감사합니다 ~!!!ㅠㅠㅠ

  19. 하늘연달 2013.06.22 12:20 신고  수정/삭제 댓글쓰기

    근데 이거 네이버 블로그에도 적용되나요? ㅜㅜ

  20. ABOUT 2013.07.07 19:21 신고  수정/삭제 댓글쓰기

    아직도 작동이 되나요? 트위터 api 가 변경된것 같은데요?

    • Nicatio 2013.07.08 15:54 신고  수정/삭제

      네 트위터 API가 비교적 폐쇄적으로 변하면서
      OAuth등을 반드시 쓰도록 했네요

  21. jessie 2013.12.19 17:37 신고  수정/삭제 댓글쓰기

    script 복사하고 body안에 div 넣기만하면 바로 뜨는건가요? 아무것도 안떠서요 ㅜㅠㅜㅠ


티스토리 툴바