Feed Some RSS to Me

feedsomersstome
Aside from content widgets automatically generated by social media websites, RSS feeds are the easiest way to get content from other websites onto your pages. However, the process can be REALLY esoteric, especially if you’re new to the process of incorporating RSS feeds into your personal designs.

When I first started fiddling around with RSS, I had no idea what I was supposed to do with the RSS link…and then, I found a Web service that handled most of the backend code for me.

The Solution: Feed2JS.org

I literally stumbled across this site while aimlessly browsing StumbleUpon–best random search result ever! Feed2JS.org, or “feed to JavaScript,” turns any RSS feed into a block of JavaScript-ed content that can display on your web page.

To test this, I went to their Build Your Feed page, plugged in the URL of the RSS feed I wanted (the first one I did was Last.fm), and then I was given the chance to consider the following options.

  1. Show or hide info about the feed publisher (the website you’re getting the feed from)
  2. Number of items to show in the feed
  3. Show or hide item descriptions
  4. Show item author (if applicable) or not
  5. Use HTML in the item display, or format it with CSS
  6. Show posted date or not
  7. Show the time of post according to your specific time zone or not
  8. Open links in new window or not
  9. Choose UTF-8 character encoding or not
  10. Podcast enclosures or not (link directly to media file)
  11. Create a custom CSS class for your feed or not

An Example of a Built Feed

In the case of my Last.fm RSS feed, I didn’t want a title (because I was going to title it myself with the words “Last Played”). I also didn’t want any descriptions of each song, just the title of the song. I wanted the 10 last played songs to display, and I wanted their info to pop up in a new window so that people didn’t just lose my page.

I also didn’t bother with including the date, time, or author of the post because I felt that would unnecessarily clutter the look of the feed. I wanted it to look as much like a WordPress widget as possible. Lastly, I added the custom CSS class of “lastfm” so that I could style my Last.fm feed just like I wanted it.

So, my Last.fm feed’s Javascript turned out looking something like this in Javascript:

<script language=”JavaScript” src=”http://feed2js.org//feed2js.php?src=http%3A%2F%2Fws.audioscrobbler.com%2F1.0%2Fuser%2F__MYUSERNAME__
%2Frecenttracks.rss&num=10&targ=y&utf=y&css=lastfm”  charset=”UTF-8″ type=”text/javascript”></script>

And this is what it ended up looking like on the actual test page:


I added the Last.fm icon and “Last Played” text myself, but the rest of the info is all Javascript-ed in! Neat, huh?

WARNING! Don’t Forget to Style The Feed!

The last thing about Feed2JS feeds? Remember to style them, otherwise they look pretty yucky on the page–just basic Times New Roman size 12 font, and default link colors (oh, the horror!).

Even though I had specified a custom CSS class using the “Build Your Feed” page, I had no luck styling my Last.fm feed with the class. I even went to the Style Your Feed page and read up on how to construct the CSS classes that my feed ostensibly needed, but it didn’t work for me at all. (Not sure if it was a browser issue or user error–somehow, I suspect the latter. LOL)

So, instead, I styled the display and the links by specifying the link styles of the div with the id “lfm” that contained my Last.fm feed, using code like the following:

#lfm {
background-color: #abb461;
color: #FFFFFF;
border-radius: 10px;
padding: 3px;
list-style-type: none;
font-size: 11px;
font-family: “Arial”, sans-serif;
}

#lfm a {
color: #fbfcf3;
}

This worked beautifully (aside from the silly list bullets that won’t go away despite putting “list-style-type: none;” in my code), so I’m not worrying about the custom CSS class unless I have to. The less headaches I encounter while coding, the better. 🙂

Summary

RSS feeds are great ways to put interactive, live-updating content on your page, even in this age of WordPress widgets and little automatically-generated boxes that do it all for you. Feed2JS provides a quick way to put the RSS feed on your page using Javascript, and through their generated code, you can learn how to code the Javascript yourself one day!

One thought on “Feed Some RSS to Me”

Leave a Reply

Your email address will not be published. Required fields are marked *