RSS Feeds - How to use 'em

I did the first step of re-building ijy.cc last night, in that I removed the old stuff, and put in a basic holding page instead.

What I'd like to do is use RSS feeds, and pull in stuff from various other sites I use (Picasa, YouTube etc) to display on there (in a similar way to how the MyPage stuff here works). I can then use various 3rd party backend systems, and ijy.cc just becomes a personalised aggregator.

Can anyone point me to some references on how to embed an RSS feed into a webpage? I know loads of places do it, however most seem to use pre-built tools...

Blimey, there are a million

Blimey, there are a million tutorials out there about grabbing RSS and outputting it to page. Sitepoint have a good one. Don't let all the parser 'start element' and 'end element' stuff scare you, once you get your head round it, it's actually very useful and you can aggregate any XML at all.

It's worth noting that you have to use the PHP4 libraries on 34sp. PHP5 can be added to your site but it's a bit cludgely. Make sure the tutorial (like the one above) is a PHP4 one.

Cheers for that. Everything

Cheers for that.

Everything I've found so far is a javascript tool, linking to a 3rd party website that does the parsing for you. I'd prefer to do it server-side, as then I have a lot more control over the style.

I shall have a scan over the link this afternoon...

We did some of this for the

We did some of this for the world trip using REXML to grab the feed from picassa and rip it apart to do links and thumb nails. Most of that won't apply to you since you're using php and we were using rails.

