Easiest Way To Embed RSS/ATOM Feed On Any Web Page

There are many ways to embed RSS on HTML web page or any web page. Most of them I seen in the past are little complicated to configure and it requires PHP to execute it. Ultimately at the end of the day we need some simple method that can used to embed or display RSS feed of any website on any web platforms. To make embedding simple, I have used FeedEK an awesome jQuery plugin to display RSS/ATOM feed from any website.

With FeedEk you can display feed description, feed counts and feed item publish item which is really cool when compared with other techniques.

Here is how to do it

Step 1: Download FeedEK from here

Step 2: Upload the FeedEk.js to your server and add the below code before closing </head>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="FeedEk.js"></script>

Step 3: Add the placeholder for the RSS widget anywhere on your web page.

<div id="feedek">
</div>

Step 4: Finally add this little jQuery code on your webpage. Make sure you change the feed url and change the other values depending upon your need.

<script type="text/javascript">
 $('#feedek').FeedEk({
   FeedUrl : 'http://feeds.feedburner.com/bloggermint',
   MaxCount : 5,
   ShowDesc : true,
   ShowPubDate:true
  });
</script>

That’s it. Now using this method you can easily embed RSS/ATOM feed of any website on any web page. If you haven’t seen the demo yet, here it is.

To modify the style, you can use your own CSS to match the website’s look or try this sample CSS provided by FeedEK

#divRss{ width:450px; padding: 0px 3px 3px 5px; background-color:#FFF; 
border:1px solid #D3CAD7; margin-top:3px; }

.ItemTitle{ font-weight:bold; margin:5px 0px 0px 0px; padding-top:3px; }
.ItemTitle a{ color:#4EBAFF; text-decoration:none }
.ItemTitle a:hover{ text-decoration:underline }
.ItemContent{ padding:1px 3px 3px 3px; border-bottom:1px solid #D3CAD7; color:#3E3E3E; }
.ItemDate{ font-size:11px; color:#AAA; }