Just thought I would describe my lifestream @ gpjones.co.uk
Firstly you will need to use a tool to bring together RSS feeds. I use YahooPipes. Here is the link to mine
The app is very straight forward each feed needs 1) FeedFetch 2) Rename 3) Redex
Once this is set up try it and test to make sure it works so all you feed comes together.
HTML Source Code (notes in red //Note)
The code below goes in the <head> </head>
Firstly you will need to use a tool to bring together RSS feeds. I use YahooPipes. Here is the link to mine
http://pipes.yahoo.com/gpjones/lifestream
All you need to do is copy mine and then input your own values.The app is very straight forward each feed needs 1) FeedFetch 2) Rename 3) Redex
Once this is set up try it and test to make sure it works so all you feed comes together.
HTML Source Code (notes in red //Note)
The code below goes in the <head> </head>
<script type="text/javascript" charset="utf-8">
var Loader = new Class({
loadURL: function(url){
var headId = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
headId.appendChild(newScript);
},
parseTimeDigits: function(value)
{
if(value.length == 1)
{
return("0" + value);
}
else
{return(value);}
},
parseWeekday: function(value)
{
var weekday=new Array(8);
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
weekday[7]="Sunday";
return(weekday[value]);
},
parseOrdinalDate: function(value)
{
// this is the "th" or nd" after the concanical date
var ordinalSuffix = new Array(32);
ordinalSuffix[1] = "1st";
ordinalSuffix[2] = "2nd";
ordinalSuffix[3] = "3rd";
ordinalSuffix[4] = "4th";
ordinalSuffix[5] = "5th";
ordinalSuffix[6] = "6th";
ordinalSuffix[7] = "7th";
ordinalSuffix[8] = "8th";
ordinalSuffix[9] = "9th";
ordinalSuffix[10] = "10th";
ordinalSuffix[11] = "11th";
ordinalSuffix[12] = "12th";
ordinalSuffix[13] = "13th";
ordinalSuffix[14] = "14th";
ordinalSuffix[15] = "15th";
ordinalSuffix[16] = "16th";
ordinalSuffix[17] = "17th";
ordinalSuffix[18] = "18th";
ordinalSuffix[19] = "19th";
ordinalSuffix[20] = "20th";
ordinalSuffix[21] = "21st";
ordinalSuffix[22] = "22nd";
ordinalSuffix[23] = "23rd";
ordinalSuffix[24] = "24th";
ordinalSuffix[25] = "25th";
ordinalSuffix[26] = "26th";
ordinalSuffix[27] = "27th";
ordinalSuffix[28] = "28th";
ordinalSuffix[29] = "29th";
ordinalSuffix[30] = "30th";
ordinalSuffix[31] = "31st";
return(ordinalSuffix[value]);
},
parseMonth: function(value)
{
var month = new Array(13);
month[1] = "January";
month[2] = "Febuary";
month[3] = "March";
month[4] = "April";
month[5] = "May";
month[6] = "June";
month[7] = "July";
month[8] = "August";
month[9] = "September";
month[10] = "October";
month[11] = "November";
month[12] = "December";
return(month[value]);
}
});
var URLLoader = new Loader();
window.addEvent('domready', function(){init()});
var myFadeInFx;
function init()
{
//Effect to fade in
myFadeInFx = new Fx.Style('lifeStream','opacity', {duration:1000});
//load yahoo pipes
URLLoader.loadURL( "http://www.gpjones.co.uk/testing.php");
};
function ProcessJSON(obj)
{
$('myLoaderDisplay').setStyle('display','none');
var today = new Date();
var thisDay = 10;
var items = obj.value.items;
var headingWritten = false;
var targetDiv = "lifeStream";
var myDD;
//Go through all of the RSS items, sorting by date of publication
for(var i = 0; i < items.length; i++)
{
var currentItem = items[i];
var currentItemPublished = currentItem["y:published"];
if(currentItemPublished.day == 1 )
{
if(headingWritten == false)
{
var myDTToday = new Element('dt');
$('lifeStream').appendChild(myDTToday);
headingWritten = true;
}
}
else if(currentItemPublished.day != thisDay)
{
var dayName = URLLoader.parseWeekday(currentItemPublished.day_of_week);
var ordinalDay = URLLoader.parseOrdinalDate(currentItemPublished.day);
var monthName = URLLoader.parseMonth(currentItemPublished.month);
var myDT = new Element('dt');
$('lifeStream').appendChild(myDT);
}
currentItemPublished.hour = ( currentItemPublished.hour > 12 ) ? currentItemPublished.hour - 12 : currentItemPublished.hour;
//Calculate the human time
var postedTime = URLLoader.parseTimeDigits(currentItemPublished.hour) + ":" + URLLoader.parseTimeDigits(currentItemPublished.minute);
thisDay = currentItemPublished.day;
//if AMPM
if (currentItemPublished.hour > 12) {
currentItemPublished.hour = currentItemPublished.hour - 12;
tag = "PM";
}
else {
tag = "AM";
}
//build DOM elements
myDD = new Element('dd', { id:'feedItem' + i, 'class':'vevent'});
var myHref = new Element('a', {'class':'url ' + currentItem.feedName, href:currentItem.link, title:currentItem.title});
myHref.injectInside(myDD);
var myImgIcon = new Element('img', {'class':'postType', src:'http://www.gpjones.co.uk/images/' + currentItem.feedName + '.gif', width:'32', height:'32', alt:currentItem.feedName});
myImgIcon.injectInside(myHref);
var myDate = new Element('p', {'class':'date'});
myDate.appendText(ordinalDay + " " + monthName + " at " + postedTime + "" + tag);
myDate.injectInside(myHref);
var myP = new Element('p', {'class':'summary'});
myP.appendText(currentItem.title);
myP.injectInside(myHref);
//if flickr
if(currentItem.feedName == "flickr")
{
var myImgFlickr = new Element('img', {'class':'flickrImg', src:currentItem["media:thumbnail"].url, width:'75', height:'75', alt:currentItem["media.title"]});
myImgFlickr.injectInside(myHref);
}
//add complete DOM element
$('lifeStream').appendChild(myDD);
}
//fade in the updates
myFadeInFx.start(0,1);
}
</script>
Description
The code is basically reading the data so it spits it out in readable format. Javascript prints the data and displays it to the USER.
Needs
You'll need the following javascript files:
http://www.gpjones.co.uk/javascript/prototype.js
http://www.gpjones.co.uk/javascript/scriptaculous.js
or
<script type="text/javascript" src=
"http://www.gpjones.co.uk/javascript/prototype.js">
</script>
<script type="text/javascript" src=
"http://www.gpjones.co.uk/javascript/scriptaculous.js?load=effects">
</script>
The imgIcon comes from http://www.gpjones.co.uk/images e.g. http://www.gpjones.co.uk/images/flickr.gif. You'll need feed images for them to display properly.
- http://www.gpjones.co.uk/images/flickr.gif
- http://www.gpjones.co.uk/images/delicious.gif
- http://www.gpjones.co.uk/images/blog.gif
- http://www.gpjones.co.uk/images/twitter.gif
For the data to be displayed correctly you'll need CSS to format the information correctly.
CSS - http://www.gpjones.co.uk/css/lifestream.css
Here is a copy of mine:
abbr {
cursor:help;
}
dl {
padding-bottom:2em;
}
dd {
width:auto;
margin:0.416665em 1.75em;
}
dd .date{
float:left;
width:6.777800em;
font-size:0.9em;
line-height: 1.166667em;
padding:0.111112em;
color:#4F8F2E;
margin:0.416665em
}
dd .dtstart {
float:left;
width:3.977800em;
font-size:0.9em;
line-height: 1.166667em;
padding:0.111112em;
color:#4F8F2E;
margin:0.416665em;
}
dd span.postTime {
float:left;
width:2.777800em;
font-size:1.5em;
padding:0.111112em;
}
dd .postType {
float:left;
padding:0.277780em;
border:1px solid #EDEEEB;
background:#FFF;
}
dd a {
display:block;
padding:0.416665em;
text-decoration:none;
background:#F4F5F1;
color:#262C32;
width:auto;
border:0.083333em solid #EDEEEB;
}
dd a:hover {
color:#006197;
background:#DFE6E8;
}
dd a.twitter { border-left:5px solid #76E0F8; }
dd a.flickr { border-left:5px solid #FE1B90; }
dd a.blog { border-left:5px solid #4F8F2E; }
dd a.delicious { border-left:5px solid #0000FF; }
dd a.bikeblog { border-left:5px solid #FD6500; }
dd p {
display:block;
font-size: 1.166667em;
line-height: 1.5em;
text-align: left;
}
dd .flickrImg {
float:right;
border:1px solid #EDEEEB;
margin:0.416665em;
padding:0.416665em;
background:#FFF;
}
#myLoaderDisplay { padding:4em; }
#main .inner-wrap { background:transparent;}
/* float clearing */
dd a:after{
content: " ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* for IE7 */
dd a {overflow:hidden; _height:1%;}
The finale:
Now moving to http://www.gpjones.co.uk/testing.php
I would give you the link but this won't work as it will show you the rendered HTML.
<?php
print("ProcessJSON(");
print file_get_contents(
"http://pipes.yahoo.com/pipes/pipe.run?_id=304075facf4e8dce34fc6ff7f23ff70c&_render=json"
);
print(')');
?>
You'll need PHP enabled server to process the data.
Here is the HTML insert:
<dl id="lifeStream" class="hcalendar"></dl>
Test Test Test Test Test
I really can't stress how important testing is and also reading around. To develop this I basically read a few PHP/JavaScript books and found some really helpful advice around the internet. Just do a google search for lifestream and you'll get endless information.
Disadvantages
- This lags sometimes so the data doesnt map over. I think its Yahoo Pipes problem so i'll probably migrate to a different RSS feed source once I find one.
No comments:
Post a Comment