Feed Style
What is this?
Every website that updates routinely should have an RSS or Atom news feed that people (and search engines) can use to watch for changes.
By default, these files look horrible when a human looks at them in a browser. But there is a simple way to make them look better: Feed Style!
For those who are not webmasters, see What is a new feed? and Picking a news reader.
How do I use it?
Add a line to the top (after the <?xml...?> but before any real xml) of your feed file (often feed.xml but see below) with one of the styles here on Feed Style:
Questions and Answers
How does this work?
The xml-stylesheet processing instruction tells the browser to use the XSLT stylesheet to transform the raw XML into HTML. This has been supported by all major browsers for a long time.
Why is the snippet so huge?
The entire XSLT stylesheet needs to be included because of a bug in Chrome that prevents cross-domain loading.
What if I don't want a huge base64-encoding blob in my feed?
You can host the XSLT file yourself and point to it directly:
- Download the appropriate XSLT file and host it next to your feed (
/localcopy.xsltin the example below). - The code is MIT licensed: customize to your liking (though XSLT is not for the faint of heart IMHO)
Are there other ways to make my feeds look nice?
Yes! You can also use a CSS stylesheet. I plan on having some examples here, but in the meantime check out Pete Freitag's overview for making your own.
Links
- Help! What is a feed? (About Feeds)
- Web feed on Wikipedia
- RFC 4287: The Atom Syndication Format
- RSS Advisory Board: RSS 2.0 specification
- RSS Advisory Board: RSS 2.0 Best Practices
- Mozilla Developer Network: XSLT reference
- W3C: Official XSLT 3.0 specification
- Microsoft Learn: XSLT reference
- How to style RSS feed (Lepture aka Hsiaoming Yang)
- Styling an RSS Feed With XSLT (Nat Clark)
- Adding a CSS StyleSheet to your RSS Feed (Pete Freitag)
Examples
| Website | News Feed | Notes | |
|---|---|---|---|
| Hacker News (front page) | before | after | missing self link, HTML page discovery link is relative
|
| Hacker News (Show HN) | before | after | title doesn’t have ‘Show HN’, missing self link, HTML page discovery link is relative
|
| Fly.io | before | after | bad self link, HTML page is missing the discovery link
|
| Jacques Mattheij | before | after | bad self link
|
| Dave Winer | before | after | missing the self link
|
| Dan Nguyen | before | after | insecure self link
|
| Thomas Schranz | before | after | self link is different, though it works
|
| Colin Wright | before | after | already has styling! CSS |
| Hillel Wayne | before | after | Opens ‘Save as’ dialog |
| Patrick McKenzie | before | after | |
| Allen Downey | before | after | Opens ‘Save as’ dialog |
| Julia Evans | before | after | |
| Thomas Park | before | after | Opens ‘Save as’ dialog |
| Kyle Kingsbury | before | after | Opens ‘Save as’ dialog |
| Mark Nottingham | before | after | Opens ‘Save as’ dialog |
| Tim Bray | before | after | Opens ‘Save as’ dialog |
| John Graham-Cumming | before | after | Opens ‘Save as’ dialog, self link mismatch but working
|
| Dan Luu | before | after | bad self link
|
| Steve Klabnik | before | after | missing the self link
|
| Stavros Korokithakis | before | after | discovery vs self link mismatch but working
|
| Terence Eden | before | after | Has styling, but not exactly pretty. |
| Logo of the day | before | after | Perfect, since it is my sample for testing. |
| Try it on your own feed! | Problems? Feed Analyzer | ||
Share:
