Feed2JS

April 27, 2007 7:16 AM

Feed2JS is an amazingly cool (free) service that lets you harness the wealth of RSS feeds out there for yourself (embedding them in your blog template or web page) in a very simple and highly configurable way. Style it with one of the available CSS styles, or write your own. If you like you can also download the whole Feed2JS application/script to run on your own server. (Step-by-step tutorial inside)
posted by spock (27 comments total)

For those new to RSS (and maybe CSS), this is a simple little tutorial on using Feed2JS to embed the last 25 posts to MeFi Music in your web page. If you can follow step-by-step instructions, you can do this — even if you don't know HTML, JavaScript, RSS, or CSS (although you might learn a bit about those things in the process).

• First copy the Music RSS feed URL. (Right-click on the little orange RSS icon to the left of "Music" in the MeFi footer and Copy Link/Shortcut)
• Check to see that it is valid. Paste the URL in the field on the RSS Validator page and click the "Validate" button. If it tells you the feed is valid, go to the next step
• Go to the Feed2JS build page and paste the feed URL in the first field on the page. (After this I will refer to this URL as simply "the Build Page").
• Configure the feed the way you want it to look with the options on the Build Page. They are explained well on the page itself. If you want a button/link to PLAY the mp3s on your blog/web page then be sure to click the "Yes" button on the Podcast Enclosures section.
• See what your feed will look like with the options you have selected: Click the "Preview Feed" button on the Build Page. Note that this is just a look at the options you have selected. You can style the feed (colors, fonts, width, ect.) using CSS, which we will explain later. Close the window (or use the Close Window button at the bottom of the Sneak Preview page).
•If you are not completely happy with the options you have selected make the changes to the options on the build page and click "Preview Feed" until you like how it looks. When you are happy click the "Generate JavaScript" button.
• On the resulting page, you will see a textarea with the heading "Get Your Code Here". Right click in that textarea and Select All. Then copy it. (You may wish to paste it somewhere temporary, like a Notepad document until you are ready to paste it in your blog template or web page. See below on how to style your feed. The (optional) CSS code created in that step should be pasted at the top of this Notepad document between <style> and </style> tags.)
• Open your web page or edit your blog template in CODE VIEW. Copy and Paste all the code from the Notepad document you just copied wherever in your page you want the feed to appear.

Styling your Feed*
Your feed may appear functional, but a little ugly at this point (colors, fonts, ect.) You can change that with the Style Page:
• Repeat Step One (above) copy the feed URL from the little orange RSS icon
• Paste it in the first field on the Style Page ("URL").
• Select a style from the dropdown menu and click the "style this feed" button.
• The resulting page will have the CSS code to generate that look in the textarea.
• Right-click in the textarea and Select All, then Copy the code.
• Go to the Notepad document and click your cursor at the very beginning of the document (before the javascript code you pasted earlier). Type: <style>
• Now PASTE the CSS code you copied.
• Now type: </style>
• Your Notepad document should now looks like this:
<style>
[a bunch of CSS code]
</style>
[the JavaScript code you pasted first]
• ALL of this code should be selected and copied and pasted in your blog template or web page (in code view) wherever you want the feed to appear (as described above).
• Remember to SAVE your modified web page or blog template to see the changes.

