How to create a favorites RSS feed and display it in a Joomla site

A better solution is to be able to hand-pick stories from the web that I discover, and easily present them in my Joomla site.

Of course, I could take each of these stories and put them into the directory. That takes too much time. So after a little searching, I found a solution. As with everything on the web, there are several solutions to a problem. This solution works for me, and it's free.

As I mentioned, the aim of this tutorial is to display a page with dynamically loaded RSS feeds from various sources. Below you can see what it looks like on the site I'm working on.

The feed loading:

The loaded feed (showing just some of the results):

Using a brand new Javascript to load the feeds, I'm able to show 100 items from 41 feeds (and I'm continually adding more feeds to the list), without having the solution crash or slow down my server. How, you say? Read on to find out!

The basic setup

The principle of the solution is easy. I use the service Read it Later to choose the stories I want displayed. This is easily done using a browser bookmarklet. Then, I set up a Joomla module linked to the JoomlaWorks javascript to display a feed of my unread stories on my site.

This is how you do it.

Set up an account with Read It Later

First, you need to register for an account on http://readitlaterlist.com/signup. This is a very useful service, and you might want to use it for other purposes as well. For this purpose, however, I would suggest you set up a separate account for each website. The registration process is simple.

Find your RSS feed URLs

With Read It Later, you have the option of displaying a feed of either all, unread or read posts. For my purpose, I used the "Unread" feed. That way, I can remove feed items by marking them as read in Read It Later and they are automatically removed from the Joomla site.

Read It Later provides RSS feeds of your data.

The format of the URLs are as follows (be sure to replace "USERNAME" with your own user name):

Unread List
http://readitlaterlist.com/users/USERNAME/feed/unread

Read List
http://readitlaterlist.com/users/USERNAME/feed/read

All Items
http://readitlaterlist.com/users/USERNAME/feed/all

Open your RSS feed to the public

By default, RSS feeds in Read It Later are protected by your user name and password. To display the RSS feed in a Joomla site, you need to open the feed up for public view.

To do this, go to your account settings in ReaditLater:

http://readitlaterlist.com/options

(click the cogweel in your Readitlater page).

Then click the Privacy controls and subsequently click the "Turn off RSS Feed password protection" link to toggle the setting.

Bookmark stories using a bookmarklet

Now you are ready to add some stories to your feed. Go to your "Add" page: http://readitlaterlist.com/add

The easiest way of creating a bookmark is to drag one of the bookmarklets onto your Bookmarks toolbar in the browser.

You can then click the bookmarklet when you are on an interesting page, and the page will be added to your Read It Later unread list:

Add links via email

You can also add links using email, which I find convenient in some cases. You can find more instructions here: http://readitlaterlist.com/email/

Install and set up the AMJR Javascript

The last thing you need to do is to set up the script that will display your feed on your Joomla web site. Of course, you can use the built-in Feed Display module in Joomla or the Simple RSS Feed Reader module. Both of those are quite slow when it comes to fetching the feeds, however. Particularly with many feed items. And the built-in feed display module only supports one feed in each module instance.

So, I opted for the AMJR - (Asynchronous Multifeed JavaScript Reader) created by our friends at JoomlaWorks. 

