As an alternative to using the 'Home' pages of online services such as Google, Yahoo, etc - which force you to redesign your home page every time they take it into their heads to redesign their site, seemingly every few months - this page explores the possibility of a simple, stable, alternative that you can either host on a website or else just keep as a file on your PC. It explores how to use 3rd party RSS to HTML conversion services to recreate one of the most important functionalities of a conventional home page, the news and other feeds.
To convert RSS feeds into HTML, you need either a server-side script running under something like PHP, or else one of several free 3rd Party client-side JavaScript services available. The former may be preferred because many of the latter produce non-compliant HTML which might break in some browsers. However, the former is too complicated to be covered on this page, which covers only the much simpler option of the latter.
An example of server-side PHP scripting is: FeedForAll.
Examples of client-side scripts include:
Service | Comment |
---|---|
Bloople - RSS 2 HTML | Seemingly fully compliant result, can be styled, works in all mainstream browsers that were tested |
FeedRoll | Non-compliant result, can be styled, works in all mainstream browsers that were tested |
RSS Dog | Inserts advertising elsewhere on your page, so not demonstrated here |
RSSFeedConverter | Requires registration, so not tested here |
RSSinclude | Requires registration, so not tested here |
WebRSS | Requires registration, so not tested here |
Client-side scripts fetch the RSS feed, convert it to HTML, and insert the result into your document. However, the method most commonly used for insertion, document.write(), produces non-compliant HTML, and therefore, depending on how the browser reacts to the non-compliance, may fail or even break something else. However, the following browsers have been shown to work with both Bloople which is compliant and FeedRoll which is not, although if the browser's error console is enabled, the latter will very likely produce errors:
Browser | Version |
---|---|
Chrome | 34/35 |
Firefox | All that were tested |
Internet Explorer | All that were tested |
Safari | 5 |
To demonstrate the non-compliant result of using document.write(), the
FeedRoll example below is coded compliantly as follows:
<div>
<script src="https://feedroll.com/rssviewer/feed2js.php?etc"></script>
</div>
However, once the script has been called and run, the actual result is as follows:
<div>
<script src="https://feedroll.com/rssviewer/feed2js.php?etc">
<div class="rss-box">
<ul class="rss-items">
<li class="rss-item">…</li>
…
</ul>
</div>
</script>
</div>
Whether the closing script tag is thrown away, as in Firefox, or remains present, as in some other browsers tested, either result is non-compliant, and thus may break in some browsers.
This section displays the same BBC World News RSS Feed using two different client-side JavaScript services. Click on the green asterisks to expand and shrink each section.
This demonstration displays the raw output pretty much as inserted by FeedRoll.
This demonstration prettifies the output received back from FeedRoll using the ToggleBlock functionality described here: JavaScript Extras.
Apologies for this inconvenience.