We had a few issues with the picassa feeds in that they seem to be the wrong way round ie listed with the earliest entry first the most recent entry last which is not really what you want. They also use a subformat of rss (I forget the name I think it's media something) which uses different tags and formats not recognised by a lot of rss readers.

This lead to problems with the large number of pictures we were dealing with it caused a lot of slowdown and in the end we had to manually set the start index of the feed to reduce the length of the RSS generated to stop the server timing out (there didn't seem to be a way of saying to picassa give me the 3 most recent images).

There might be ways round that we didn't find, we were attempting to debug that on little laptops from the lobby of the hilton fisherman's wharf San Fran so we were a bit remote and distracted.

It's worth looking through the google api stuff on picassa rss feeds there are a lot of options you can set to change the format and adjust various aspects.

Got somewhere tonight. I now

Got somewhere tonight. I now have ijy.cc displaying the last 3 albums I've uploaded to Picasa. I basically took a pre-existing script, and went through fixing it, and then tweaking it to my needs. That way I didn't have to deal with all the formatting concerns, and I just ended up with a nice loop kicking out HTML to screen. Its not pretty yet, but I've only spent about half an hour so far getting it to work. On the plus side I've managed to keep all the code within a single include, so I can fuck about with it without hurting anything else...

New (sort of) question, and I suspect I half-know the answer to this (rhymes with "painful depressions"). Within the Description Tag of the Picasa feed there is a dirty great block of HTML, with metric shitloads of inline formatting....

<table><tr><td style="padding: 0 5px"><a href="http://picasaweb.google.com/itsjustyou/DorneyLakeApril08"><img style="border:1px solid #5C7FB9" src="http://lh3.ggpht.com/itsjustyou/SASsd5WsZQE/AAAAAAAACSM/Wu67ZI1EjHg/s160-c/DorneyLakeApril08.jpg" alt="Dorney Lake April '08"/></a></td><td valign="top"><p><font color="#333333">A wet Sunday in April, however the worst of it held off just long enough for me to post a new PB for the 10K distance...still just missing that 40 minute marker though! Final time 40 minutes and 11 seconds.</font></p><font color="#6B6B6B">Location: </font><font color="#333333">Dorney Lake, Windsor</font><br/><font color="#6B6B6B">Date: </font><font color="#333333">13 Apr 2008</font><br/><font color="#6B6B6B">Number of Photos in Album: </font><font color="#333333">2</font><br/><p><a href="http://picasaweb.google.com/itsjustyou/DorneyLakeApril08"><font color=\"#112ABB\">View Album</font></a></p></td></tr></table>

I'm currently using a load of STR_REPLACE functions to strip these out (as they are static in the main) and replace them with CSS class definitions, to end up with;

<a href="http://picasaweb.google.com/itsjustyou" class="heavy">Dorney Lake April '08</a><br>
<div class="basic"><table><tr><td><a href="http://picasaweb.google.com/itsjustyou/DorneyLakeApril08"><img class="picimage" src="http://lh3.ggpht.com/itsjustyou/SASsd5WsZQE/AAAAAAAACSM/Wu67ZI1EjHg/s160-c/DorneyLakeApril08.jpg" alt="Dorney Lake April '08"/></a></td><td valign="top"><p>A wet Sunday in April, however the worst of it held off just long enough for me to post a new PB for the 10K distance...still just missing that 40 minute marker though! Final time 40 minutes and 11 seconds.</p>Location: Dorney Lake, Windsor<br/>Date: 13 Apr 2008<br/>Number of Photos in Album: 2<br/><p><a href="http://picasaweb.google.com/itsjustyou/DorneyLakeApril08">View Album</a></p></td></tr></table></div>

I'd also like to hack out the bit that starts at "Location" and ends at "Number of Photos in Album" (effectively 3 lines of screen output, that look fugly within the feed, highlighted in bold). Thats not static, so a STR_REPLACE won't do what I need. I suspect the answer is a regular expression? Am I right? Do I need to go and read up on the black magic and witchcraft that is that arcane type of coding?

I don't know php so I'm not

I don't know php so I'm not much help with specifics but in general I will say that does look like a problem well suited to regular expressions

No need to use regex for the

No need to use regex for the tags. Use standard PHP function strip_tags. For the other bit, you need regex. I do something like this in Chom, so will have a look tonight or tomorrow.

I'm using strip_tags to get

I'm using strip_tags to get rid of the font tags, however the parameters for that only specify allowable tags, not style sections etc etc within tags. I have something along the lines of;

$text = strip_tags($text,'<br/><p><table><td><tr><a><p>');
$text = str_replace('img style="border:1px solid #5C7FB9"','img class="picimage"',$text);
etc etc...

So I've bulk stripped out the font tags, and placed in various CSS classes in lieu of the inline style statements. Its not subtle, but it works, and I'm not aware of a cleaner way of doing that.

I've managed to avoid learning any regex stuff so far (something I'm quite proud of), however as Matt says this does seem to scream them...

Frankly, I'd get the gallery

Frankly, I'd get the gallery feed as raw xml and then process that into xml. You can then style it how you like.

Another way of dealing with string is a tokeniser: http://uk3.php.net/strtok

ohhh...that STRTOK one may

ohhh...that STRTOK one may just work. I think that the <p> tags may well split it up nicely.

Cheers for that, I'll have a play tonight.

Regarding the XML, I'm hoping to avoid spending too long learning new stuff...I know you've done a lot of work with XML and transformations. I understand XML, however the trnasformation stuff is a bit beyond me at the moment...

No need to think of the XML

No need to think of the XML with all of its complexities. At first, treat is as string and throw it through as string tokeniser. Then you can split on the different tags. That's what a parser is doing, tbh.

I think that the function

I think that the function module I've picked up is already doing that...its taking the XML and chucking it into an associative array. Its really just dealing with the DESCRIPTION part of the Picasa feed that is the issue, as it contains all the style and HTML tags

If it is dumping it into an

If it is dumping it into an assoc array, then you can probably look deeper into the structure because the HTML is actually XML too.

No real point...I've done a

No real point...I've done a bit of thinking, and I reckon that with the tokenising thing, strip tags, and a couple of string replaces I can do everything I need with it as-is.

I'd rather keep the core function the same, as I can then re-use it for other feeds, and then just have a single clean-up bit of code specfic to each feed. Then I just need to cobble together a simple template file to chuck everything in...

Just a warning: if Google

Just a warning: if Google change the way they represent the output then your code might break.

I know...any RSS feed runs

I know...any RSS feed runs that risk to some extent. If I have a specific script to clean up that feed however, then thats the only bit that needs changing.

Nice, I can't think of any

Nice, I can't think of any pitfalls. As long as you get your script to fail elegantly, such as just not showing that bit of the page, then that's all good. I'm sure you'll do that anyway. :)

OK, new bag of fun... I'm

OK, new bag of fun... I'm triyng to be a good boy, and not use tables, but rather div and span tags with CSS determining layout and style.

