JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div>
<ul id="tweets">
</ul>
</div>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Modernegezegden&count=3&callback=twitterWidgetCallback&include_rts=1&trim_user=0" type="text/javascript"></script>
CSS
ul#tweets {
margin: 0;
padding: 15px;
}
ul#tweets li {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc
}
ul#tweets li .meta {
background-color: #eee;
display: block;
width: 100%;
height: auto;
margin: 5px -5px -5px -5px;
padding: 0 5px;
font-size: 80%;
}
JavaScript
/** helpers **/
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};
/** end helpers **/
function twitterWidgetCallback (tweets) {
var html = '';
for (var i = 0; i < tweets.length; i++){
var status = tweets[i].text
.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,
'<a href="$1">$1</a>')
.replace(/\B@([_a-z0-9]+)/ig,
'@<a href="http://twitter.com/$1">$1</a>');
html += '<li>'+status+'<br />'
+ '<span class="meta">'
+ '{0} - @{1}'.format(relative_time(tweets[i].created_at), tweets[i].user.screen_name);
+ '</span>'
+ '</li>';
}
document.getElementById('tweets').innerHTML = html;
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = "{0} {1}, {2} {3}".format(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 += (relative_to.getTimezoneOffset() * 60);
var timestring;
switch (true)
{
case (delta < 60) :
timestring = 'minder dan een minuut geleden';
break;
case (delta < 120) :
timestring = 'een minuut geleden';
break;
case (delta < 60*60) :
timestring = '{0} minuten geleden'.format(parseInt(delta / 60));
break;
case (delta < (120*60)) :
timestring = 'een uur geleden';
break;
case (delta < (24*60*60)) :
timestring = '{0} uur...