A jQuery plugin for embedding an RSS feed into your page. Contains a PHP proxy.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
graphics
images/julienRSSWidget/default
js
README.textile
index.html
jrw_proxy.php

README.textile

Julien RSS Widget

Easy to Install

1. In your HTML, create an empty div like this:
<div id="feed1"></div>

2. Upload the jrw_proxy.php file somewhere within the same domain.

3. And in you javascript, add this code:

$.julienRSSWidget.globalSettings.proxyURL = ‘http://yoursite.com/path/to/jrw_proxy.php’;
$(document).ready(function(){
$(‘#feed1’).julienRSSWidget({
feedURL: ‘http://feeds.feedburner.com/readwriteweb’
});
});

About the Proxy (proxyURL setting)

Due to the fact that this plugin is in JavaScript and that there is this thing called Same Origin Policy, you have no choice but to configure (see above) julienRSSWidget to use a proxy. The proxy is just a simple server side script that grabs the content of the feed you’re trying to access and make it accessible in the scope of your own domain. This plugin includes the PHP version of this script. For the rubyists though, here is what you would do (in Sinatra. You would also need to sudo gem install curb-fu ):

require 'curb-fu'
require 'sinatra'
get '/jrw_proxy' do
  response = CurbFu.get(params[:rsswidget_url])
  response.body
end

and in your javascript, it would look like this:

$.julienRSSWidget.globalSettings.proxyURL = 'http://yoursite.com/jrw_proxy';

Highly Configurable

You can modify:

  • the format of the dates (including the name of the months)
  • the HTML structure of the feed items that are shown, via the feedItemMarkup option
  • the styles, via the theme in the CSS file
  • You can install as many RSSWidgets as You want into the same site, at least have a different feedURL option for each one of them (feedURL option)
  • the maximum number of news items to show on each feed, via the maxItems option
  • and more…
$('#yourdiv').julienRSSWidget({
	feedURL:          'http://feeds.feedburner.com/JulienDesrosiers',
	feedURLLabel:     'Grab the feed',
	theme:            'default',
	maxItems:         10,
	dateFormat:       '%b %d, %Y', // Oct 16, 2010
	fullDateNames:    ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
	abbrevDateNames:  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
	linkTarget:       '_blank', // _blank, _self, _parent, _top
	feedHeadMarkup:  '<p class="rw_title clearfix"> \
	  <a href="{siteLink}" class="rw_feedTitle" target="{linkTarget}">{feedTitle}</a> \
	  <a href="{feedURL}" class="rw_feedURL" target="{linkTarget}" title="{feedURLLabel}">{feedURLLabel}</a> \
	  </p>', 
	feedTitleOverride:'',
	feedItemMarkup:   '<li> \
	    <span class="rw_pubDate">{pubDate}</span> \
	    <a href="{link}" title="{pubDate}" target="{linkTarget}">{title}</a> \
	  </li>'
});

Cross-browser

Tested in Internet Explorer 6-7, Firefox, Safari

Atom

The Atom format is not currently supported.