CODEWITHSUNDEEP
twitter
James Samuel
James Samuel

Reputation:

Displaying Twitter stream on webpage?

I want to display a twitter feed of a user on my website. What is the simplest way to do this? I guess Javascript. What I want specifically is for the last 5 tweets to load & then, when another tweet is made, for that to automatically appear at the top of the Tweets. It needs to cover pretty much the whole website, apart from the header & footer. Any suggestions/code to do that?

Cheers, help greatly appreciated!

Upvotes: 1

Views: 4731

Answers (4)

Johnny X. Lemonade
Johnny X. Lemonade

Reputation: 401

use jQuery, sry for my programming language, but i like our czech lang

  <script type="text/javascript">
   jQuery(document).ready(function($){
    $.getJSON('http://api.twitter.com/1/statuses/user_timeline/##USERNAME##.json?count=2&callback=?', function(zpravicky){
     $("#twitter").html(formatujExtSocialniProfil(zpravicky));
      });
        });
   </script>

in external javascript file code like this

   function formatujExtSocialniProfil(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> <br/><b><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></b></li>');
      }
      return 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 'seconds ago';
      } else if(delta < 120) {
        return 'minute ago';
      } else if(delta < (60*60)) {
        return (parseInt(delta / 60)).toString() + ' minutes';
      } else if(delta < (120*60)) {
        return 'hours ago';
      } else if(delta < (24*60*60)) {
        return 'ago ' + (parseInt(delta / 3600)).toString() + ' hours';
      } else if(delta < (48*60*60)) {
        return 'yesterday';
      } else {
        return 'since ago' + (parseInt(delta / 86400)).toString() + ' days';
      }
    }

Upvotes: 0

Yasir
Yasir

Reputation: 3907

use any twitter wrapper calss for example this http://emmense.com/php-twitter/ to get the status and display it. than use javascript time function inside function make ajax call to php script and append latest tweet on top of your container.

you can use jquery for dom update

$('#dividhere').prepend('

Bla bla bla');

Upvotes: 0

Shoban
Shoban

Reputation: 23016

Simplest way would be adding the Twitter widget : http://twitter.com/goodies/widget_profile and it updates new tweets automatically (using AJAX I think). You ca set the dimensions too.

Upvotes: 2

Kylee
Kylee

Reputation: 1675

Loading new data without refreshing will need to be AJAX. To get the data, ses the Twitter API http://apiwiki.twitter.com/. The API will allow you to get the data in the format of choice (xml, json, ect...) which you can then parse and return either the data or HTML to the page that submitted the AJAX call. That should give you a push in the right direction.

Upvotes: 4

Related Questions