현재 (11년 12월 6일 기준입니다아~) 이 블로그에 사용하고 있는 트위터 알리미는 jQuery plugin for Twitter 플러그인을 사용하고 있습니다.
상당히 간결한 인터페이스에 초기화도 쉽고, 코드도 간결하여 사용하기에는 굉장히 용이하지만, 저의 경우에는 리밋을 대비하여 (현재는 운용이 어려운 사정으로 인해 본계정은 안돌립니다만) 트위터 계정을 2개를 씁니다. 그래서 트위터 계정 2개를 달고, jQuery plugin for Twitter 플러그인으로 글을 읽어오도록 하면, 결과는 이렇습니다.
트윗 내용에 주목하시면 지는 겁니다.
한쪽에만 트윗 내용이 치우쳐 있는 것을 볼 수 있습니다.
firebug를 이용한 element 분석을 시도하면 다음과 같은 모습을 볼 수 있습니다.
twitter_update_list라는 id를 가진 객체가 보입니다.
객체 내부의 HTML을 수정할 때는 단일 id로 많이 접근을 한다는 것은 알고 있을 것입니다. 밑부분의 똑같은 '최근 트윗'도 twitter_update_list의 id를 가진 객체가 존재하니, 앞쪽에 써져있는 객체로 접근을 하게 된 것입니다.
그렇다면, 각기의 객체를 다른 id를 가지도록 처리를 해주면 될 것입니다. 이때 사용할 수 있는 고유한 식별자는 userName(트위터 계정명)이 될 수 있겠지요.
jquery.twitter.js 파일을 직접 수정해 보았습니다.
(function($) {
/*
jquery.twitter.js v1.0
Last updated: 26 October 2008
Created by Damien du Toit
http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter
Licensed under a Creative Commons Attribution-Non-Commercial 3.0 Unported License
http://creativecommons.org/licenses/by-nc/3.0/
*/
$.fn.getTwitter = function(options) {
var o = $.extend({}, $.fn.getTwitter.defaults, options);
// hide container element
$(this).hide();
// add heading to container element
if (o.showHeading) {
$(this).append('<h2>'+o.headingText+'</h2>');
}
// add twitter list to container element
var nID = "twitter_update_list_" + o.userName;
$(this).append('<ul class="twitter_update" id="' + nID + '"><li></li></ul>');
// hide twitter list
$("ul#"+nID).hide();
// add preLoader to container element
var pl = $('<p id="'+o.preloaderId+'">'+o.loaderText+'</p>');
$(this).append(pl);
// add Twitter profile link to container element
if (o.showProfileLink) {
$(this).append('<a id="profileLink" href="http://twitter.com/'+o.userName+'">http://twitter.com/'+o.userName+'</a>');
}
// show container element
$(this).show();
$.getScript("http://twitter.com/javascripts/blogger.js");
$.getScript("http://twitter.com/statuses/user_timeline/"+o.userName+".json?callback=twitterCallback2&count="+o.numTweets, function() {
// remove preLoader from container element
$(pl).remove();
// show twitter list
if (o.slideIn) {
$("ul#" + nID).slideDown(1000);
}
else {
$("ul#" + nID).show();
}
// give first list item a special class
$("ul#" + nID + " li:first").addClass("firstTweet");
// give last list item a special class
$("ul#" + nID + " li:last").addClass("lastTweet");
});
};
// plugin defaults
$.fn.getTwitter.defaults = {
userName: null,
numTweets: 5,
preloaderId: "preloader",
loaderText: "Loading tweets...",
slideIn: false,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true
};
})(jQuery);
하지만 업데이트가 되지 않습니다.
오른쪽을 보시면 아시겠지만, 전혀 엉뚱한 곳에서 에러가 나고 있습니다.
코드를 다시 살펴보면,
$.getScript("http://twitter.com/javascripts/blogger.js");부분이 있어, 외부에서 코드를 받아 실행함을 알 수 있습니다.
위 파일의 내용을 보면 -
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[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 style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
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 '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
중간에 twitter_update_list가 보입니다.
저 부분을 'twitter_update_list_' + username 로 바꾸어, jquery.twitter.kuna.js에 넣습니다.
크로스도메인 관련하여 문제가 생길까 걱정했지만, 해보니까 별 문제 없더래요.
이제 코드를 실행하면 다음과 같이 나옵니다.
잘 나오는군요 :)
아~주 오래간만의 삽질이었습니다.
'개발 > Developing' 카테고리의 다른 글
| negative number들의 radix sort (2) | 2013.05.14 |
|---|---|
| 기존의 libtwitcurl이 토큰 및 인증 관련하여 제대로 작동하지 않던 문제에 대해서. (9) | 2013.03.08 |
| 안드로이드 프로그래밍 입문 팁들 (13) | 2012.01.19 |
| [Flash] AS 2.0에서 XML 파일 읽어들이기 (0) | 2010.05.10 |
| [Flash] AS 2.0에서 loadMovie로 외부 이미지/플래시 읽어들일 때 로드 이벤트 감지 및 리사이즈 (0) | 2010.05.10 |