How to easily display an RSS feed on your site using FeedBurner

I’m in the process of updating my personal website, and as you can see, my blog exists here on WordPress. I needed a way to display my latest blog headlines on the “Blog” page of my new site. I initially wanted to learn the hard way and create an RSS Reader from scratch using Ajax, but I decided to stay true to RSS and keep it “simple.” Plus, as you can see, it’s anything but simple to create an Ajax reader from scratch. If you’re looking for a better tutorial on creating the Ajax reader, I suggest checking out this book by Christian Heilmann (who I actually met recently at HTML5 Live).

However, it wasn’t very easy to find an easy (and more importantly–free) way to add RSS content to your website. I mentioned this to a coworker, and he suggested that I check out FeedBurner. To be honest, I’m still not exactly sure what FeedBurner is intended to do–I think it offers analytics and RSS feed syndication options for bloggers. But one thing it does well is allow you to quickly setup an account, copy some code, and paste it into the HTML page where you want the RSS content to be displayed. You can customize how many posts you would like to appear, if the date is included, etc. Here’s how:

1) Grab the URL of the RSS feed that you would like to display. There should be an RSS feed icon on the blog homepage, or you can just add /feed to the end of the URL (e.g., dylanwooters.wordpress.com/feed).

2) Go to feedburner.google.com and follow the instructions to open an account.

3) Once logged in to the new account, click on the “Publicize” tab.

Publicize Tab

4) Click on BuzzBoost on the left-hand side

BuzzBoost Link

5) The BuzzBoost control panel will allow you to customize how the feed appears on your site. Once you have your preferences selected, copy the code snippet.

Code Snippet

6) Now you can paste the code into your HTML page, wherever you would like the RSS content to appear. Here I have the snippet pasted into the “blogholder” div.

feedburner4

7) You’ll probably want to style the content as well. To do this click on the “how to apply your own styles” link under the “What’s Next” heading on the BuzzBoost control panel. This will take you to another page where you’ll be presented with the actual HTML that is written by the JavaScript that FeedBurner provides (below). You can then use this as a guide to style the RSS content in your CSS stylesheet.

FeedBurner output HTML

8) That’s it. Here is how it looks on one version of my new site (I have quite a few going).

My Site - Blog Page

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: