Movatterモバイル変換


[0]ホーム

URL:


RSS.Style logo RSS Style


What is this?

Every website that updates routinely should have an RSS or Atomnews 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:RSS Style!

Before
Before
After
After

If you are not a webmaster, checkout outWhat is a new feed? andPicking a news reader for how to get started!

How do I use it?

You need to know the name of your RSS/Atom file. It is usually something likefeed.xml,atom.xml orrss.xml. You may be able to use theFeed Analyzer to help you find it. These examples usefeed.xml, but you should replace it with the name of your feed file.

Download one of theavailable styles and save it asfeed.xslt in the same directory as yourfeed.xml file. Note that the extension is.xslt and NOT.xml!

Add it to yourfeed.xmlfile. At the top of the file, it will look like:

<?xml version="1.0" encoding="UTF-8"?><rss ...>...

Add a line in the middle so it looks like:

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="feed.xslt"?><rss ...>...

Troubleshooting

Available styles

Questions and Answers

Which file do I add it to?

Your feed file is often namedfeed.xml but can be anything. You can use theFeed Analyzer to find the URL of your feed: put it your website's URL and it will display the feeds that it finds.

How does this work?

Thexml-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 does the analyzer complain about the content-type?

While there are official content-types for RSS and Atom feeds, some browsers will try to download the feeds rather than display them. This is suboptimal (to say the least), so I strongly recommend using the plain XML content typetext/xml. You can test how your browser behaves with theContent-Type Testing page.

Links

Examples

WebsiteNews FeedNotes
Hacker News (front page)beforeafter Missing ‘self’ link, No link in home page body.analyze
Hacker News (Show HN)beforeafter Title doesn’t have ‘Show HN’. Missing ‘self’ link. No discovery link.analyze
Fly.iobeforeafter Bad ‘self’ link. HTML page is missing the discovery linkanalyze
Jacques Mattheijbeforeafter Bad ‘self’ link (404)analyze
Dave Winerbeforeafter Missing the ‘self’ link. No link in home page body.analyze
Dan Nguyenbeforeafter Opens ‘Save As’ in Firefox. (also no https: support)analyze
Thomas Schranzbeforeafter Different ‘self’ link is different, though it works. No link in home page body.analyze
Colin Wrightbeforeafter Already has styling!CSS. No discovery link.analyze
Hillel Waynebeforeafter Opens ‘Save as’ dialog in Firefox. Mismatched discovery link. No link in home page body.analyze
Patrick McKenziebeforeafter No link in home page body.analyze
Allen Downeybeforeafter Opens ‘Save as’ dialog in Firefox. Home page link has a redirect. No link in home page body.analyze
Julia Evansbeforeafter Self and home page links are ‘http:’analyze
Thomas Parkbeforeafter Opens ‘Save as’ dialog in Firefoxanalyze
Kyle Kingsburybeforeafter Opens ‘Save as’ dialog in Firefox. No link in home page body.analyze
Mark Nottinghambeforeafter Opens ‘Save as’ dialog in Firefox.analyze
Tim Braybeforeafter Opens ‘Save as’ dialog in Firefoxanalyze
John Graham-Cummingbeforeafter CSS stylesheet, but insecure so it doesn’t work. Mismatched ‘self’ link but working.analyze
Dan Luubeforeafter Bad ‘self’ link. Bad home page link. No title.analyze
Steve Klabnikbeforeafter Missing the ‘self’ link. No link in home page body.analyze
Stavros Korokithakisbeforeafter Discovery vs ‘self’ link mismatch but working. ‘link’ element value is in an attribute instead of the content.analyze
Terence Edenbeforeafter Has styling, but not exactly pretty. Home page link has a redirect.analyze
Chris Coyierbeforeafter Opens ‘Save as’ dialog in Firefox.analyze
Logo of the daybeforeafter Perfect, since it is my sample for testing.analyze
Try it on your own feed!Problems?Feed Analyzer
Share:share on redditshare on pinboard


[8]ページ先頭

©2009-2025 Movatter.jp