Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Modding Twitter for Website

monke

monke

macrumors 65816
Original poster
May 30, 2005
1,437
3
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.
 
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;
}
 
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?
 
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.
 
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.
Click to expand...

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?
Click to expand...

Not exactly, I want to display it like this.

That may work for something else I had in mind though, thanks!
 
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... :(
 
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;
}
 
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.
Click to expand...

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.
 
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;
}
 
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;
}
Click to expand...

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?
 
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?
Click to expand...

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?
 
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?
Click to expand...

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. :)
 
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. :)
Click to expand...

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));
 
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));
Click to expand...

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.
 
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.
Click to expand...

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 said:
Firefox Error Console brought up one error:
Error: setTime is not defined

var parsed_date = setTime(Date.parse(time_value));
Click to expand...

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));
 
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));
Click to expand...

Fixed, and it works!
Thanks again, I really appreciate it! :)
 
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?
 
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?
Click to expand...

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;
}
 
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).
Click to expand...

No worries, I'm not going to complain, it works!
Thanks a million.
 
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:
 
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 :rolleyes: ) and unfortunately the time shows up as Undefined NaN NaN.


... :eek:
Click to expand...

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;
}
 
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.
Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back