Add Dynamic RSS Content to your ArticleLive web site

By Amit Bhatia

There has been significant talk of RSS in recent months and this is especially apparent in the manner of how both big and small companies alike have focused much of their development efforts around it. With quite a bit of emphasis on this simple yet powerful technology, it's almost inevitable that RSS could be the next big thing -- or is it already?

Just think about it. The following trends will offer some insight as to what some of the big names have been up to:

• Apple's latest Tiger OSX boasts a new version of Safari with built-in RSS functionality.
• Microsoft's upcoming Longhorn OS will have RSS capability too not only within it's browser but as an application bundled as part of the operating system.
  
• Google has started beta testing RSS/Atom feeds or what they call "Web Clips" on Gmail, and it's not limited to news because advertising has been included in the bandwagon.

• Last but certainly not least, there's us -- Interspire. The latest released of both ActiveKB and ArticleLive include RSS support!

All in all, RSS has so much momentum and it provides useful solutions for many information problems. Truly revolutionary, there's no reason why we should avoid all the hype.

Having said that, let's now learn a bit more about RSS and how it can be used.

This article will teach you how to integrate RSS feeds from various news sources into your ArticleLive site using an external script. It is a step-by-step guide from start to finish. For this example, I will aggregate news content from one news source. Namely, the BBC South Asia News site as this is most relevant to the content of my site. You can choose your own as long as it supports RSS and you have a link to their RSS Feed.

RSS stands for Really Simple Syndication. RSS makes it easy to keep informed automatically about updates from web sites that you like. Instead of you having to visit the web site to see if they've added something new (such as an article, a news post, etc), you can use RSS to pull all the information from their site and display it in a central location in a neat, organized format with the help of RSS reading software or an external script. So this basically allows you to scan the latest news, information and articles from thousands of web sites in one easy-to-read, searchable article list instead of having to visit every web site individually. The following icons will usually appear (though not always) if a site supports RSS:


For this article, I will assume we all have a brief knowledge of what RSS is. Click here if you would like to learn more OR simply Google "What is RSS?" and you'll be presented with a wealth of info.

Here's what the finished product will look like. It collects the top five news items from the BBC South Asian News site and displays them down the right hand side column of my web page, however you can choose to display the feed anywhere.



I've outlined the necessary steps that we will undertake in order to accomplish our goal. In a brief, they are:

1. Find: Search for a RSS version (RSS Feed) of a news source and copy it's link.
2. Build: Build Javascript code that will pull data from your chosen RSS feed by simply entering it's URL source.
3. Create: Create a custom panel and insert the code into your ArticleLive site.
4. Upload: Upload the files to your web server.
5. Insert: Insert custom panels into ArticleLive for display.
6. Style: Adjust the look and feel of the RSS Feed.

First, let's have a look at where we'll be extracting our information from. The key for finding the RSS version (feeds) is to look for the icons that identify it, and rather than following the link, right mouse click the icon to access the menu that allows you to Copy the URL for the RSS feed.

But if you do click and see some messy XML code, don't worry! Simply copy the web address from your browser's URL field. It will look like any other web address, except the last part may end in ".xml", ".rss", ".rdf", ".atom", or even other strange names.

Sometimes they will be listed in an area called "Syndication".

As mentioned, I've chosen the BBC South Asia news for this example. The actual news site looks like the following: http://news.bbc.co.uk/1/hi/world/south_asia/default.stm

Here's the RSS version that we'll need. Copy the following link: http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/world/south_asia/rss.xml

We need to create the Javascript code that will pull relevant RSS feeds for display on our site. Now don't get worried here. You won't have to do any coding whatsoever. We'll be using the help of an external script that is freely available online! Click here to visit the site.

You will be presented with a form as shown below. Go ahead and fill in the fields. The instructions are pretty clear as to what each field does but I've highlighted two that you might want to take note of:

- Channels are titles of the News Feed. (The preview below is just an example to explain the field but won't appear on my site since I've set mine to "No").
- Item descriptions refers to a basic summary of the each news content.



Now click "Preview the Feed" button to see how your feed will look like. Ignore the design and style for now. When you insert the necessary code into your site, it will adhere to your site's CSS. Let's concentrate more on what content is displayed. You can always scroll down and make more changes if required.

Once you're satisfied, click "Generate Javascript". The code below should appear. Save it at some place, you'll need later. (Don't try to use this one if you have inserted a different URL for the RSS Feed. This code is unique to the BBC RSS Feed I'm using).

<script language="JavaScript"
src="http://jade.mcli.dist.maricopa.edu/feed/feed2js.php?src=http%3A%2F%2Fnewsrss.bbc.co.uk%2Frss%
2Fnewsonline_uk_edition%2Fworld%2Fsouth_asia%2Frss.xml&num=5&desc=1&targ=y" type="text/javascript">
</script>
<noscript>
<a href="http://jade.mcli.dist.maricopa.edu/feed/feed2js.php?src=http%3A%2F%2Fnewsrss.bbc.co.uk%2Frss%
2Fnewsonline_uk_edition%2Fworld%2Fsouth_asia%2Frss.xml&num=5&desc=1&targ=y&html=y">
View RSS feed</a>
</noscript>


