An RSS feed with a custom reading view
Using Atom for RSS with a customizable preview option for browsers.
A while ago, I decided to update my RSS feed code to using the newer Atom standard. As I did some research on it, I discovered a lesser-known browser feature for outputting RSS feeds in a human-readable format.
Atom RSS standard
Let’s start with looking at the Atom code. This is the header and meta info:
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="feed.xslt" type="text/xsl"?> <feed xml:lang="en-US" xmlns="http://www.w3.org/2005/Atom"> <id>distinctivequality.com:blog</id> <link rel="alternate" type="text/html" href="https://distinctivequality.com/blog/"/> <link rel="self" type="application/atom+xml" href="https://distinctivequality.com/blog/feed/"/> <title>Distinctive Quality blog</title> <updated>2023-09-24T03:29:39Z</updated> ... </feed>
id element should be unique. To keep things simple, it can just be the URL to your articles' homepage. But in case that URL changes, you may want to use a different
Here's an example entry for an article:
published element is actually not required, but the
updated element is which can be used instead of
published as well as for when any significant changes are made to an article. For the
author element, you can optionally include a
uri or an
And an entry example that is a link to an outside article:
<entry> <id>distinctivequality.com:blog/introducing-blocks-edit</id> <published>2017-10-02T00:00:00Z</published> <updated>2017-10-02T00:00:00Z</updated> <link rel="alternate" type="text/html" href="https://blocksedit.com/content-code/introducing-blocks-edit/"/> <title>Introducing Blocks Edit, content management for email</title> <summary>Blocks Edit is now live and ready for you to improve how you send out marketing campaigns.</summary> <author> <name>Ovi Demetrian Jr</name> <email>email@example.com</email> </author> </entry>
Instead of the
content element, there's a
summary instead since there is no content provided for the entry.
For more details on each element along with additional optional elements you can include, take a look at the official W3C Atom doc
Custom RSS preview
By default, when clicking on an RSS feed link in a browser, it's either shown in it's raw XML code, or the browser will show an error prompt that it does not recognize the file format. However, there is an option to format the preview of an RSS feed using XSLT, which is a stylesheet for XML.
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom"> <xsl:output method="html" version="1.0" encoding="UTF-8" doctype-system="about:legacy-compat" indent="yes" /> <xsl:template match="/"> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><xsl:value-of select="/atom:feed/atom:title" /> RSS feed</title> <link rel="stylesheet" href="style.css" /> </head> <body> <section> <h1><xsl:value-of select="/atom:feed/atom:title" /> RSS feed</h1> <p>Copy this URL into your preferred RSS reader:<br/> <code>https://distinctivequality.com/blog/feed/</code> </p> </section> <section> <xsl:for-each select="/atom:feed/atom:entry"> <article> <h2><a><xsl:attribute name="href"><xsl:value-of select="atom:link/@href"/></xsl:attribute><xsl:value-of select="atom:title" /></a></h2> <p><time>Published <xsl:value-of select="substring(atom:published, 0, 11)" /></time></p> <xsl:value-of select="atom:content" disable-output-escaping="yes" /> <xsl:value-of select="atom:summary" /> </article> </xsl:for-each> </section> </html> </xsl:template> </xsl:stylesheet>
The header area defines the code as an RSS feed stylesheet and template. It then turns into what seems like standard HTML. The main difference is that closing an element that's self-contained requires using
/>. You can even add custom content and use
<style> and CSS.
You'll also notice template tags are used to output content from the RSS feed. For a list of all the tags and what they do, you can use this reference.
I ran into an issue with having example code in my posts. Outputting some example HTML code it didn't like, the XSLT template would just stop and cut off the rest of the feed items.
For an example of a styled feed, here's the Distinctive Quality feed.