728x90

사용 방법

1. <head> </head> 사이에 다음 코드를 넣습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.results.length; i++){
var username = twitters.results[i].from_user;
var status = twitters.results[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><span>'+status+'</span> <a class="twt_time" href="http://twitter.com/'+username+'/statuses/'+twitters.results[i].id_str+'" target="_blank">'+relative_time(twitters.results[i].created_at)+'</a> <span class="twt_slash">/</span> <a class="twt_reply"href="http://twitter.com/?status=@'+username+'%20&in_reply_to_status_id='+twitters.results[i].id_str+'&in_reply_to='+username+'" target="_blank">reply</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
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 '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
</script>




2. 최근 트윗을 위치하고 싶은 곳에 다음과 같은 코드를 넣습니다.

1
2
<div id="twitter_update_list" class=conts></div>
<script type="text/javascript" src="http://search.twitter.com/search.json?q=username&callback=twitterCallback2&rpp=5"></script>


 

* 수정하실 부분
http://search.twitter.com/search.json?q=username&callback=twitterCallback2&rpp=5

q=username에서 username대신 여러분의 트위터 계정을 입력하시기 바랍니다.
rpp=5는 출력될 갯수를 의미합니다. 5 대신 다른 숫자를 넣어 수정이 가능합니다.





3. CSS는 입맛에 맞게 수정하시면 됩니다.

1
2
3
4
5
6
#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에 관여합니다.




 

적용된 모습





 

문제 제기


트위터에는 기본적으로 홈페이지나 블로그 삽입을 위한 트위터 위젯을 제공합니다.
다음 위젯뱅크에서도 최근 트위터 위젯을 제공하죠.
하지만 조금 디자인을 중시하시는 분들이라면 이런 위젯들은 눈엣가시입니다.
전체적인 디자인과 어울리기가 어렵기 때문이죠.
과연 트위터 데이터를 가지고 나만의 HTML과 CSS를 통해서 홈페이지나 블로그에 삽입할 방법은 없는가?




 

처음 찾아낸 해결책, 그러나 문제가 있었다.

구글링을 하다보니 이런 포스팅을 발견합니다.

[ 관련 링크 : http://www.webdesigndev.com/programming/how-to-display-your-last-tweet-using-javascript-and-the-twitter-api ]

나름대로 쓸만하더군요. 설치 방법도 매우 간단합니다.
먼저, 트위터 내용을 위치하고 싶은 곳에 아래 HTML 태그를 넣습니다.

1
2
3
4
5
<div id="twitter_update_list"></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=1">
</script>

'12345' 대신 여러분의 트위터 아이디를 입력하시면 됩니다.
'count=1' 부분은 출력할 최근 트윗 개수를 나타냅니다. count=5 라고 바꾸면 5개의 최근 트윗이 올라옵니다.

그런데, 이 방법에 문제가 있었습니다.
분명 5개를 출력하라고 했지만, 화면에는 3개, 4개 밖에 나오지 않더군요.
원인을 알아보니, 썼다가 지웠던 트윗이라든지, 리트윗한 트윗의 경우에는 표시되지 않았습니다.

그래서 좀 더 알아보기로 했습니다.
먼저 코드를 살펴보면,
>> http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=1
이 부분은 여러분에게 데이터를 Object 형태로 내뱉는 녀석입니다.

여기서 지정해준 Callback 함수를 통해서,
최종적으로 우리가 얻는 HTML 소스가 DIV 속으로 들어가게 되는 것입니다.

문제의 원인은 위 링크에서 보내주는 데이터 자체에 있었습니다.
그 데이터에서부터 우리가 필요한 데이터들이 빠져있었던 것이죠.
그렇다면 우리는 Twitter에 요구해야하는 다른 API가 필요합니다.




 

중간 과정

처음 찾아본 API들은 user_timeline 대신 다른 것들이었습니다.
public_timeline은 저와는 관련없는 트윗들이었고, home_timeline은 Authentication을 요구하더군요.
그래서 찾아낸 것이 바로 요놈이었습니다.
>> http://apiwiki.twitter.com/w/page/22554756/Twitter-Search-API-Method:-search

제 트윗을 검색해서 그 결과를 저한테 뿌려주는 것이었죠.
그런데 Search API에서 리턴해주는 Object는 이전과 조금 다른 것이었습니다.
하지만 검색 결과이기 때문에 제가 리트윗 한 트윗이 보일 뿐만 아니라
제가 지운 트윗으로 인해서 갯수가 줄어드는 일도 없었습니다. 우왕ㅋ굳ㅋ

그런데 문제가 있었습니다.
>> http://twitter.com/javascripts/blogger.js
이 파일을 그대로 이용할 수 없었습니다.
Callback 함수가 제가 가져온 Search API와 맞지 않았습니다.

그래서 이 파일을 수정할 필요가 생겼습니다.
날짜 표시방식도 달랐습니다. 또한, 이 파일만 가지고는 CSS수정이 조금 번거로웠죠.
그래서 twitterCallback2 함수를 대대적으로(?) 수정해서 얻어낸 것이 바로 맨 위에 있는 코드입니다.

출처 : http://blastic.tistory.com/79

728x90

'WEB' 카테고리의 다른 글

twitter json status  (0) 2012.07.29
트위터 위젯  (0) 2012.07.29
HTML 텍스트 줄바꿈  (0) 2012.07.29
HTML IMAGE RESIZE  (0) 2012.07.29
HTML SELECT OPTION 추가  (0) 2012.07.29

+ Recent posts

티스토리툴바