JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tweets"></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
li { display: block; margin-bottom: 5px; border-bottom: 1px solid black;}
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(" ");
var 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...