JoomlaVision > General > How to emanate a favorites RSS feed and arrangement it in a Joomla site

How to emanate a favorites RSS feed and arrangement it in a Joomla site

At a moment, I’m operative on a office site formed on Joomla and Sobi Pro. On this site, we would like to arrangement news stories associated to a theme a office is about.

On one of a site’s pages, I’ve used a new Javascript from a guys during Joomlaworks to lift in news stories from websites that speak about a same theme matter. However, infrequently a ubiquitous news media also writes about it. That’s not so easy to collect up. Of course, we could set adult an involuntary Google Reader feed and have it uncover all a formula from that feed. However, that’s too general and will infrequently arrangement undesired, irrelevant or, during worst, inapt calm on my site.

How to emanate a favorites RSS feed and arrangement it in a Joomla site

How to emanate a favorites RSS feed and arrangement it in a Joomla site

A improved resolution is to be means to hand-pick stories from a web that we discover, and simply benefaction them in my Joomla site.

Of course, we could take any of these stories and put them into a directory. That takes too most time. So after a small searching, we found a solution. As with all on a web, there are several solutions to a problem. This resolution works for me, and it’s free.

As we mentioned, a aim of this educational is to arrangement a page with boldly installed RSS feeds from several sources. Below we can see what it looks like on a site I’m operative on.

The feed loading:



The installed feed (showing usually some of a results):



Using a formula new Javascript to bucket a feeds, I’m means to uncover 100 equipment from 41 feeds (and I’m ceaselessly adding some-more feeds to a list), though carrying a resolution pile-up or delayed down my server. How, we say? Read on to find out!

The elementary setup

The element of a resolution is easy. we use a use Read it Later to select a stories we wish displayed. This is simply finished regulating a browser bookmarklet. Then, we set adult a Joomla procedure related to a JoomlaWorks javascript to arrangement a feed of my unread stories on my site.

This is how we do it.

Set adult an comment with Read It Later

First, we need to register for an comment on This is a really useful service, and we competence wish to use it for other functions as well. For this purpose, however, we would advise we set adult a apart comment for any website. The registration routine is simple.

Find your RSS feed URLs

With Read It Later, we have a choice of displaying a feed of possibly all, unread or review posts. For my purpose, we used a “Unread” feed. That way, we can mislay feed equipment by imprinting them as review in Read It Later and they are automatically private from a Joomla site.

Read It Later provides RSS feeds of your data.

The format of a URLs are as follows (be certain to reinstate “USERNAME” with your possess user name):

Unread List

Read List

All Items

Open your RSS feed to a public

By default, RSS feeds in Read It Later are stable by your user name and password. To arrangement a RSS feed in a Joomla site, we need to open a feed adult for open view.

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

(click a cogweel in your Readitlater page).



Then click a Privacy controls and subsequently click a “Turn off RSS Feed cue protection” integrate to toggle a setting.



Bookmark stories regulating a bookmarklet

Now we are prepared to supplement some stories to your feed. Go to your “Add” page:

The easiest approach of formulating a bookmark is to drag one of a bookmarklets onto your Bookmarks toolbar in a browser.

bookmarklet chrome

bookmarklet chrome

You can afterwards click a bookmarklet when we are on an engaging page, and a page will be combined to your Read It Later unread list:



Add links around email

You can also supplement links regulating email, that we find available in some cases. You can find some-more instructions here:

Install and set adult a AMJR Javascript

The final thing we need to do is to set adult a book that will arrangement your feed on your Joomla web site. Of course, we can use a built-in Feed Display procedure in Joomla or a Simple RSS Feed Reader module. Both of those are utterly delayed when it comes to attractive a feeds, however. Particularly with many feed items. And a built-in feed arrangement procedure usually supports one feed in any procedure instance.

So, we opted for a AMJR – (Asynchronous Multifeed JavaScript Reader) combined by a friends during JoomlaWorks. 

AMJR was combined to cover a specific need: A multi-feed reader combined in JS. In other words, a feed reader that takes mixed feeds as submit and outputs a final X from all a feeds in sequential order. An doing you’ll certainly find in server-side languages though not in JS! Having such a functionality reside on a user’s browser (client-side) can lift off some estimate bucket generally on jammed sites that occur to confederate outmost feeds. Think of AMJR as your possess “Yahoo Pipes” widget to crush adult feeds altogether in a same outlay block. Read some-more about AMJR (there’s an instance feed on that page that demonstrates a speed of this script).

