Create Recent Posts Widget Using Feedburner

Feedburner is a great way to create a simple and quick loading recent posts widget on your homepage or in the sidebars. You can even be able to show your images if you have chosen to apply read more break after the images.

If you are fed up using the slow recent posts widgets on your blog or do not want to show the latest posts on your homepage for some reason, there is no harm in giving a try to feedburner. It is not only easy to implement, but also customizable, and what’s good is that it even loads faster than many such services. An added advantage associated with it is that you can choose to display it anywhere, even on other sites or blogs. Let us then, learn to implement it’s code on your blog.

Activating BuzzBoost on your feed

First of all, go to your feed on feedburner. Under the publicize tab, you will find BuzzBoost service. Click on that. The opened window will display the code, the preview of your feed and the settings for your feed. Don’t worry about the dirty look of the preview; you should be concerned about the settings for your BuzzBoost. The settings section will look something similar to this.

feedburner BuzzBoost settings

Choose the number of posts you want to display and configure other options in the way you need in your widget. Under “item content to display” select the option “plain text” if you just need a simple and clean recent posts. However,  you can opt to display the full HTML (This will take the same formatting you have applied to your post body). If you want to display the images, make sure to put your jump break after those images and set your blog feeds to “until jump break” in your blog settings. Look at the preview to ensure you have not made any mistake. Then, save and activate your BuzzBoost service.

The buzzBoost service will automatically update the code and render it on the top.

feedburner coding for recent posts widget

Adding the widget code to your blog

Your next task will be to style the widget and its content. To do this, you need to put your feedburner code into the division tags assigning an id as this:

<div class="feedburnerFeedBlock" id="fb">
<script src="" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href=""></a><br/>Powered by FeedBurner</p> </noscript>

The portion highlighted is the one you got from feedburner. Add this code in the form of a HTML widget, wherever you want to show it on your blog.

Styling your recent posts widget

Using the ID that you assigned to the feedbrner block, You get plenty of options to style your recent posts widget. An example is given here,

#fb { background: #FEFEFE; background-color: #FFFFFF;
background-image: -moz-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F9F9F9)) !important;
background-image: -webkit-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image: -o-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image: -ms-linear-gradient(#FFFFFF, #F9F9F9) !important;
background-image: linear-gradient(#FFFFFF, #F9F9F9) !important; list-style-type:none; border: 1px solid #CCCCCC; border-radius: 10px; margin: 30px 0px 0px 10px; padding: 10px;}
#fb ul {list-style-type:none;}
#fb ul li { margin: 6px; padding: 5px; border: 1px solid #EEEEEE; border-radius: 5px;}
#fb ul li a{ font-weight: bold; font-size: 13px; Padding-bottom: 10px;}
div  #creditfooter{ display: none;}

The portion “div  #creditfooter” is for the feedburner logo. You can either style it to show on the left, right, top or bottom or just choose to hide as I have done here. You can play with the code to achieve the desired output. For this, you have to go to “Add HTML/CSS” option under the advance settings for customizing your template and paste the code in the box there. You can even experiment with the BuzzBoost settings concurrently to see what works for you. Click on save template when you are satisfied with the look and feel of your recent posts widget and thank feedburner for its excellent services.