Import RSS Feeds using jFeed (jQuery)
Import RSS Feeds from any rss enabled site using jFeed (jQuery)
This simple tutorial will show u how to Import rss feeds of any site into your own custom area/block of site. It can be used as news import from yahoo, bbc etc. As we know, RSS feeds usually using to transfer some news to readers. Today I will tell you about RSS feeds and teach you how to make own RSS aggregator. So you will able to display different RSS feeds at your website with nice design.
Here is a sample:
Live Demo
Download in package
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML.
This is our main page code (with 2 RSS blocks). Pay heed to RSSAggrCont elements. At its params. ‘rssnum’ mean how many rss elements will display at page. ‘rss_url’ – RSS url. Hope you will able to easy change these params.
templates/rss_page.html
<link href="templates/css/styles.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jfeed.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.aRSSFeed.js"></script>
<div class="RSSAggrCont" rssnum="5" rss_url="http://rss.news.yahoo.com/rss/topstories">
<div class="loading_rss">
<img alt="Loading..." src="templates/images/loading.gif" />
</div>
</div>
<div class="RSSAggrCont" rssnum="5" rss_url="http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml">
<div class="loading_rss">
<img alt="Loading..." src="templates/images/loading.gif" />
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready( function() {
$('div.RSSAggrCont').aRSSFeed();
} );
</script>
Step 2. CSS
Here are used CSS styles.
templates/css/styles.css
.RSSAggrCont {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:500px;
padding:10px;
background:#f3f3f3;
margin:15px;
float:left;
}
/* RSS Feeds */
.rss_item_wrapper {
padding-bottom: 8px;
}
.rss_item_wrapper:last-child {
padding-bottom: 0px;
}
.rss_item_header {
font-size:12px;
font-weight:bold;
padding-bottom:0px;
}
.rss_item_header a,
.rss_item_header a:link,
.rss_item_header a:visited,
.rss_item_header a:hover,
.rss_item_header a:active {
font-size:12px;
font-weight:bold;
color:#33c;
}
.rss_item_info {
color:#999;
font-size:9px;
}
.rss_item_desc {
text-align:justify;
font-size: 11px;
}
.rss_read_more {
background-color:#EDEDED;
font-size:11px;
font-weight:normal;
height:30px;
line-height:30px;
vertical-align: middle;
margin-top:2px;
padding:0 9px;
text-align:left;
text-decoration:none;
text-transform:capitalize;
}
.loading_rss {
text-align:center;
width:89px;
height:64px;
background-image:url(../images/loading_bg.png);
z-index: 10;
margin: 10px auto;
}
.loading_rss img {
margin-top: 16px;
}
.loading_rss div {
width:89px;
height:64px;
background-image:url(../images/loading.gif);
background-position:center center;
background-repeat:no-repeat;
}
Step 3. JS
Here are few necessary JS files to our project.
js/jquery.aRSSFeed.js
// jQuery plugin - Simple RSS Aggregator
(function($){
$.fn.aRSSFeed = function() {
return this.each( function(){
var $Cont = $(this);
var iMaxNum = parseInt($Cont.attr( 'rssnum' ) || 0);
var sFeedURL = $Cont.attr('rss_url');
if (sFeedURL == undefined)
return false;
$.getFeed ({
url: 'get_rss_feed.php?url=' + escape(sFeedURL),
success: function(feed) {
if (feed != undefined && feed.items) {
var sCode =
'<div class="rss_feed_wrapper">';
var iCount = 0;
for (var iItemId = 0; iItemId < feed.items.length; iItemId ++) {
var item = feed.items[iItemId];
var sDate;
var a;
var oDate
if (null != (a = item.updated.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/)))
oDate = new Date(a[1], a[2]-1, a[3], a[4], a[5], a[6], 0);
else
oDate = new Date(item.updated);
sDate = oDate.toLocaleString();
sCode +=
'<div class="rss_item_wrapper">' +
'<div class="rss_item_header">' +
'<a href="' + item.link + '" target="_blank">' + item.title + '</a>' +
'</div>' +
'<div class="rss_item_info">' +
'<span><img src="templates/images/clock.png" /> ' + sDate + '</span>' +
'</div>' +
'<div class="rss_item_desc">' + item.description + '</div>' +
'</div>';
iCount ++;
if (iCount == iMaxNum) break;
}
sCode +=
'</div>' +
'<div class="rss_read_more">' +
'<img class="bot_icon_left" src="templates/images/more.png" />' +
'<a href="' + feed.link + '" target="_blank" class="rss_read_more_link">' + feed.title + '</a>' +
'</div>' +
'<div class="clear_both"></div>';
$Cont.html(sCode);
}
}
} );
} );
};
})(jQuery);
js/jquery-1.4.2.min.js and js/jquery.jfeed.js
This is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package
Step 4. PHP
I hope that most code will easy for your understanding – each function have normal name and commented.
Ok, here are all used PHP files:
index.php
<?php
require_once('templates/rss_page.html');
?>
get_rss_feed.php
<?php $sUrl = (isset($_GET['url']) && $_GET['url'] != '') ? $_GET['url'] : 'http://www.boonex.com/unity/extensions/latest/?rss=1'; header( 'Content-Type: text/xml' ); readfile($sUrl); ?>
Step 5. Images
Also we need several images for our project:
View Live Demo
download in package
Conclusion
Today I told you how to create own RSS aggregator using jQuery library – jFeed. You can use this material to create own scripts into your startups. Good luck!
|
About: Aramis: Web Developer and Module Developer for online web applications. Have great experience with Dolphin CMS. |
Related posts:
- Importing multiple RSS feeds – using newsWidget (jQuery)
- Cropping images in runtime using Jcrop (jQuery)
Tags: jFeed, jQuery, news feed, rss feed
Spread The
Wow!, this was a real quality post. In theory I’d like to write like this too – taking time and real effort to make a good article… but what can I say… I keep putting it off and never seem to get something done
Pretty impressive post. I just came across your site and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be coming back and I hope you post again soon.
A thoughtful insight and ideas I will use on my website. You’ve obviously spent a lot of time on this. Thank you!
Grazie per tuo blog ! Ho apprezzato veramente, come lo scenar mi ha saputo vostri cose che non conoscevo non . Proprio interressant.
Superb!This article is creative,tRight here are a Great deal of new idea,it gives me inspiration.I Believe I will also inspired by you and Believe
Advantageously, the article is actually the greatest topic on curing acne naturally. I concur with your conclusions and will eagerly look forward to your coming updates. Saying thanks will not just be enough, for the phenomenal lucidity in your writing. I will immediately grab your rss feed to stay informed of any updates.
Thanks for this post! It was extremely informative and helpful! I just learned everything I need to know today.
Get the information the document. This approach niche motivations me significantly as well as using we, Method discovered modern factors. It was subsequently very worthwhile. Knowledge. Htc bravo. You reside.
Thanks for posting this info.
Grazie per questo la storia , un grado d ‘intossicazione argomento mi ha veramente eccessivamente interessato.
I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your web site to look at the latest stuff you post.
Danke für das Waren, das Thema hat mich interessé tatsächlich viel. Grace inside das Artikel habe ich neuste Sachen entscheident gelernt, eine perfekte ich keineswegs kannte. Danke, bravo und ausserdem Respekt.
Purchase mp3 music online…
Very creative,I like it….
Purchase mp3 music online…
Credit on behalf of sharing.I like it….
Finally, I located the information I was looking for. I have been doing research on this subject, and for three days I keep entering web-sites that are supposed to have what I’m searching for, only to be discouraged with the lack of what I had to have. I wish I could have located your web-site sooner! I had about 30% of what I needed and your site has that, and the rest of what I needed to finish my research. Thank you and keep up the good work!
Once Once Additional great Article. You seem to have a Fine understanding of these themes.When I entering your Weblog,I felt this .
Adding to my bookmarks thanks, definitely consider a follow up post.
I am little curious to know more about it………
That is fantastic. Thanks for the link. A great idea for a book!
Hey, great blog. Definitely be back!
Thanks very much for your intelligent post;this is the stuff that keeps me going through out my day. I have been looking around for this site after being referred to them from a buddy and was pleased when I was able to find it after searching for long time. Being a demanding blogger, I’m happy to see others taking initivative and contributing to the community. I would like to comment to show my approval for your work as it’s very energizing, and many writers do not get admiration they deserve. I am sure I’ll be back and will recommend to my friends.
I was wondering if I could use this information in my website. I will provide a link to your blog, may I?
Blogs Very informative article. I’ve found your blog via Yahoo and I?m really glad about the information you provide in your posts. Thank You for sharing this very informative article… Regards
I really appreciate you giving out this information. I’m not sure about anyone else, but I can totally use it.
Danke für dies Artikel, das Bereich hat mich interessé in wahrheit entscheident. Grace within dies Angebote habe ich neu entwickelte Sachen entscheident gelernt, alle ich überhaupt nicht kannte. Danke, bravo sowie Respekt.
Hi top blog im from Dublin but im moving to manchester i found this on the yahoouk search engine, im in the crane hire company business keep the good work up i will add you to my favoroties.
Merci à propos de cette colonne, le sujet m’a vraiment énormément plu. Grace à cette colonne j’ai extrêmement beaucoup appris de nouveaux élements que j’ignorais.
Speechless! Excellent post
Thank you, you have been most helpful.
I wants to add your blog to my blogroll please inform me what anchor should I use?
Danke Für Dieser blog,Das Enthalten hat mich wirklich viele gefallen. Grace in Diese Website habe ich Sehr viel gelernt Neue Sachen die ich ignorierte nicht.
I appreciate you for the document. That matter hobbies everybody a lot plus residence you, We uncovered new elements. It turned out quite interesting. Thank you. Htc bravo. You live.
Wow!, this was a real quality post. In theory I’d like to write like this too – taking time and real effort to make a good article… but what can I say… I keep putting it off and never seem to achieve anything
I enjoy reading the report, too. It?s easy to understand that a journey like this is the biggest event in ones
Details a person’s post. This matter motivations everyone quite not to mention due to you, When i mastered new points. Previously very worthwhile. Thanks a lot. Well done. You reside.
Grand merci pour ce papier, le sujet m’a réellement énormément interessé. Grace à ce blog j’ai bigrement bien appris de nouveaux élements que j’ignorais.
Quite Good Blogpost. Would you thoughts if I take a tiny snippets of your article and needless to say link it to your blogposts??
Grazie nello scopo di questo blog , egli contenuto mi ha veramente bigrement interessato.
Hi Webmaster, commenters and everybody else !!! The blog was absolutely fantastic! Lots of great information and inspiration, both of which we all need!Keep ‘em coming… you all do such a great job at such Concepts… can’t tell you how much I, for one appreciate all you do!
Total respect to the above commenter, I agree 100% with your thoughts on this.
This is my first time to go to here. I discovered quite a lot interesting stuff in your blog.
Read this comment carefully – it’s not on topic it’s just a little something to give you a smile and say thanks for your hard work on this blog!
After all is said and done, more is said than done.
I don;t know how you find the time to write so well but here is a little something
“The pure and simple truth is rarely pure and never simple.” — Oscar Wilde
Looks like a killer blog. I was wondering if you had some more pictures or videos regarding this topic. I would appreciate that! Nice job keep it up
Thank you for such a excellent blog. In which else could one get such information written in this sort of an incite full way? I have a presentation that I am just now working on, and I had been searching for these kinds of information.
You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I will try to get the hang of it!