使用jFeed（jQuery）导入RSS feed

RSS feed – using jFeed (jQuery) to aggregate RSS This simple tutorial will show you how to Import rss feeds of any site into your own custom area/block of website. It can be used as news imported from yahoo, bbc etc. As we know, RSS feeds are usually used to trasnfer some news for people. Today I’ll tell you about RSS feeds and show you how to make an own RSS aggregator. In the result, you will be able to display various RSS feeds on your website with nite and modern design.

RSS feed –使用jFeed(jQuery)聚合RSS此简单教程将向您展示如何将任何站点的rss feed导入到您自己的自定义区域/网站块中。它可以用作从yahoo，bbc等导入的新闻。众所周知，RSS提要通常用于为人们传递一些新闻。今天，我将向您介绍RSS源，并向您展示如何制作自己的RSS聚合器。结果，您将能够在网站上以精巧和现代的设计显示各种RSS源。

Here is the sample:

这是示例：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Well, download the source files and let’s start coding !

好了，下载源文件，让我们开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code (with 2 RSS blocks). Pay heed at RSSAggrCont elements. Param ‘rssnum’ means – how many rss elements will be displayed at the page. ‘rss_url’ – is RSS url. I hope that you will be able to change these params easily.

这是我们的主页代码(带有2个RSS块)。注意RSSAggrCont元素。参数\’rssnum\’表示–页面上将显示多少个rss元素。 \’rss_url\’–是RSS网址。我希望您能够轻松更改这些参数。

template / rss_page.html (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>

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

[/code]

步骤2. CSS (Step 2. CSS)

Here are CSS styles.

这是CSS样式。

template / css / styles.css (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;}

.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;}

[/code]

步骤3. JS (Step 3. JS)

Here are few necessary JS files for our project:

以下是我们项目的一些必要JS文件：

js / jquery.aRSSFeed.js (js/jquery.aRSSFeed.js)

// jQuery plugin - Dolphin 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 oDateif (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);elseoDate = 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);

// jQuery plugin - Dolphin 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 oDateif (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);elseoDate = 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);

[/code]

js / jquery-1.4.2.min.js和js / jquery.jfeed.js (js/jquery-1.4.2.min.js and js/jquery.jfeed.js)

This are common files – jQuery library with jFeed library. It is to no purpose to publish full codes of these files here (they are pretty huge). Both are available in our download package

这是常见文件–带有jFeed库的jQuery库。在这里发布这些文件的完整代码是没有目的的(它们非常大)。两者都可以在我们的下载包中找到

步骤4. PHP (Step 4. PHP)

Finally – PHP sources, I think that everything should be easy to understand:

最后– PHP资料，我认为一切都应该易于理解：

index.php (index.php)

<?phprequire_once(\'templates/rss_page.html\');?>

<?phprequire_once(\'templates/rss_page.html\');?>

[/code]

get_rss_feed.php (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);?>

<?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);?>

[/code]