Modding Twitter for Website

Discussion in 'Web Design and Development' started by monke, Jul 21, 2008.

  1. monke macrumors 65816

    monke

    Joined:
    May 30, 2005
    #1
    I want to incorporate Twitter with my website, but change one thing about it.

    Since it's javascript, I don't have a clue. :(

    Here's the code for you:

    <changed idea>


    What I want to do is instead of having the post + how many minutes/hours/days ago you posted, I want it to be the post + the current date and time. I don't understand javascript at all, but I would guess that you have to change the if at the bottom starting from if (delta < 60) to ' days ago'; } .

    How would I change this and incorporate it?
    Any Ideas?

    Also, if anyone has any ideas how to incorporate Flickr updates (photo uploads only) into a website, it would be great,

    BTW, I'm not using Wordpress, so the plugins won't work (I think). :eek:


    EDIT: See post #3 below. I want to use RSS Stream (because it does exactly what I want) but I'm not using Wordpress, and have no intentions of using Wordpress. :)

    EDIT 2: :eek: Changed my mind again, I want to stick with twitter specifically, see post #7.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    If you just want today's dat then you don't need the second function there. Here's the first function updated to output the current date, though don't really understand why you're wanting to do this.
    PHP:
    function twitterCallback2(obj) {
        var 
    twitters obj;
        var 
    statusHTML "";
        var 
    username "";
        var 
    today = new Date();
        for (var 
    i=0i<twitters.lengthi++){
            
    username twitters[i].user.screen_name
            statusHTML 
    += ('<li><span>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+today+'</a></li>')
        }
        
    document.getElementById('twitter_update_list').innerHTML statusHTML;
    }
     
  3. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #3
    I just found the RSS Stream Wordpress plugin that does exactly what I want, except it's for Wordpress.

    Is there anyway I can use this and set it up on a normal website, without Wordpress?
     
  4. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #4
    I assume that you are trying to pull an RSS Feed into a page, and not turn your page into an RSS Feed.

    If you know how to upload a folder to your server and put the code you are given by a script into a page, then I suggest Feed2JS to pull in a feed.

    If you know how to use PHP, and want more control, then I suggest Magpie RSS.

    Google Searches will tell you more about Feed2JS and Magpie RSS.
     
  5. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #6
    Thanks for those, will look into them.

    Not exactly, I want to display it like this.

    That may work for something else I had in mind though, thanks!
     
  6. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #7
    I've changed my mind (again... :eek: )...

    I want to stick with just twitter, and only twitter, but I've decided what I want to do with it.

    Once again, here's the code from Twitter:

    Code:
    function twitterCallback2(obj) {
    	var twitters = obj;
    	var statusHTML = "";
    	var username = "";
    	for (var i=0; i<twitters.length; i++){
    		username = twitters[i].user.screen_name
    		statusHTML += ('<li><span>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>')
    	}
    	document.getElementById('twitter_update_list').innerHTML = statusHTML;
    }
    
    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';
      }
    }
    Now, instead of having it look like:
    Post... 10 Minutes Ago

    I want it to look like:
    Post... July 23, 2008 5:45 PM

    I want to change the '10 Minutes Ago' to the date(month day, year) and time (h:mm am/pm) it was posted.

    Does anyone know how to do it? I'm trying to learn javascript now to do it, but it's just not sinking in yet... :(
     
  7. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #8
    I'm no expert with javascript, but I'll give it a shot. Replace your code with the edited code below. Just use it like you have been using it. Tell me what this outputs.

    All I have done is removed all of the code involving the relative time and told it to use the parsed date variable.



    Code:
    function twitterCallback2(obj) {
    	var twitters = obj;
    	var statusHTML = "";
    	var username = "";
    	for (var i=0; i<twitters.length; i++){
    		username = twitters[i].user.screen_name
    		statusHTML += ('<li><span>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>')
    	}
    	document.getElementById('twitter_update_list').innerHTML = statusHTML;
    }
    
    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);
      return $parsed_date;
    }
     
  8. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #9
    It didn't work, so I got rid of the '$' in front of: return $parsed_date;
    And it came up with:
    1216887604000 (equal to less then 5 seconds ago)*
    1216884984000 (equal to 20 hours ago)*

    *Brackets not included, just the numbers.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Try replacing the second function with this one. I can't test it, but looks like it should do what you're looking for.

    (Tagged PHP simply for color purpose)
    PHP:
    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 
    months = new Array('Jan''Feb''Mar''Apr''May''Jun''Jul''Aug',
        
    'Sep''Oct''Nov''Dec');
      var 
    postedAt '';
      var 
    parsed_date.getMonth();
      
    postedAt months[m];
      
    postedAt += " "parsed_date.getDate();
      
    postedAt += ", "parsed_date.getFullYear();
      
    postedAt += " "parsed_date.getHours();
      
    postedAt += ":"parsed_date.getMinutes();
      
    postedAt += (parsed_date.getHours() < 12) ? " am" " pm";
      return 
    postedAt;
    }
     
  10. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #11
    Thanks for the code, it looks like it should work, but when I put it in, the screen doesn't show anything. There's no updates, nothing. Any ideas?
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    Depending on your browser, if you pull up the error console (Firefox: Tools > Error Console) it'll display error messages related to JavaScript and other stuff. See if any errors are occurring. Also, is the page posted somewhere you can link to? When you say "screen doesn't show anything" does that mean none of the web page comes up, or just nothing where this date should be coming up?
     
  12. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #13
    Error Console reports one Error:
    Error: parsed_date.getMonth is not a function
    PHP:
    var parsed_date.getMonth(); 
    It's not posted anywhere, just on my machine.

    None of the web pages shows up, it's just the background-color from the body, that's it.
    All that is on the page (currently) is the Twitter updates. :)
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    OK, try swapping these lines:
    PHP:
      var parsed_date Date.parse(time_value); // remove this line
      // add the following lines in its place
      
    var parsed_date = new Date();
      
    parsed_date.setTime(Date.parse(time_value));
     
  14. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #15
    That works!
    I removed this line
    PHP:
    time_value values[1] + " " values[2] + ", " values[5] + " " values[3]; 
    and it changed the times to the right time on a 24 hour clock.

    Can it be changed to a 12 hours, instead of 24? Right now it shows up as 15:46 PM (which would be 3:46). The PM doesn't make sense being there unless its 12 hours.
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    Cool, this should take care of the 24-hr clock:
    PHP:
    function relative_time(time_value) {
      var 
    values time_value.split(" ");
      var 
    parsed_date setTime(Date.parse(time_value));  
      var 
    months = new Array('Jan''Feb''Mar''Apr''May''Jun''Jul''Aug',
        
    'Sep''Oct''Nov''Dec');
      var 
    postedAt '';
      var 
    parsed_date.getMonth();
      var 
    parsed_date.getHours();
      
    = (12) ? h-12 h;
      
    postedAt months[m];
      
    postedAt += " "parsed_date.getDate();
      
    postedAt += ", "parsed_date.getFullYear();
      
    postedAt += " "h;
      
    postedAt += ":"parsed_date.getMinutes();
      
    postedAt += (parsed_date.getHours() < 12) ? " am" " pm";
      return 
    postedAt;
    }
     
  16. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #17
    Firefox Error Console brought up one error:
    Error: setTime is not defined

    var parsed_date = setTime(Date.parse(time_value));
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #18
    Doh, I thought I fixed that. That line should be replaced with these two lines.
    PHP:
    var parsed_date = new Date();
    parsed_date.setTime(Date.parse(time_value));
     
  18. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #19
    Fixed, and it works!
    Thanks again, I really appreciate it! :)
     
  19. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #20
    Oops, just encountered one problem.

    If I update twitter at 4:03 and 4:07, the script won't show the 0, and thus the times turn into 4:3 and 4:7.

    Any way to fix that?
     
  20. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #21
    I forgot about minutes. I knew that would happen with hours, but looks OK on it. That's the problem when you can't actually run the code. Blind coding obviously prone to error. Here's the updated function. Simple fix (knock on wood).
    PHP:
    function relative_time(time_value) {
      var 
    values time_value.split(" ");
      var 
    parsed_date = new Date();
      
    parsed_date.setTime(Date.parse(time_value));
      var 
    months = new Array('Jan''Feb''Mar''Apr''May''Jun''Jul''Aug',
        
    'Sep''Oct''Nov''Dec');
      var 
    postedAt '';
      var 
    parsed_date.getMonth();
      var 
    parsed_date.getHours();
      
    = (12) ? h-12 h;
      var 
    min parsed_date.getMinutes();
      if (
    min 10min =  "0" min;
      
    // construct date string
      
    postedAt months[m];
      
    postedAt += " "parsed_date.getDate();
      
    postedAt += ", "parsed_date.getFullYear();
      
    postedAt += " "+":"min;
      
    postedAt += (parsed_date.getHours() < 12) ? " am" " pm";
      return 
    postedAt;
    }
     
  21. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #22
    No worries, I'm not going to complain, it works!
    Thanks a million.
     
  22. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #23
    I hate to revive this old thread, but I've encountered a problem.

    I'm testing my site across multiple browers (I wonder which one had trouble :rolleyes: ) and unfortunately the time shows up as Undefined NaN NaN.


    ... :eek:
     
  23. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #24
    I'm guessing IE had the issue. Unfortunately I still can't test this code so just have to make guesses. I added some parseInt calls around some of the data to make sure it sees it as a number. The NaN mean "Not a Number" so that's why I'm trying this.

    PHP:
    function relative_time(time_value) {
      var 
    values time_value.split(" ");
      var 
    parsed_date = new Date();
      
    parsed_date.setTime(Date.parse(time_value));
      var 
    months = new Array('Jan''Feb''Mar''Apr''May''Jun''Jul''Aug',
        
    'Sep''Oct''Nov''Dec');
      var 
    postedAt '';
      var 
    parseInt(parsed_date.getMonth());
      var 
    parseInt(parsed_date.getHours());
      
    = (12) ? h-12 h;
      var 
    min parseInt(parsed_date.getMinutes());
      if (
    min 10min =  "0" min;
      
    // construct date string
      
    postedAt months[m];
      
    postedAt += " "parsed_date.getDate();
      
    postedAt += ", "parsed_date.getFullYear();
      
    postedAt += " "+":"min;
      
    postedAt += (parsed_date.getHours() < 12) ? " am" " pm";
      return 
    postedAt;
    }
     
  24. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #25
    I tried it, but now Internet Explorer won't show a thing, it doesn't load anything. The script is in the right place, just IE doesn't show anything at all - no post, no time, no recognition that it even exists.
     

Share This Page