Converting RSS to JavaScript
| The following are online services that create JavaScript you can embed in a Web page. That JavaScript calls a remote server that converts the RSS feed you've chosen into HTML, then displays the HTML on the Web page. RSS-xpress LiteA good RSS-to-HTML converter is RSS-xpress Lite, at http://rssxpress.ukoln.ac.uk/lite/ (Figure 9.1). Figure 9.1. RSS-xpress Lite converts RSS to HTML. To generate JavaScript for an RSS channel, just click the Include link, then the Try It link in the new page that appears (Figure 9.2). Figure 9.2. Follow RSS-xpress Lite's steps to convert RSS to HTML. Enter the URL for the RSS feed you want to convert to HTML. In this example, it's the URL for an RSS feed from USAToday.com, at www.usatoday.com/repurposing/NewslineRss.xml. When you select the Get Script button, what appears is the new JavaScript you can use to display the RSS channel in a Web page (Figure 9.3). Figure 9.3. Simply cut and paste the code displayed to create JavaScript. Here's the raw JavaScript that you get in this example: <script src="/books/1/255/1/html/2/http://rssxpress.ukoln.ac.uk/lite/viewer/ ?rss=http%3A%2F%2Fwww.usatoday.com%2Frepurposing%2FNewslineRss.xml "></script> <noscript><a href="http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http%3A%2F%2Fw ww.usatoday.com%2Frepurposing%2FNewslineRss.xml">View </a> </noscript> You can just paste the JavaScript into a Web page where you want the converted RSS feed's items to appear. <html> <head> <title> The News </title> </head> <body> <h1>Here's the news from USA Today</h1> <script src="/books/1/255/1/html/2/http://rssxpress.ukoln.ac.uk/lite/viewer/?rss= http%3A%2F%2Fwww.usatoday.com%2Frepurposing%2FNewslineRss.xml"> </script> <noscript> <a href="http://rssxpress.ukoln.ac.uk/lite/viewer/?rss= http%3A%2F%2Fwww.usatoday.com%2Frepurposing%2FNewslineRss. xml">View </a> </noscript> </body> </html> If you open this new page in a browser, you'll see the RSS feed converted into HTML (Figure 9.4). Not bad. Figure 9.4. The RSS feeds have been converted to HTML. If you want to include other RSS feeds in your page, just create new JavaScript. For example, to include USAToday.com's world news as well as its top stories, you can add this JavaScript: <html> <head> <title> The News </title> </head> <body> <h1>Here's the news from USA Today</h1> <script src="/books/1/255/1/html/2/http://rssxpress.ukoln.ac.uk/lite/viewer/?rss= http%3A%2F%2Fwww.usatoday.com%2Frepurposing%2FNewslineRss.xml"> </script> <noscript> <a href="http://rssxpress.ukoln.ac.uk/lite/viewer/?rss= http%3A%2F%2Fwww.usatoday.com%2Frepurposing%2FNewslineRss. xml">View </a> </noscript> <script src="/books/1/255/1/html/2/http://rssxpress.ukoln.ac.uk/lite/viewer/?rss= http%3A%2F%2Fwww.usatoday.com%2Frepurposing%2FWorldRss.xml"> </script> <noscript> <a href="http://rssxpress.ukoln.ac.uk/lite/viewer/?rss= http%3A%2F%2Fwww.usatoday.com%2Frepurposing%2FWorldRss. xml">View </a> </noscript> </body> </html> This code puts the two RSS feeds into the Web page, one after the other. Check out http://rssxpress.ukoln.ac.uk/lite/include for more on ways to arrange the RSS feeds on a Web page. Note There's one drawback to creating HTML from RSS feeds on the fly like thisthe resulting HTML is usually not readable in search engines. RSS-to-JavaScriptRSS-to-JavaScript is another, fancier tool that converts RSS to JavaScript. You can find it at www.rss-to-javascript.com (Figure 9.5). Figure 9.5. RSS-to-JavaScript is a free service. To get started, select the RSS/RDF/Atom Converter v4.0 link on the home page. You then enter the URL of your feed (Figure 9.6). Figure 9.6. Fill in the appropriate information to convert an RSS feed to HTML. RSS-to-JavaScript provides many options to format your new HTML as you like (Figure 9.7). Figure 9.7. Here are more RSS feed formatting options. When you select the Generate JavaScript button located at the bottom of the formatting options, the JavaScript for this feed is created (Figure 9.8). Figure 9.8. Copy the JavaScript and paste it into your HTML document. Then you simply paste this JavaScript into a Web page. <html> <head> <title> The News </title> </head> <body> <h1>Here's the news from USA Today</h1> <script language= "JavaScript" src= "http://convert.rss-to-javascript.com/?chan=1&font=Arial&src= http%3A%2F%2Fwww.usatoday.com%2Frepurposing% 2FNewslineRss.xml&rss_title=USA Today News&box_list_id=413"> </script> <noscript>Your browser does not support JavaScript. <a title= 'RSS-to-JavaScript.com: Free RSS to JavaScript Converter' href=http://www.rss-to-javascript.com/ ?p=151,381&chan=1&font=Arial &src=http%3A%2F%2Fwww.usatoday.com%2Frepurposing% 2FNewslineRss.xml&rss_title=USA Today News& box_list_id=413&as_html=1>Click to read the latest news</a>. </noscript> <a href=http://www.rss-to-javascript.com target=_blank title="RSS-to-JavaScript.com: Free RSS to JavaScript Converter" > <img src=http://www.rss-to-javascript.com/images/rss-to- jss-small.gif alt="RSS to JavaScript" border=0></a> </body> </html> This JavaScript creates a neat sidebar where your selected RSS feed is displayed (Figure 9.9). Figure 9.9. The RSS feed is displayed in a sidebar. FeedRollFeedRoll (www.feedroll.com/rssviewer/) lets you create JavaScript from RSS feeds, but there's a catchyou can only select an RSS feed from FeedRoll's lists (Figure 9.10). Figure 9.10. For JavaScript conversion, you must select an RSS feed from FeedRoll's list (on the right). When you've formatted your HTML the way you want it, click the Update button, and copy the JavaScript that appears (below the HTML formatting options) into a Web page: <html> <head> <title> The News </title> </head> <body> <h1>Here's the news from NPR</h1> <script language=; "javascript" type="text/javascript" src="/books/1/255/1/html/2/http://www.feedroll.com/rssviewer/view_rss.php? type=js&source_id=22775&feed_width=200& frame_color=black&title_textcolor=black&title_bgcolor= white&box_textcolor=black&box_bgcolor= white&feed_showborder=0&feed_spacing=2& feed_align=left&feed_textsize=12&feed_textfont= Times New Roman, serif&feed_maxitems=15&feed_desclimit=& feed_compact=1&feed_xmlbutton=0&link_openblank=1"> </script> </body> </html> Like RSS-to-JavaScript, FeedRoll displays the items in the feed in a sidebar (Figure 9.11). Figure 9.11. A FeedRoll-converted RSS feed from NPR appears on the page in a sidebar. Feed2JSFeed2JS, at http://jade.mcli.dist.maricopa.edu/feed/, is a powerful service for creating HTML from RSS (Figure 9.12). Figure 9.12. Feed2JS is a free service. To create your own JavaScript for an RSS feed, click the Build link, and on the new page, enter your RSS feed's URL, then configure the HTML to be generated as you like it (Figure 9.13). Figure 9.13. Feed2JS lets you preview your feed. When you're ready, click the Generate JavaScript button to display the JavaScript for you to use (Figure 9.14). Figure 9.14. Feed2JS generates the JavaScript for you. Copy your new JavaScript and paste it into a Web page. <html> <head> <title> The News </title> </head> <body> <h1>Here's the news from NPR</h1> <script language="JavaScript" src="/books/1/255/1/html/2/http://jade.mcli.dist.maricopa.edu/feed/ feed2js.php?src=http%3A%2F%2Fwww.usatoday.com% 2Frepurposing%2FNewslineRss.xml&chan=y&desc=1" type="text/javascript"> </script> <noscript> <a href="http://jade.mcli.dist.maricopa.edu/feed/ feed2js.php?src=http%3A%2F%2Fwww.usatoday.com% 2Frepurposing%2FNewslineRss.xml&chan=y&desc=1& html=y"> View RSS feed </a> </noscript> </body> </html> Finally, take a look at the result (Figure 9.15). Figure 9.15. Here's the news from USAToday.com. JawfishAnother site that creates JavaScript from RSS feeds is Jawfish (www.geckotribe.com/rss/jawfish). In order to use this service, you need to create an account and log in (Figure 9.16). Figure 9.16. Use the free trial account to try Jawfish. Unfortunately, the Jawfish site might complain that you need to turn on cookies in your browsereven if they are already on. Because of this problem, you might not be able to create JavaScript from scratch on this site. On the other hand, the Jawfish site does give you a sample piece of JavaScript you can use to test its service. The following sample JavaScript will read an RSS feed from Washingtonpost.com (Figure 9.17). Figure 9.17. You can read Washingtonpost.com news using the sample script from Jawfish. <html> <head> <title> The News </title> </head> <body> <h1>Here's the news from The Washington Post</h1> <script src="/books/1/255/1/html/2/http://rss2js.geckotribe.com/jssample.php"> </script> </body> </html> As you can see, there are a variety of sites that will produce JavaScript. You should be aware that because these sites rely on server-side code running on the service's server, performance is affected by server issues. For example, the UKOLN site's server, located in the United Kingdom, is quite slow for browsers in the United States to contact. Tip Want to check out more RSS-to-JavaScript options? Take a look at the list of services at www.rss-specifications.com/display-rss.htm. |
