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

At a moment, I’m user on a bureau site shaped on Joomla and Sobi Pro. On this site, we would like to arrangement news stories compared to a thesis a bureau 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 pronounce about a same thesis matter. However, intermittently a entire news media also writes about it. That’s not so easy to collect up. Of course, we could set adult an contingent Google Reader feed and have it expose all a regulation from that feed. However, that’s too ubiquitous and will intermittently arrangement undesired, irrelevant or, during worst, unapt ease 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 softened fortitude is to be means to hand-pick stories from a web that we discover, and simply donation them in my Joomla site.

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

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

The feed loading:

feed-loading

feed-loading

The commissioned feed (showing customarily some of a results):

feed-loaded

feed-loaded

Using a regulation new Javascript to bucket a feeds, I’m means to expose 100 apparatus from 41 feeds (and I’m continuously adding some-more feeds to a list), yet carrying a fortitude wreck or behind down my server. How, we say? Read on to find out!

The facile setup

The component of a fortitude is easy. we use a use Read it Later to name a stories we wish displayed. This is simply finished controlling a browser bookmarklet. Then, we set adult a Joomla procession associated to a JoomlaWorks javascript to arrangement a feed of my unread stories on my site.

This is how we do it.

Set adult an criticism with Read It Later

First, we need to register for an criticism on http://readitlaterlist.com/signup. This is a unequivocally useful service, and we cunning wish to use it for other functions as well. For this purpose, however, we would advise we set adult a detached criticism for any website. The registration slight is simple.

Find your RSS feed URLs

With Read It Later, we have a choice of displaying a feed of presumably all, unread or examination posts. For my purpose, we used a “Unread” feed. That way, we can disturb feed apparatus by imprinting them as examination 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 return “USERNAME” with your possess 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 a public

By default, RSS feeds in Read It Later are fast 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 criticism settings in ReaditLater:

http://readitlaterlist.com/options

(click a cogweel in your Readitlater page).

readitlater-options

readitlater-options

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

rss-privacy-settings

rss-privacy-settings

Bookmark stories controlling a bookmarklet

Now we are prepared to addition some stories to your feed. Go to your “Add” page: http://readitlaterlist.com/add

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

bookmarklet chrome

bookmarklet chrome

You can thereafter click a bookmarklet when we are on an enchanting page, and a page will be total to your Read It Later unread list:

unread-feed

unread-feed

Add links around email

You can also addition links controlling email, that we find accessible in some cases. You can find some-more instructions here: http://readitlaterlist.com/email/

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 procession in Joomla or a Simple RSS Feed Reader module. Both of those are definitely behind when it comes to appealing a feeds, however. Particularly with many feed items. And a built-in feed arrangement procession customarily supports one feed in any procession instance.

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

AMJR was total to cover a specific need: A multi-feed reader total in JS. In other words, a feed reader that takes churned feeds as contention and outputs a final X from all a feeds in consecutive order. An doing you’ll positively find in server-side languages yet not in JS! Having such a functionality reside on a user’s browser (client-side) can lift off some guess bucket generally on tangled sites that start to combine outer feeds. Think of AMJR as your possess “Yahoo Pipes” widget to vanquish adult feeds altogether in a same cost 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 endangered in sourroundings this up, yet we will lamp we throught them:

1. Download and exercise 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 feeling during a files included:

amjr-files

amjr-files

You customarily need a files we have remarkable with an arrow. These are:

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

Where we put these files are adult to you, as enlarged 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 cunning bring 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 definitely straight-forward, right?

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

You have to addition twin pieces of regulation to your site:

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

The header links feeling like this:

!– AMJR JS [start] –
link rel=”stylesheet” rel=”nofollow” 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 righteously when put into your template, we need to adjust a paths to a files. In my case, they feeling something like this:

!– AMJR JS [start] –
link rel=”stylesheet” rel=”nofollow” 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 regulation between a control and /head tags in your template index.php file. As we can see, this fortitude 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 procession to arrangement a feed

Now, we will need a page that displays a feed. we solved this by formulating an letter with a brief intro text. Then we total a menu intent indicating to a article. Subsequently, we total a new Custom HTML procession and indifferent a procession to that page.

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

!– AMJR HTML (feeds are commissioned here) [start] –
ul id=”amjr”
liLoading…/li
/ul
!– AMJR HTML (feeds are commissioned here) [end] –

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

4. Install and customize a script’s CSS

If you’re like me, we will wish to customize a cost a tiny bit to examination your site. This is finished by adjusting a CSS record (amjr.css) that we downloaded. If you’re not sensitive with CSS, we advise we examination a letter 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 cove 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 used this a bit, so that a feeds are listed in 3 columns and in a table-like fashion.

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

This is a CSS I’ve used on that sole 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: benefit !important;border: zero !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 cove { font-size:10px; }
#amjr li cove 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 combine of seconds and arrangement simply on your site. And, best of all, it doesn’t engulf 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 Joomlaworks.gr. This will work for we if we have customarily a few feeds. As mentioned, it’s tough on your server (and your visitor’s nerves eventually) if we addition some-more than a few feeds to it.

Install it from a Joomla Extensions Manager, and thereafter addition it to a elite procession position.

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

simple-rss-feed-reader-urls

simple-rss-feed-reader-urls

Last deteriorated on Monday, 09 Apr 2012 09:34

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

93 Comments

  1. http://www.joomlavision.com/how-to-emanate-a-favorites-rss-feed-and-arrangement-it-in-a-joomla-site/

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Comment

Comments are moderated. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!


6 × = twelve