Here's a sample xhtml/javascript that uses the with_friends feed.

This is a modification of the XHTML/Javascript Twitter Badge that's available at http://twitter.com/badges

You must change the text "YOURUSERNAME" to your actual Twitter userID for this to work. And you must change it in 2 places.

You can also change the number of Twitter updates that are retrieved and displayed by changing the number "3" in the section of the script that reads: "twitterCallback&count=3" to a different number. The default is the last 3 Twitter updates.

Relative time script courtesy of Jon Aquino.

<div id="twitter_div">
<ul id="twitter_update_list"></ul></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<ul id="twitter_list">


<script type="text/javascript">
  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);

     if(delta < 60) {
         return 'less than a minute ago';
     } else if(delta < 120) {
         return 'about a minute ago';
     } else if(delta < (45*60)) {
         return (parseInt(delta / 60)).toString() + ' minutes ago';
     } else if(delta < (90*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';
     }
  }


function twitterCallback(obj) {
  var html = '';
  for (var i = 0; i < 3; i++) {
    html += '<li>' + obj[i].user.screen_name + ': ' + obj[i].text + '<br>' + '<span style="font-style:italic;">' + relative_time(obj[i].created_at) + '</span>' + '</li>';
}
  document.getElementById('twitter_list').innerHTML = html;
}
</script>


<script src="http://www.twitter.com/statuses/friends_timeline/YOURUSERNAME.json?callback=twitterCallback&count=3" type="text/javascript"></script>

<a style="font-size: 10px; text-decoration: none" href="http://twitter.com/YOURUSERNAME"><img border="0" src="http://static.twitter.com/images/twitter_bubble_logo.gif"/></a></ul>

function twitterCallback(obj) {
  var html = '';
  
  for (var i = 0; i < 3; i++) 
  {
    
	rExp = /((http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(\/*)(:(\d+))?([A-Z0-9_\/.?~-]*))/gi
    text = new String(obj[i].text);
  	text = text.replace(rExp,'<a href="$1">$1</a>');
  	rExp = /((@([A-Z0-9_]+)) )/gi
  	text = text.replace(rExp,'<a href="http://twitter.com/$3">$2</a> ');
    html += '<li><a href="http://twitter.com/' + obj[i].user.screen_name +'">' + obj[i].user.screen_name + '</a>: '; 
    html += text + '<br>' + '<span style="font-style:italic;">' + relative_time(obj[i].created_at) + '</span>' + '</li>';
  }
  document.getElementById('twitter_list').innerHTML = html;
}

This will hyperlink sender, @{name] and other URIs in the message.

Short code:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<ul id="twitter_list"></ul>
<a style="font-size: 10px; text-decoration: none" href="http://twitter.com/YOURUSERNAME"><img border="0" src="http://static.twitter.com/images/twitter_bubble_logo.gif"/></a>
<script src="http://www.emailcommunications.nl/twitterit.js" type="text/javascript"></script>
<script src="http://www.twitter.com/statuses/friends_timeline/YOURUSERNAME.json?callback=twitterCallback&count=3" type="text/javascript"></script>

 Create your own free wiki!Support Community Add to Del.ici.ous Add to DiggPublic, Platinum wiki Privacy Policy RSS