AMJR was written to cover a specific need: A multi-feed reader written in JS. In other words, a feed reader that takes multiple feeds as input and outputs the last X from all the feeds in chronological order. An implementation you'll surely find in server-side languages but not in JS! Having such a functionality reside on the user's browser (client-side) can lift off some processing load especially on high-traffic sites which happen to integrate external feeds. Think of AMJR as your own "Yahoo Pipes" widget to mash up feeds altogether in the same output block. Read more about AMJR (there's an example feed on that page that demonstrates the speed of this script).

There are some steps involved in setting this up, but I will guide you throught them:

1. Download and install the FILES on your server

First, go to the AMJR site to download the scripts and CSS needed.

Unzip the downloaded file and take a look at the files included:

You only need the files I have marked with an arrow. These are:

1. The CSS needed to style the feed output
2. A spinning wheel shown on the loading page (before feeds are shown)
3. The source code for the example page (from which you can get the HTML you need)
4. The file containing the RSS feed source URLs
5. The actual Javascript where the magic happens

Where you put these files are up to you, as long as the script is able to find them. On my site, I put everything in the template folder. I like to have all customizations there. You might prefer to keep things like this elsewhere. So, I put the JavaScripts in my templates/templatename/js/ folder, the CSS files in the templates/templatename/css/ and the amjr-loader.gif into the templates/templatename/images/ folder. Should be quite straight-forward, right?

In the index.html file, you will find some snippets that you have to deploy in your web site for this to work.

You have to add two pieces of code to your site:

1. Links to the Javascript and CSS files in your template index.php file
2. The snippet for showing the actual feed (in a custom HTML module)

The header links look like this:

<!-- AMJR JS [start] -->
<link rel="stylesheet" href="css/amjr.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";></script>
<script type="text/javascript" src="js/amjr.js"></script>
<script type="text/javascript" src="js/amjr-sources.js"></script>
<!-- AMJR JS [end] -->

For this to work correctly when put into your template, you need to adjust the paths to the files. In my case, they look something like this:

<!-- AMJR JS [start] -->
<link rel="stylesheet" href="/templates/yoo_revista/css/amjr.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";></script>
<script type="text/javascript" src="/templates/yoo_revista/js/amjr.js"></script>
<script type="text/javascript" src="/templates/yoo_revista/js/amjr-sources.js"></script>
<!-- AMJR JS [end] -->

Put this code between the <head> and </head> tags in your template index.php file. As you can see, this solution depends on the jQuery library which is hosted on Google. If you so prefer, you can download the script and keep it on your own server. But let's not make this too complicated, shall we?

2. Add the feed sources

The file amjr-sources.js contains the RSS feed sources. You will see that the default file contains a lot of Joomla RSS feeds. Exchange those for your own links and save the file.

3. Add the module to display the feed

Now, you will need a page which displays the feed. I solved this by creating an article with a short intro text. Then I created a menu item pointing to the article. Subsequently, I added a new Custom HTML module and assigned the module to that page.

The code to put into the Custom HTML page is found in the index.html file that you downloaded:

<!-- AMJR HTML (feeds are loaded here) [start] -->
<ul id="amjr">
<li>Loading...</li>
</ul>
<!-- AMJR HTML (feeds are loaded here) [end] -->

As you can see, this is just an unordered list. This list works as a placeholder for the feed and will be exchanged for the actual feed content when the Javascript is loaded.

4. Install and customize the script's CSS

If you're like me, you will want to customize the output a little bit to match your site. This is done by adjusting the CSS file (amjr.css) that you downloaded. If you're not familiar with CSS, I suggest you read the article Joomla CSS for Beginners.

This is the default CSS for AMJR:

#amjr { float:left; width:460px; height:500px; overflow:auto; margin:0; padding:4px; border:1px solid #ccc; list-style:none; }
#amjr li { border-bottom:1px solid #ccc; padding:4px 0; margin:4px 0; }
#amjr li a { font-size:16px; }
#amjr li span a { font-size:12px; color:#222; }
#amjr li em { display:block; color:#999; font-size:10px; margin:2px 0; }
#amjr li#loader { background:url(../images/amjr-loader.gif) no-repeat 0 50%; margin:50% 0 0 8px; padding:8px 0 8px 32px; border:none; color:#555; font-weight:bold; font-size:14px; }

I have adjusted this a bit, so that the feeds are listed in three columns and in a table-like fashion.

Take a look at the finished Masonic News RSS feed page for a live example.

This is the CSS I've used on that particular page:

#amjr { float:left; width:100%; height:auto; overflow:auto; margin:0; padding:0px; list-style:none; vertical-align: top; }
#amjr li { margin: 6px 4px 4px 4px;display: inline-table;line-height: 120%;width: 32%;padding: 8px !important;vertical-align: top;text-transform: capitalize !important;border: none !important;}
#amjr li:nth-child(odd) { background-color: #eee; }
#amjr li:nth-child(even) { }
#amjr li a { font-size:11px;line-height: 120%;font-family: Tahoma, Geneva, sans-serif;font-weight: bold;}
#amjr li span { font-size:10px; }
#amjr li span a { font-size:10px; color:#222; }
#amjr li em { display:block; color:#999; font-size:10px; margin:0; }
#amjr li#loader { background:url(../images/amjr-loader.gif) no-repeat 0 50%; margin:0 8px; padding:8px 0 8px 40px !important; border:none; color:#555; font-weight:bold; font-size:14px;width: 700px;text-transform: none; }

And, we're done!

The feeds should load in a couple of seconds and display nicely on your site. And, best of all, it doesn't bog down your server.

Newbie alternative: Use the Simple RSS Feed Reader

If you want an easier solution, you can download the free Simple RSS Feed Reader from Joomlaworks.gr. This will work for you if you have only a few feeds. As mentioned, it's hard on your server (and your visitor's nerves eventually) if you add more than a few feeds to it.

Install it from the Joomla Extensions Manager, and then add it to the desired module position.

This module has a number of options that you can use to display your feed in different ways. I won't go into them all, as they are quite self-explainatory. A nice thing about this module is that you can add several feeds to the same module. I've used that for the other feed displays I mentioned earlier.

I hope you will find this technique useful, it definitely solved a problem for me.