There are some stairs concerned in environment this up, though we will beam we throught them:

1. Download and implement a FILES on your server

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

Unzip a downloaded record and take a demeanour during a files included:



You usually need a files we have noted with an arrow. These are:

  1. The CSS indispensable to character a feed output
  2. A spinning circle shown on a loading page (before feeds are shown)
  3. The source formula for a instance page (from that we can get a HTML we need)
  4. The record containing a RSS feed source URLs
  5. The tangible Javascript where a sorcery happens

Where we put these files are adult to you, as prolonged as a book is means to find them. On my site, we put all in a template folder. we like to have all customizations there. You competence cite to keep things like this elsewhere. So, we put a JavaScripts in my templates/templatename/js/ folder, a CSS files in the templates/templatename/css/ and a amjr-loader.gif into the templates/templatename/images/ folder. Should be utterly straight-forward, right?

In a index.html file, we will find some snippets that we have to muster in your web site for this to work.

You have to supplement dual pieces of formula to your site:

  1. Links to a Javascript and CSS files in your template index.php file
  2. The dash for arrangement a tangible feed (in a tradition HTML module)

The header links demeanour like this:

!– AMJR JS [start] –
link rel=”stylesheet” rel=”nofollow” href=”/css/amjr.css” /
script type=”text/javascript” src=”/”;/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 rightly when put into your template, we need to adjust a paths to a files. In my case, they demeanour something like this:

!– AMJR JS [start] –
link rel=”stylesheet” rel=”nofollow” href=”//templates/yoo_revista/css/amjr.css” /
script type=”text/javascript” src=”/“;/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 formula between a conduct and /head tags in your template index.php file. As we can see, this resolution depends on a jQuery library that is hosted on Google. If we so prefer, we can download a book and keep it on your possess server. But let’s not make this too complicated, shall we?

2. Add a feed sources

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

3. Add a procedure to arrangement a feed

Now, we will need a page that displays a feed. we solved this by formulating an essay with a brief intro text. Then we combined a menu object indicating to a article. Subsequently, we combined a new Custom HTML procedure and reserved a procedure to that page.

The formula to put into a Custom HTML page is found in a index.html record that we downloaded:

!– AMJR HTML (feeds are installed here) [start] –
ul id=”amjr”
!– AMJR HTML (feeds are installed here) [end] –

As we can see, this is usually an unordered list. This list works as a placeholder for a feed and will be exchanged for a tangible feed calm when a Javascript is loaded.

4. Install and customize a script’s CSS

If you’re like me, we will wish to customize a outlay a small bit to compare your site. This is finished by adjusting a CSS record (amjr.css) that we downloaded. If you’re not informed with CSS, we advise we review a essay Joomla CSS for Beginners.

This is a default CSS for AMJR:

#amjr { float:left; width:460px; height:500px; overflow:auto; margin:0; padding:4px; border:1px plain list-style:none; }
#amjr li { border-bottom:1px plain padding:4px 0; margin:4px 0; }
#amjr li a { font-size:16px; }
#amjr li camber a { font-size:12px; color: }
#amjr li em { display:block; color: 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: font-weight:bold; font-size:14px; }

I have practiced this a bit, so that a feeds are listed in 3 columns and in a table-like fashion.

Take a demeanour during a finished Masonic News RSS feed page for a live example.

This is a CSS I’ve used on that sold 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: gain !important;border: nothing !important;}
#amjr li:nth-child(odd) { background-color: }
#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 camber { font-size:10px; }
#amjr li camber a { font-size:10px; color: }
#amjr li em { display:block; color: 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: font-weight:bold; font-size:14px;width: 700px;text-transform: none; }

And, we’re done!

The feeds should bucket in a integrate of seconds and arrangement easily on your site. And, best of all, it doesn’t swamp down your server.

Newbie alternative: Use a Simple RSS Feed Reader

If we wish an easier solution, we can download a giveaway Simple RSS Feed Reader from This will work for we if we have usually a few feeds. As mentioned, it’s tough on your server (and your visitor’s nerves eventually) if we supplement some-more than a few feeds to it.

Install it from a Joomla Extensions Manager, and afterwards supplement it to a preferred procedure position.

This procedure has a series of options that we can use to arrangement your feed in opposite ways. we won’t go into them all, as they are utterly self-explainatory. A good thing about this procedure is that we can supplement several feeds to a same module. I’ve used that for a other feed displays we mentioned earlier.



Last mutated on Monday, 09 Apr 2012 09:34

Related posts