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.)

BuzzBoost in action

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.

Setting Up BuzzBoost

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.

.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none;
}

.feedburnerFeedBlock ul li {
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E0E0E0;
}

.feedburnerFeedBlock ul li span.headline a {
color: #990000;
text-decoration: none;
display: block;
}

.feedburnerFeedBlock ul li span.headline a:hover {
color: #535353;
}

#creditfooter {
display: none;
}

And this is what the finished product looks like.

BuzzBoost in action

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.

Published May 18th, 2008 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

49 Responses

Comments are now closed on this post.

  • Ajith Prasad Edassery, May 19, 2008

    Thanks for this info. Will try it immediately – though I visit feeburner site almost every day, didn’t see it yet.

    Cheers!
    Ajith

  • Online Poker, May 19, 2008

    It is an options to bloggers,but will it confuse readers because most of the readers subscribe through feedburner.

  • Startlogic Review, May 19, 2008

    I really really thank Feedburners for giving the static websites the opportunity about feed.

  • fatsgone, May 19, 2008

    I can see how this would clear up and unclutter a LOT of websites i know. I’m going to recommend it to a few people i know who need it ASAP. Thanks for the valuable info!

  • Zinni, May 19, 2008

    I was actually planning on doing this in the next version of my portfolio site. Finding the time to get around to it is another story though.

  • cookware, May 20, 2008

    These services are opening a huge opportunity to the amature web developers. I appreciate these services a lot.

  • womens cufflinks, May 21, 2008

    I’ve heard of BuzzBoost before but i’ve never gotten down to using it because of my apparent laziness. After reading your guide though, I might want to give it a go.

  • Jas, May 23, 2008

    Many thanks for this. I asked on various forums how this could be done to a standard html page but no-one had a clue. This worked straight out of the box!

  • Neha, June 5, 2008

    Thanks A Lot!! I looking for the Custom Style options. I tried but at last ended being mess. After reading your post, started working. :)

  • emu oil, June 5, 2008

    yeah ok that sounds like a good option as well… more like a site map then.. Feedburner always surprises me hey…

  • adelle, June 6, 2008

    Thanks for the tip Steven, this is great. You explained it much better than Feedburner :)

    Cheers!

  • Barb, July 1, 2008

    Yes, thanks — clear, clean, to the point, with helpful css too. Took me yonks to find my way here but I’m glad I did.

  • Michael, July 7, 2008

    Thanks for the information, very useful and have already put it to use!

  • gout, July 19, 2008

    great post….I am very interes wiyh your post about buzzboost….I hope very useful for my http://www.diabetes.fat-site.com, thanks

  • Chaz, August 23, 2008

    EXCELLENT !!!! I am so happy I found this post!! You helped me tremendously!!!
    http://www.thedobareview.com

  • Jack Yan, October 6, 2008

    Thank you! I totally forgot that we even had Feedburner for our blog—and that there was such a widget!

  • Jon Penn, February 16, 2009

    Thank you…. a very good and well explained tutorial!!!

  • Jimmy, March 4, 2009

    Ah! Thnx! You made it look easy… and it was.

  • Graham, July 15, 2009

    I have been wanting to do this for ages, but never got around to it. You have made me see how simple the process is and now I am implementing it!

    Thanks again :^)

  • Ivan Temelkov, January 22, 2010

    This is a very helpful post. FeedBurner’s BuzzBoost instructions are really shady.

    Thank You!

  • Robert, January 23, 2010

    I would like to know if this feed is indexed for SEO on the static page. I am curious if this would add some SEO benefits for a static website.

    Thank you.

  • Sumeet Chawla, May 24, 2010

    Feedburner is truly a great tool! I was just searching some more info about buzzboost and this really helped me understand its main purpose. Thanks for this tutorial ;) Might be useful in the future…

  • Suneel, July 14, 2010

    This code has helped me a ton in customizing BuzzBoost.

    Thanks for sharing and watch your code performing magic on my blog. :)

  • ponsel baru, August 23, 2010

    i implented the tutorial of you, but it seems bad without an icon in every feed. how? tq

  • nishad, October 16, 2010

    thx .. its wrking g8

  • Bill, January 10, 2011

    Is there a way to take the date after it is optioned on and show it appended to the listing of the feed news articles? We like you have everything checked off and format it as you show above. Just can’t seem to figure out how to put the date, when checked on, at the end of the each article heading instead of below on a new line.

    Thanks

    • Vandelay Website Design, January 11, 2011

      Hi Bill,
      I’ve never used the date through BuzzBoost, but if it’s provided I would think you could use CSS to align it.

  • Sam, February 8, 2011

    Thank you so much for this info, exactly what I needed.

    I LOVE YOU! :)

    Thanks again.

  • Andrew Walsh, March 4, 2011

    Hi, good post. I’ve started using BuzzBoost on a few of my sites. Do you know what to do if it seems to be loading slower than it should?

    On the homepage of my website (which I’ve linked to) it usually takes at least 5 seconds for the posts to load, which looks very bad when the rest of the site has to wait for it.

    • Vandelay Website Design, March 4, 2011

      Hi Andrew,
      Unfortunately, I don’t really have any answers for you. I know it’s not usually the fastest loading thing, but I haven’t experienced it slowing down load times that much. You might want to see if you can email someone at FeedBurner and maybe they’ll have some advice.

  • beth, April 14, 2011

    Thank you! This is exactly what I was looking for.

  • Simon, April 15, 2011

    Thanks for this – I think a great indicator of the quality of a post is how long after it was written – all the way back in 2008 in this case – are people still finding it, using it, and finding it valuable.

    Really clear explanation of how to adjust the CSS – has helped yournextvisit.com.au very much.

    Thanks again

  • Ben, May 18, 2011

    Another thank you! We are not using this yet, but maybe in the future. It’s great to have an article describing exactly what I need to know about BuzzBoost. The simple “Converts your feed to HTML” definition on the website is not entirely clear. The pictures are much appreciated.

  • Stephen, June 3, 2011

    Thanks for this (hope you don’t mind me lazily borrowing your CSS as well) – had been battling with facebook to get the right data to display but your feedburner signpost saved the day…

    Just need to tweak the CSS a bit to fit the website now.

    By the way, any tips on how to truncate long titles, e.g. show a title excerpt? Buzzboost shows how to truncate the content only.

  • djfromantalya, July 19, 2011

    is it possible to have feed by name, by genre, by color… ?

  • Sagar Ranpise, August 10, 2011

    Very very helpful! Thanks for sharing!

  • Suman, September 14, 2011

    Previously I was able to fetch post from blogger, but from last one week posts are not displaying on my website. Its showing error. Please advise.

    • Vandelay Website Design, September 14, 2011

      Suman,
      You’ll have to check with FeedBurner. Sorry, I can’t provide support for their product.

  • steve, November 17, 2011

    Working fine on my personal blog!!

    But my feed is showing the last edited date instead of the published date eventhough it’s sorted by published date. Any idea why this is happening?

    • Vandelay Website Design, November 17, 2011

      Steve,
      I don’t know exactly how that works, you would have to check with FeedBurner.

  • Nick, January 24, 2012

    Any way to change the bullet image instead of just removing them? I want to replace the bullets and use a start that I have made.

    I tried:
    .feedburnerFeedBlock ul li {
    padding: 5px;
    background: url(‘../images/list-icons/star_12x12.png’) no-repeat left center;
    }

    I also tried to use:

    list-style-image: url(‘../images/list-icons/star_12x12.png’) no-repeat left center;

    neither works. Any ideas?

    • Vandelay Website Design, January 24, 2012

      Hi Nick,
      I would try contacting FeedBurner. My experience with buzz boost is limited to examples like the one in the post

  • Lin, February 5, 2012

    I can’t change my date’s font size. Here’s my code:

    .feedburnerFeedBlock ul li p.date
    {
    font-size: 8px;
    }

    Is there any wrong with my code?

  • Lin, February 5, 2012

    Nevermind, it’s solved!

  • Sarah Jones, July 16, 2012

    Thanks, worked like a charm!!! Got my RSS now.

  • Mark, June 29, 2013

    Exactly what I’ve been looking for! I wanted to style my feeds in a unique way, and this blog has explained just that. Let me try out what I’ve learned.

  • mak100, June 29, 2013

    Thank you for sharing this “easy to follow” steps on blogger customization. I rellay appreciate

  • Steve, August 19, 2013

    HI, please delete my previous comment. Thanks