Modding Twitter for Website

monke · Jul 21, 2008

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).

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:

Changed my mind again, I want to stick with twitter specifically, see post #7.

angelwatt · Jul 22, 2008

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=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+'">'+today+'</a></li>')
	}
	document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

monke · Jul 22, 2008

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?

MegaMan1311 · Jul 22, 2008

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.

janey · Jul 22, 2008

http://www.google.com/uds/solutions/wizards/dynamicfeed.html is maybe something like what you're looking for?

monke · Jul 23, 2008

MegaMan1311 said:
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.

Thanks for those, will look into them.

janey said:
http://www.google.com/uds/solutions/wizards/dynamicfeed.html is maybe something like what you're looking for?

Not exactly, I want to display it like this.

That may work for something else I had in mind though, thanks!

monke · Jul 23, 2008

I've changed my mind (again...

)...

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...

MegaMan1311 · Jul 23, 2008

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;
}

monke · Jul 24, 2008

MegaMan1311 said:
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.

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.

angelwatt · Jul 24, 2008

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 m = 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;
}

monke · Jul 24, 2008

angelwatt said:

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 m = 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;
}

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?

angelwatt · Jul 24, 2008

monke said:
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?

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?

monke · Jul 24, 2008

angelwatt said:
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?

Error Console reports one Error:
Error: parsed_date.getMonth is not a function

PHP:

var m = 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.

angelwatt · Jul 24, 2008

monke said:
Error Console reports one Error:
Error: parsed_date.getMonth is not a function

PHP:

var m = 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.

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));

monke · Jul 24, 2008

angelwatt said:

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));

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.

angelwatt · Jul 25, 2008

monke said:
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.

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 m = parsed_date.getMonth();
  var h = parsed_date.getHours();
  h = (h > 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;
}

monke · Jul 25, 2008

angelwatt said:
Cool, this should take care of the 24-hr clock:

Firefox Error Console brought up one error:
Error: setTime is not defined

var parsed_date = setTime(Date.parse(time_value));

angelwatt · Jul 25, 2008

monke said:
Firefox Error Console brought up one error:
Error: setTime is not defined

var parsed_date = setTime(Date.parse(time_value));

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));

monke · Jul 25, 2008

angelwatt said:
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));

Fixed, and it works!
Thanks again, I really appreciate it!

monke · Jul 25, 2008

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?

angelwatt · Jul 25, 2008

monke said:
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?

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 m = parsed_date.getMonth();
  var h = parsed_date.getHours();
  h = (h > 12) ? h-12 : h;
  var min = parsed_date.getMinutes();
  if (min < 10) min =  "0" + min;
  // construct date string
  postedAt = months[m];
  postedAt += " "+ parsed_date.getDate();
  postedAt += ", "+ parsed_date.getFullYear();
  postedAt += " "+ h +":"+ min;
  postedAt += (parsed_date.getHours() < 12) ? " am" : " pm";
  return postedAt;
}

monke · Jul 25, 2008

angelwatt said:
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).

No worries, I'm not going to complain, it works!
Thanks a million.

monke · Aug 6, 2008

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

) and unfortunately the time shows up as Undefined NaN NaN.

...

angelwatt · Aug 7, 2008

monke said:
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 ) and unfortunately the time shows up as Undefined NaN NaN.

...

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 m = parseInt(parsed_date.getMonth());
  var h = parseInt(parsed_date.getHours());
  h = (h > 12) ? h-12 : h;
  var min = parseInt(parsed_date.getMinutes());
  if (min < 10) min =  "0" + min;
  // construct date string
  postedAt = months[m];
  postedAt += " "+ parsed_date.getDate();
  postedAt += ", "+ parsed_date.getFullYear();
  postedAt += " "+ h +":"+ min;
  postedAt += (parsed_date.getHours() < 12) ? " am" : " pm";
  return postedAt;
}

monke · Aug 7, 2008

angelwatt said:
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.

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.

Modding Twitter for Website

macrumors 65816

Moderator emeritus

macrumors 65816

macrumors regular

macrumors 603

macrumors 65816

macrumors 65816

macrumors regular

macrumors 65816

Moderator emeritus

macrumors 65816

Moderator emeritus

macrumors 65816

Moderator emeritus

macrumors 65816

Moderator emeritus

macrumors 65816

Moderator emeritus

macrumors 65816

macrumors 65816

Moderator emeritus

macrumors 65816

macrumors 65816

Moderator emeritus

macrumors 65816

Our Staff