*Those of you more experienced with CSS may choose to write your own CSS code, rather than using the canned ones in the dropdown menus. You may also choose to add the code to your external style sheets (or create a new external style sheet just for feed2js. But you already know all of that.

Note that while this example used the MeFi Music feed, you can do the same thing with any valid feed. The site PopURLS.com grabs multiple site feeds and displays them together on one page. You can do this with Feed2JS, also.

If you want to see a sample web page that JUST pulls in the feed and styles it, using the methods above go here (self-link). To see the code, do a View Source. (You should see basically what would be on your NOTEPAD document, if you followed the directions above).
posted by spock at 7:18 AM on April 27, 2007

Note that only the final link in the tutorial is a self-link. I am not affiliated in any way with the writer of this code or the company which hosts the free service (noted on the feed2js home page). Just a satisfied user!
posted by spock at 7:20 AM on April 27, 2007

Note that only the final link in the tutorial is a self-link.

And it's a good thing, too. I've just taken the tutorial on 'what we do to self-linkers around these parts' and it's pretty scary.

Cool post, btw.
posted by chuckdarwin at 7:25 AM on April 27, 2007

Can anyone explain to me why I'd want to do this? That is, if I haven't invented time travel and am not intending to go back to 1999 and get startup capital for my "web portal"?
posted by DU at 7:28 AM on April 27, 2007

This will go great with my fresh installation of PHP-Nuke and my new Adsense scam.
posted by Pastabagel at 7:33 AM on April 27, 2007

Can anyone explain to me why I'd want to do this?

No more than I can explain why you were even interested in the post or sufficiently motivated to shit in the thread. Nobody's holding a gun to your head, dude.
posted by spock at 7:44 AM on April 27, 2007

I'm interested in the post to find out why everyone else is so interested in putting RSS feeds on their pages. If it's the web portal explanation, then fine. If not, I'd like to know about the omgawesome thing I'm missing.

If you didn't like my reply, why did you read it?
posted by DU at 7:51 AM on April 27, 2007

First link 404 for me.

Also, maybe I'm failing to see the novelty here, but isn't this just a javascript re-implementation of RSS? Granted, I see the utility for sites that don't control their backend. Frankly, those other-site-RSS boxes are the second thing I turn off on most sites.
posted by Skorgu at 7:58 AM on April 27, 2007

Well, this is a bit of a blast from the past for me. I wrote the first rss to javascript service in September of 1999. If you look at the first entry in the history of Feed2js, that's the service I wrote.

This was before portals/homepages had built in aggregators. The idea was to be able to place the content from an rss feed on another page. There are lots of applications for this, but you'll see this kind of functionality on places like the google home page these days. This service enabled any page to do the same with minimal knowledge on the part of the page creator. This was before iframes, so it solved the kind of problem asked about here.

The challenge from a hosting perspective was, and still is, traffic and bandwidth. I was at an educational institution and did it out of technical curiosity and because I needed the functionality myself, but the traffic quickly eclipsed anything people really came to our site for. I learned a lot about caching. When I learned about eTags, I got on that in a hurry. Still it was a lot of traffic for a lowly server -- a couple of hundred thousand fairly processing-intensive hits a day on a pentium 90 iirc.

The challenge back then and still now is that there was no institutional support for it, and no-one understood what it did (still don't). When I left, no-one really knew or cared to keep it going, which was fair enough, and other similar services were available, including feed2js. Also, I think the utility of a service like this has faded somewhat. I generally find it annoying too. It's one of those things best done subtly. Mind you, a version of feed2js I host was being used on one of AOL's main pages for a while.
posted by idb at 8:11 AM on April 27, 2007

Have a look at the Google AJAX Feed API.
posted by echelon at 8:11 AM on April 27, 2007

it's an amazingly cool (dead) service.
posted by spish at 8:13 AM on April 27, 2007

Alright. I apologize for taking offense, DU. If you are seriously interested, I'll be happy to give you some examples. First of all, start here: RSS in Plain English to see what is significant about RSS (using it the "regular" way with an RSS aggregator like Google Reader).

The main thing that you should get from this, is that an RSS feed will automatically show you new stuff when it appears. In my example, when a new song is posted to MeFi Music, it will automagically appear on my feed2js page (that page is not static, but it polls the feed once an hour and then anyone who visits the page sees the latest stuff. You didn't have to change the code to change the content. When the content on the source of the feed changes, your feed2js use of it changes.

This could be somebody else's feed, or one of your own. For example: You could embed the top selling (or newest) songs on iTunes using their RSS feed generator. Then take that feed URL and run it through feed2js and show the songs (and album art) on your web page or blog. Like this.

Or, let's say you have a del.icio.us account to keep all your bookmarks "in the sky", using your own taxomony. Each tag (category) you create has its own RSS feed. So you could show your latest bookmarks (all or just one category) by copying the appropriate RSS feed URL and running it through feed2js.

A university ITS HelpDesk could create a selfhelp page with frequently asked questions on various topics or applications. All they would have to do is create a HelpDesk blog category for each topic or application, posting blog entries with questions and solutions. Then a univeristy web page could aggregate all of them into a single page (ala the popurls page). The selfhelp page automatically updates as posts are added to the blog categories.

There are a million examples, and the list gets bigger each day. You can even turn an RSS feed into a Podcast. Enter the MeFi music feed URL into that page to see what you get.
posted by spock at 8:14 AM on April 27, 2007

Correct link to build page (they changed the way they do this since my installation). Home page: feed2js.org
posted by spock at 8:17 AM on April 27, 2007

Well, I know what RSS is. But the only uses I've seen for embedding it have been "top headlines from Slashdot!" which I can already get by just going to Slashdot, i.e. I don't need MetaFilter to be a portal for me.

But the bookmarks example is good. I could also, say, put my Amazon wishlist as a feed to my page, rather than a simple begging link. If Amazon RSSes my wishlist.
posted by DU at 8:23 AM on April 27, 2007

I don't know if Amazon makes it this simple, but here's a site that will generate it off of your email address: Amazon Wishlist Feed Generator.
posted by spock at 8:30 AM on April 27, 2007

Another example, using a university library as an example. Searchable online databases (the ones who "get" the power of RSS) are beginning to generate RSS feeds for search results. The implications of this are amazing. You may know how many clicks it takes you to get to the appropriate online database and enter the right search terms to get what you are looking for. (Let's say your area of research is in meteorology, specifically supercells that produce tornados.) You could go to one of these databases (that offers RSS feeds on search results) enter your terms once and get back a list of search results. If you copy and paste the RSS feed URL into Google Reader (or run it through feed2js and put it on a web page) all you have to do (at ANY TIME IN THE FUTURE) is go to that web page (or Google Reader) and see the latest search results with your criteria. You don't have to navigate back to the search page and enter your terms all over again. Google offers this service on just about everything except their Search Results (which is sorta inexplicable to me).
posted by spock at 8:41 AM on April 27, 2007

Crikey. I was not aware of Dan Bricklin's Feed Generator program ListGarden before now (Windows or Mac). It allows you to create feeds from just about anything. Zowie. I'm gonna download and play with this. See you in a few years.
posted by spock at 8:44 AM on April 27, 2007

On the one hand, it looks useful enough but on the other it seems like more work than just writing XSL-T or even attacking the DOM with XPath and creating elements out the other side. RSS structure is relatively predictable (that's a joke, son). You're already doing edits on the server, although I guess this is good for folks who have no CGI access or who could give a rat's ass about the mechanics of the process. I admit I have a hard time identifying with such people.
posted by Fezboy! at 8:44 AM on April 27, 2007

Yes, this is admittedly "lowering the bar" so the less Godlike among us can make use of the technology, Fezboy! But thanks for condescending to communicate with us lower lifeforms.
: )
posted by spock at 8:50 AM on April 27, 2007

RSS is indeed amazingly cool. I use del.icio.us a lot and I have a live bookmark on my browser here to my 'comics' tag. I have a similar live bookmark on my computer at home and my laptop. I can add a bookmark once and see it reflected in all three places at once.

I have a static-text feed aggregator generated by rawdog which I won't link to because the load would crush my poor linode. It actually pulls a list of feeds from del.icio.us and then aggregates those feeds. This way when I find a site I want to read, I can simply tag the rss feed itself with the tag 'feed' and it'll get picked up and aggregated automagically the next time rawdog runs.

Google Videos has RSS feeds for searches, search for "engEDU" and you'll see new Google Tech Talks as they come online. TvRSS.net has a set of feeds for newly-released TV show torrents, which you can catch with Azureus and the RSS Feed Scanner plugin. Once Mythbusters episodes magically appear in your downloads directory, you'll never go back to the TV again.
posted by Skorgu at 8:55 AM on April 27, 2007

Thanks for the rawdog link, Skorgu. I had not heard of that one!
posted by spock at 9:09 AM on April 27, 2007

Once Mythbusters episodes magically appear in your downloads directory, you'll never go back to the TV again.

Except the last couple episodes haven't appeared on any of the internets I frequent. What's up with THAT?
posted by DU at 9:21 AM on April 27, 2007

I actually am trying to transition off of rawdog onto a ruby aggregator called feedchamp which I won't link to because their website is suffering for some reason. The only problem is that rawdog is working for me right now so I have no motivation to polish my modifications and submit them to trunk.

I'm also dying to get my bookmarks off of del.icio.us since their uptime post-Yahoo hasn't been stellar, but I'm far too lazy so far.
posted by Skorgu at 9:26 AM on April 27, 2007

DU back to mininova with you I guess :)
posted by Skorgu at 9:27 AM on April 27, 2007

XSLT and XPath are hardly Godlike for those who are already expected to be editing HTML, developing CSS, or installing server applications. I've always been a teach-a-person-to-fish kind of guy. Then again I've spent more than an hour of my time this morning writing documentation replete with screenshots for how to click the "Convert to PDF" button so that a worrisome user will remember how to create a PDF document from a Word file. So, yeah, my apparent condescension is probably born of level of frustration with people who do not exhibit the curiosity to look at the how and why in addition to the what when they want to harness the power of technology.

Sorry to have appeared so incredibly aloof by way of admitting my own lack of empathy. In my original comment I did say that I could see how the item you FPP'ed could be useful. :)
posted by Fezboy! at 9:56 AM on April 27, 2007

The nice thing about feed2js for the less technically inclined is that it involves pasting one line of HTML into your web page editor or CMS. A very low threshold for consuming rss feeds.
posted by idb at 10:08 AM on April 27, 2007

Yeah, idb. The fact that it works with CMSs (since it is just a javascript that can be put anywhere in the body) is a benefit that I neglected to mention.
posted by spock at 10:42 AM on April 27, 2007