Writing an RSS feed is possibly the only XML that many Web designers will ever have any contact with. But whether you use a tool to write your RSS feed, have it automatically created from a blog, or write it from scratch in a text editor, you want people to view that feed. The simplest way to do this is to simply link to the feed RSS file. Like this:
Depending upon their browser, your customers will either be prompted to add the feed to their RSS reader (or browser) or shown an XML page with the feed in it. They can then use that URL to subscribe to the feed in their favorite feed reader. But some people don't know how to do this. While you could include instructions in your link (something like: "right click this link to get the URL of my feed and paste that into your feed reader software"), but that is long, and not everyone knows that they probably already have a feed reader. So it's often better to use an icon from some of the more common fead readers and homepage sites to get people to add your feed directly to their reader.
Add a Feed Icons
Lots of the more popular feed readers and home page tools have a script and button that anyone with a feed can use to promote their feed on their service. In order to use them, you need your RSS feed URL encoded for use in a URL, the image, and the link to their service. Here's how you do it for My Yahoo, Google, and Bloglines:
- Validate your feed. Many feed readers will not accept invalid feeds, so validate your feed first.
- Encode your URL. You can encode all the characters by hand or you can use an online form like this one (the second form box).
- Build the link for your button:
<a href="http://add.my.yahoo.com/rss?url=ENCODED URL">Google:
<a href="http://fusion.google.com/add?feedurl=ENCODED URL">Bloglines:
<a href="http://www.bloglines.com/sub/ENCODED URL">
- Place the image for your button and close the link:
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" alt="Add to My Yahoo" border="0" /></a>Google:
<img src="http://buttons.googlesyndication.com/fusion/add.gif" alt="Add to Google" border="0" /></a>Bloglines:
<img src="http://www.bloglines.com/images/sub_modern8.gif" alt="Add to Bloglines" border="0" /></a>
There are other sites with buttons as well. You can get them from my article: RSS Add to Page Buttons.
Best Practices, the Buttons, and the RSS Feed Icon
The problem with those buttons is that once you have more than two or three on a page, the page can end up looking wildly chaotic. Some of the older buttons used the word "XML" to convey that it was a feed, while others said "RSS" or "Atom" and still others said "feed". Most are orange, but some are other colors.
When you're linking to your RSS feeds you should strive for the following:
- A button or icon that conveys that the link is a feed. In other words, that the resulting page will have continually updated information in a format that can be automated.
- The button or icon should be universal regardless of what language the feed is written in, RSS or Atom.
- The button should not have text on it so that it is more readily internationalized.
- The button should not say "XML" as this is the meta language that all RSS and Atom is, not the language itself.
- Text beside the button should say "subscribe" as this has more meaning to most people than the more technical term "feed".
- If there is concern that readers won't know what to do with an RSS feed, text links (without images) should be used to the various feed readers.
- For customers who don't have a feed reader, additional content can be included on a help page:
"The feed icon indicates that you may subscribe to content on this website that is regularly updated. When you subscribe to a feed, the information is automatically downloaded to your feed reader. The benefit is that you get the updated information without having to visit the website. <a href="RSS URL">Subscribe to this feed</a>
The Common Feed Icon
The most widely used feed icon is the orange rectangle with a white radiowave-like symbol inside. You can get a copy from the website FeedIcons.com. This is the best icon to use for feeds on your website. It conveys the meanings required by best practices, doesn't use text, and is widely recognized. Then, if your readers need direct links to their favorire feed readers you can add them as text links beside the feed icon. Here is a simple example using my feed:
<p><a href="http://webdesign.about.com/library/z_whats_new.rss"><img src="http://0.tqn.com/d/webdesign/1/6/t/T/1/feed-icon-28x28.png" alt="Subscribe" width="28" height="28" border="0" style="float:left; margin-right:0.5em;" /></a> <a href="http://webdesign.about.com/library/z_whats_new.rss">Subscribe</a><br style="clear:left;" />
<a href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Fwebdesign.about.com%2Flibrary%2Fz_whats_new.rss">Add to Yahoo</a><br />
<a href="http://fusion.google.com/add?feedurl=http%3A%2F%2Fwebdesign.about.com%2Flibrary%2Fz_whats_new.rss">Add to Google</a><br />
<a href="http://www.bloglines.com/sub/http%3A%2F%2Fwebdesign.about.com%2Flibrary%2Fz_whats_new.rss">Add to Bloglines</a></p>
Here is how I handle my What's New subscription page.