Display Your Feed on a Static HTML Page Using FeedBurner’s BuzzBoost

Almost every blogger now is using FeedBurner to publish their feed. The most obvious benefits of using FeedBurner are the statistics and the subscriber count, but there are plenty of other free options that you can use or customize to enhance your blog. One of these options is called BuzzBoost, and essentially it republishes your feed as HTML so that it can be used anywhere.

One of the most productive ways to use BuzzBoost is to publish links to your blog posts from somewhere outside of your blog. In the example that we’ll be looking at here, I wanted to include links to the most recent blog posts from our website’s home page, which is outside of the blog. (See the end result in the image below.)

If you’ve looked around the portfolios of other designers you have probably seen the same thing in action. A growing number of designers are including a blog as a part of their portfolio sites, so it makes sense to promote the most recent posts from the home page. In this tutorial I’ll quickly take you through the process of getting the links from your feed displayed on a static HTML page.

Step 1 – Login to FeedBurner

If you already have a FeedBurner account set up, login and click on your feed.

Step 2 – Activate BuzzBoost

Click on the “Publicize” tab, and then click on “BuzzBoost” in the list at the left side of the screen (see image below). At this point BuzzBoost will give you a number of different options. You can choose how many items (posts) you want to be displayed, if you want the links to open in the same window or a new window, displaying the feed title, displaying the date, and several others. One of the options is “display item content.” If this box is not checked all that will be displayed is the title of the blog post (which is what I will be using), and if that box is checked you can choose to display the entire post or a brief excerpt in plain text or HTML. For my purposes I have chosen to show 5 posts, have them open in the same window, and everything is left unchecked. Once you have everything set the way you want it, click “Activate” at the bottom of the page (you can easily change these settings later). If you’ve already activated BuzzBoost you’ll see the option to save instead of activate.

Step 3 – Copy and Paste the Code

Once you choose your settings and activate BuzzBoost you will be provided with the piece of code. Copy the code provided by FeedBurner and paste it into your page wherever you want it to be displayed.

Step 4 – Customize

Now that you have pasted the code into your page, BuzzBoost should be completely functional. Most likely though, you’ll want to make some customizations to the appearance of the output to fit with the rest of your page. Fortunately, this is a pretty simple process that can easily be done by editing your style sheet. FeedBurner/Google provides some Common BuzzBoost Styling Tricks that gives you a good starting point for making your customizations.

In my case, I wanted to put BuzzBoost into the sidebar of the home page and display the blog posts in a list, very similar to a blog showing a list of recent posts in the sidebar (in this case, the home page is outside of WordPress, so simply using the standard method of displaying recent posts is not possible). I wanted to style the list a little bit to get rid of the bullets, change the link colors, set padding and borders, and remove the FeedBurner image at the end of the list.

Earlier I said that I left all of the boxes unchecked in the BuzzBoost settings, including the option to display the feed title. Instead of displaying the feed title I simply inserted a link directly above the BuzzBoost code that says “From Our Blog”, which serves as the title. You can do it either way, use BuzzBoost to include the title, or simply enter it yourself.

FeedBurner uses divs and classes for everything produced by BuzzBoost, so it’s pretty simple to style it however you like. The CSS code that I am using is shown below.

And this is what the finished product looks like.

Possible Uses

As you can see from this example, this is a very simple way to display the most recent posts from your blog on another page. In this case the page is on the same domain, but it doesn’t have to be. If you run a few different blogs you could set up a one-page bio site that uses BuzzBoost to display your most recent posts from all of your blogs. Additionally, you could use it to put a list of your recent posts from one blog on another blog that you own. For example, I could use BuzzBoost to show links from this blog at my other blog, Traffikd. There are a number of different things you can do with BuzzBoost, so I hope this tutorial helped to show you how easy and how useful it can be.