I trust that you've followed every step up until now. Bear with me for a little while longer, as we're definetly on the right track!

The next thing to do is create a custom panel. To achieve this, we'll need to create two files -- a PHP and HTML file.

Let's create the PHP file first. Using Dreamweaver or any editor, create a blank document. Copy the following code and paste it in. Save it as RSSPanel.php (You must follow the naming convention).

<?php
/*******************************************
* *
* Generic ArticleLive Panel Parsing Class *
* *
*******************************************/
$panelClass = "AL_RSS_PANEL";
CLASS AL_RSS_PANEL
{
var $_htmlFile;
function AL_RSS_PANEL($HTMLFile)
{
$this->_htmlFile = $HTMLFile;
}
function ParsePanel()
{
$htmlPanelData = "";
$parsedPanelData = "";
if(file_exists($this->_htmlFile))
{
if($fp = @fopen($this->_htmlFile, "rb"))
{
while(!feof($fp))
$htmlPanelData .= fgets($fp, 4096);
@fclose($fp);
}
}
// Parse the panel of tokens, etc
$GLOBALS["RSS"] = "RSS";
$parsedPanelData = $GLOBALS["AL_CLASS_TEMPLATE"]->ParseGL($htmlPanelData);
return $parsedPanelData;
}
}

Now, we'll create the HTML file. Again, create a new blank file, copy the following code and paste it in. Remember to copy your own Javascript code from step 2 and paste it in between the tags as indicated. Save the file as RSSPanel.html

<TABLE class="Panel RSSPanel" id="Table2">
<TR>
<TD class="Heading">Live South Asian News from the BBC</TD>
</TR>
<TR>
<TD class="Content">
<!--INSERT YOUR JAVASCRIPT CODE HERE!-->

<!--END-->
</TD>
</TR>
</TABLE>

Here's an example of how my code looks like.

<TABLE class="Panel RSSPanel" id="Table2">
<TR>
<TD class="Heading">Live South Asian News from the BBC</TD>
</TR>
<TR>
<TD class="Content">
<!--JAVASCRIPT CODE-->
<script language="JavaScript"
src="http://jade.mcli.dist.maricopa.edu/feed/feed2js.php?src=http%3A%2F%2Fnewsrss.bbc.co.uk%2Frss%
2Fnewsonline_uk_edition%2Fworld%2Fsouth_asia%2Frss.xml&num=5&desc=1&targ=y" type="text/javascript">
</script>
<noscript>
<a href="http://jade.mcli.dist.maricopa.edu/feed/feed2js.php?src=http%3A%2F%2Fnewsrss.bbc.co.uk%2Frss%
2Fnewsonline_uk_edition%2Fworld%2Fsouth_asia%2Frss.xml&num=5&desc=1&targ=y&html=y">
View RSS feed</a>
</noscript>
<!--END-->
</TD>
</TR>
</TABLE>

There's no need to explain this bit in depth. Upload the two files to the templates/YourTemplate/panels folder in your ArticleLive folder.

In order to display the RSS feed, we'll need to insert the custom panel that we created earlier into a specific page on your ArticleLive site (i.e. home page, blogs, categories, full article page, etc.) and follow the steps below.

1. Login to your ArticleLive Control Panel (admin)

2. Click "Templates" and select the page you want the RSS feed to be on display. (I've chosen my homepage, Default.html)

3. Look for the RightColumn <td> tag and Insert

[Panel not found: 'RSSPanel']

right after

4. Click "Save and Exit"

5. Repeat the process if you would like to do the same for other pages.

Go ahead and preview your site. You should be able to see the RSS feed.

Naturally you wouldn't want the panel to appear with a list of bullets and indentation. We'll need to tweak Styles.css.

Copy the code below.

/* begin styles for RSS Feed
This is the most basic style to use for a list with no bullets */
.rss_box {
width: 100%;
}
.rss_title, rss_title a {
margin: 0px 0;
padding: 0;
font-weight: bold;
}
.rss_items {
list-style:none;
margin:0;
padding:0;
}
.rss_item {
font-size: 11px;
margin-bottom: 1em;;
}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {
font-weight: bold;
font-size: 10pt;
}
.rss_item a:hover {
}
.rss_date {
font-size: 9px;
color: gray;
}

1. Login to ArticleLive control panel

2. Click Templates



3. Click Edit next to Styles.css



4. Paste the CSS code at the bottom of Styles.css and save it.

Preview your site and enjoy viewing that little panel of aggregated news content. Congratulations, you've successfully added an external RSS feed to your site!

Need I say more? In 6 steps, you've created a custom panel that displays news content from your favorite web site. Be it advertising, news, forum posts, blogs, there is a huge potential in what RSS has to offer.

It's never a good practice to flood your visitors with loads of RSS feeds from a hundred news sources, however if well balanced, it will most definitely add some life to your site. Eventually, we hope to introduce a more automated way of inserting RSS feeds in ArticleLive through the control panel. Until then, we'll have to stick with this method.