I've sorted out the parsing of the feed now, so I have the chunks I need. Each bit is thrown into a div tag (class picbox), then the image and text within have separate classes. What I'm trying to do is within the main div (picbox) make the text section of it (picwords) align to the middle of the box, but the CSS type vertical-align seems to do nothing, no matter where I place it (from the definition of it I think it should be around the text itself, but I've tried it within the parent object as well).

Where am I going glaringly wrong here?

<div class="picbox">
<a href="http://blah" class="heavy">Dorney Lake April '08</a>
<br>
<a class="piclink" href="http://blah"><img class="picimage" src="http://blah.jpg"/></a>
<span class="picwords">Waffle waffle waffle</span>
</div>

.picimage{
height:80px;
width:80px;
float:left;
border:1pt solid black;
margin:5pt;
}

.picbox{
margin:5pt;
height:110px;
border:1pt solid black;
}

.picwords{
vertical-align:middle;
}

Slowly chugging through this

Slowly chugging through this in my spare time.

I have the feeds up and running (more to be added, but want to fiddle some other things first, and adding them is a piece of piss.

Firefox vs IE. Most of the code has been done at work, so bug checking on IE here, however viewed the site on Firefox last ngiht and all sorts of interesting things went wrong. I've spent the last 10-20 minutes cleaning up the site in accordance with the W3C validator, and its now giving me a green light...
Link to Results
Will following this validation mean that I _should_ have no problems with Firefox? I can't confirm my changes have worked until this evening unfortunately, when I get back home...

Don't use tables unless

Don't use tables unless you're going to tabulate data.

Vertical align is applicable to images, not DIVs, and relates to the image's position relative to the text in which it sits. There's no way of vertically aligning a DIV.

Your changes have made it looks nice in Firefox. Two lists aligned to the left, your image of you running to the bottom right. Lovely. Nice work.

Thats good, cheers for

Thats good, cheers for checking. Until this morning I had <div> tags within <a> tags, and Firefox was throwing a right spanner...apparently you shouldn't have "block tags nested within inline tags". I'm now using the 'onclick' attribute to do the links now.

Next up is to do another CSS sheet for 1024x768 users and below, as it looks shite at that res, then a small bit of jscript to swap between the two. Finally, I'll add in a blog feed from a generic blog site (probably Blogger, as I'm on the google tools all the time anyway).

The end result should be that I have virtually no content held on IJY (a handful of small script files and a couple of images), and everything else is pulled from various websites. That in turn means maintainence is low, and all I really need to look after is;
1) formatting scripts in case feeds change
2) CSS updates as and when I feel bored with the layout

Its been quite hard initially working without tables, as they are the easiest way of quickly laying stuff out. For example, my initial layout had each of the lists as a table, then the RSS feed generated individual table rows and cells within that. Also, many of the RSS feeds include tables within their layout, so I now have a fairly standard block of code for killing that off and extracting out the data I want (as both the current feeds come from Google, fortunately the format of the RSS Description field is virtually identical, so I could do a fairly healthly chop job between them). I can see the advantage of doing it the "new" way though, as to completely change the layout now all I need to do is swap CSS files.

The trouble with tables is

The trouble with tables is to change anything is a royal pain in the arse. It's also really wasteful. Having a single page that aggregates is not so bad when using tables but if you want to change the layout only slightly, then you're stuffed.

You could add your blog from here, rather than start another from Blogger?

This one will be more of a

This one will be more of a training diary than a blog. I doubt the lack-of front page needs a weekly update of "went to RoadRunners, and fuck me if my legs don't hurt now!" or "did my long run today, and fuck me if my legs don't hurt now!".

...come to think of it, I'm fairly certain I could fully automate my blog with a small script.

$basic = ", and fuck me if my legs don't hurt now!";
$lazy = "Did nothing today, feel really lazy as a result. Legs ache a bit from yesterday";
$update = null;

switch ( $day){
case 'mon':
$update = "did a long run today"; break;
case 'sat':
$update = "did a long run today"; break;
case 'wed':
$update = "went to RoadRunners today"; break;
case 'thu':
$update = "did circuits tonight"; break;
case 'sun':
$update = "did spinning this morning"; break;
}

blog_post($update==null?$lazy:$update.$basic);

Well, you don't need to

Well, you don't need to promote everything to the FP if you don't want to. There's an option there.