UBB.threads Custom Island from an RSS feed

RSS (really simple syndicated) feeds are a very versitile, simple and popular way of sharing information between web sites. It’s pretty much a defacto standard and there are many tutorials, widgets, plugins and hard coded solutions to be found by just googling.

That brings me to this article and the reason I’m writing it. I want to show you how to take a custom feed from a website, consume it with some php code and then display it within a UBB.threads custom island that you then place on your portal in either the left or right sidebar.

We’ll then go further and show how to tailor the island by applying more CSS styling. After that we’ll kick it up a notch and come close to breaking out of Table, TR and TD world into DIV, UL and LI world. And the grand finally has yet to be determined, but you will be able to decide how far you want to go.

Choosing to stop after the initial creation may be all you want. It’s really up to you. Let’s get on with it then! :grin:

First thing we need to do is to either write from scratch a php program that consumes an RSS feed xml data and makes sense out of it or leverage off of the thousands of freely available implementations out there already. Which one do you supspect I’ll recommend? :hihi:

That’s right. We’re going to use the same RSS feed consumer as WordPress does, which goes by the name Magpie RSS. You can download it [ here ].

Save it to your hard drive and unzip the contents, then upload into your ‘forum/cache_builders/custom/rss’ directory. Yes, it is a new directory we’re creating where MagpieRSS will reside. The ‘cache_builders/custom’ directory seemed to be the logical parent to use and it also doesn’t interfere with any existing directories, since it’s one solely dedicated to Magpie.

You will readily note that there are quite a lot of file here and it might look a little daunting, but I’ll take the fear of the unknown out of it by saying we’re almost there now! We’re going to include 1 line in our Custom Island code to fetch a feed and then it’s pretty much game, set and match from there ;)

What I did is read the ‘README’ file and found out that it was as simple as the first S in RSS !

In there it gives us a small code snippet as an example of how to use it. We’ll just follow along and tweak it for our needs. Snippet below:

require_once(rss_fetch.inc);
 $url = $_GET['url'];
 $rss = fetch_rss( $url );

 echo "Channel Title: " . $rss->channel['title'] . "<p>";
 echo "<ul>";
 foreach ($rss->items as $item) {
 $href = $item['link'];
 $title = $item['title'];
 echo "<li><a href=$href>$title</a></li>";
 }
 echo "</ul>";

There isn’t a whole heck of a lot of coding displayed, because the bulk of the work is done by the MagpieRSS class in line 1.

We’re going to take this little snippet, create a new Custom Island and make the changes to call ‘fetch_rss’ with our desired RSS feed URL, parse the results and make it compatible with standard UBB.threads expected syntax.

This is easier than you might think, so let’s have a go.

To get started, you’ll need to go to the Custom Islands section of your Admin control panel. Clicking on the link brings you to a list of all your currently defined custom islands. For our example we’ll be editing Custom Island 0. Click the [ Edit ] link and you are taken to the following screen:

This first thing we’ll want to do is edit the name of the island. I’ll choose ‘NBA News’ for grins. I’m sure you’ll pick something that has more meaning for your website, since the name will show up as the island title when displayed on the left or right column.

We’ll revisit the Name vs. Title relationship later in this article, since it is really HTML code and we can do more with this than just plain text!

The most important part of the Custom Island is the Body section, where we’ll be placing a mixture of php and HTML to accomplish our goal.

Shown below is the resulting code I’ve placed into the Custom Island to fetch a feed from

# Author: SD
# Website: https://sirdude.com
# Description:
#   Fetches a feed, parses it and makes it ready for a Custom Island
# Version: 1.1
# Dependencies: Uses MagpieRSS library (in cache_builders/custom/rss directory)

# Configuration parameters go here
$feedURL = 'http://www.nba.com/rss/nba_rss.xml';
$numItems = 5;

# Let it rip!
require_once('rss/rss_fetch.inc');
$rss = fetch_rss($feedURL);

# Start of feed loop
$i = 0;
$feedinfo = '<table width="100%">';
foreach ($rss->items as $item ) {
	if ($i >= $numItems) continue;
		$title = $item[title];
		$url   = $item[link];
		$feedinfo .= '<tr><td class="rightalt-';
		$feedinfo .= ($i&1) ? '1' : '2';
		$feedinfo .= "\"><a href=$url>$title</a><br /></td></tr>";
		$i++;
	}
$feedinfo .= '</table>';

# Hand off to UBB.threads, which expects $body to have the stuff!
$body = <<<EOF
	$feedinfo
EOF;

We now hopefully have something that will work and of course it will, since I wouldn’t be putting it here as an example if I hadn’t tested it first! :mutt:

To find out, you must first click ‘Update Custom Portal Box’ and then Go to ‘Portal Layout’ and enable it.

In this example, I see the ‘NBA news’ has shown up, instead of what was ‘CustomIsland 0’. Clicking the Right Column pull-down and selecting 4 ensures that it will be the 4th island down in order.

The Search, Shout Box and Who’s Online islands will be shown before it.

After you’ve set your order the way you want it, just click on ‘Update Layout’ and UBB.threads will take the Island and make it available for users browsing your forums.

There is is in all its glory! :rawk:

At this point you really don’t need to read further, because you have all that is needed to make your own. Just change the $feedURL and $numItems and you are good to go for your forum.

If you want to dive deeper into what makes it ‘tick’ and also look into customizing it further, then keep reading!

The code is shown below for reference, minus all the header crapola:

# Configuration parameters go here
$feedURL = 'http://www.nba.com/rss/nba_rss.xml';
$numItems = 5;

# Let it rip!
require_once('rss/rss_fetch.inc');
$rss = fetch_rss($feedURL);

# Start of feed loop
$i = 0;
$feedinfo = '<table width="100%">';
foreach ($rss->items as $item ) {
	if ($i >= $numItems) continue;
		$title = $item[title];
		$url   = $item[link];
		$feedinfo .= '<tr><td class="rightalt-';
		$feedinfo .= ($i&1) ? '1' : '2';
		$feedinfo .= "\"><a href=$url>$title</a><br /></td></tr>";
		$i++;
	}
$feedinfo .= '</table>';

# Hand off to UBB.threads, which expects $body to have the stuff!
$body = <<<EOF
	$feedinfo
EOF;

What is happening here?

• Lines 2 and 3 are where you configure the feed URL and now many items to display
• Line 6 grabs the MagpieRSS library which does 95% of the heavy lifting
• Line 7 leverages that and gets the feed data (if you looked at the raw feed data, it would be in XML format)
• Line 11 assumes we are going to use a TABLE container (we’ll talk about changing this later on)
• Lines 12 thru 20 loops for all the returned feed data and creates a row (TR, TD) for each feed entry
• Line 16 alternates the color for each row, using the UBB.threads classes stored in your style
• Line 18 makes each entry a clickable URL
• Line 21 finishes off the TABLE container
• and Lines 24 thru 26 hand off $body to UBB.threads parser

That’s it in a nutshell

Could the code be cleaner and easier to read? Absolutely.

We’ll get into that now in the next part of this article which will aim to get a Custom Island to look completely different than the forum style, but more like one of the right hand Widgets on this blog.

It’s more an exercise to show how it is done, than to impose any kind of design rules for custom islands down the road.

Remember, the goal of this blog is to have the forum integrated into WordPress, with WordPress as the Portal. Keeping that in mind, I want to take the first step with this custom island. ;)

With the picture to the left in mind, let’s get to figuring out how to get there.

Popping the hood on the HTML code that generates the widget shows that it is very similar to the one we generated for UBB.threads. The main difference is that it is DIV, UL, LI based versus TABLE, TR, TD based.

I’ve taken the liberty to shorten up some of the titles and descriptions to not overload on too much text. The code is shown below:

<div class="widget widget_kbrss" id="kb-advanced-rss-4">
	<h3>
		<a title="Syndicate this content" href="http://www.nba.com/rss/nba_rss.xml" class="kbrsswidget">
			<img style="color: white;" alt="RSS" src="https://sirdude.com/wp-includes/images/rss.png" />
		</a>
		<a href="http://www.nba.com/news">NBA news</a>
	</h3>
	<ul>
		<li>
			<a title="Le title" href="http://www.nba.com/2010/news/02/25/cavs.shaq.hurt.ap/index.html?rss=true" class="kbrsswidget">Shaq leaves game with 'significant' sprained thumb</a>
		</li>
		<li>
			<a title="Le title" href="http://www.nba.com/2010/news/02/25/kings.thompson.ap/index.html?rss=true" class="kbrsswidget">Fractures in back to sideline Kings' Thompson two weeks</a>
		</li>
		<li>
			<a title="Le title" href="http://www.nba.com/2010/news/02/25/pierce.out.ap/index.html?rss=true" class="kbrsswidget">Pierce (thumb) out vs. Cavs, could miss 'couple of games'</a>
		</li>
		<li>
			<a title="Le title" href="http://www.nba.com/2010/news/02/25/grizzlies.thabeet.ap/index.html?rss=true" class="kbrsswidget">No. 2 draft pick Thabeet assigned to D-League</a>
		</li>
		<li>
			<a title="Le title" href="http://www.nba.com/2010/news/02/25/mavs.momentum.ap/index.html?rss=true" class="kbrsswidget">Win over Lakers increases Mavs' confidence</a>
		</li>
	</ul>
</div>

By the way, if you haven’t gotten Firefox with Firebug add-on you are missing out on a very important tool to have!

With the above in mind, I’ve rewritten the Custom Island code shown below:

# Author: SD
# Website: https://sirdude.com
# Description:
#   Fetches a feed, parses it and makes it ready for a Custom Island
# Version: 1.1
# Dependencies: Uses MagpieRSS library (in cache_builders/custom/rss directory)

# Configuration parameters go here
$feedURL = 'http://www.nba.com/rss/nba_rss.xml';
$numItems = 5;

# Let it rip!
require_once('rss/rss_fetch.inc');
$rss = fetch_rss($feedURL);

# Start of feed loop
$i = 1;
$feedinfo = '<ul>';
foreach ($rss->items as $item ) {
	if ($i > $numItems) break;
	$feedinfo .= '<li><a title="' . $item[title] . '" href="' . $item[link] . '">' . $item[title] . '</a></li>';
	$i++;
}
$feedinfo .= '</ul>';

# Hand off to UBB.threads, which expects $body to have the stuff!
$body = <<<EOF
	$feedinfo
EOF;

Nothing much to explain here, since we are breaking out of the TABLE model into the DIV model. I also took the liberty to clean up the code a bit, but it’s basically the same functionality as before.

One further thing to do is to also change the title of the feed to use an h3 tag. I’ll post the syntax for the title later on, since we will also want to both linkify it as well as add an RSS icon to the left side. The resulting display looks like this:

Now it’s really a matter of styling the list items with CSS in the Extra Properties section of the Style editor in UBB.threads.

After styling it we see the final result, which is pretty close to what you see on the portal. We can and will make it exactly the same as we progress further down the road customizing the forum style. [ Check it out ]

The CSS is shown below for reference. At a later date and in another article I’ll get into the nitty gritty of what was done and why. There needs to be a foundation laid that includes knowing the web developer tools such as, Firefox, Firebug, Stylish, ColorZilla, Measureit and more.

#content{
width:1100px;
margin:0 auto;
}
.widget {
background:url("../styles/images/wp-portal/bg-box.png") repeat-x scroll 0 0 #FEFEFE;
border:1px solid #FFFFFF;
color:#555555;
font-family:Georgia,"Times New Roman",Times,serif;
line-height:20px;
margin:0;
padding:0;
position:relative;
}
h3 {
background:url("../styles/images/wp-portal/bg-widget-title.png") repeat-x scroll 0 0 transparent;
color:#666666;
height:30px;
font-family:Verdana,Geneva,sans-serif;
font-size:10px;
font-weight:normal;
text-transform:uppercase;
line-height:14px;
margin:0;
padding:14px 15px 0;
}
.widget ul li {
background:url("../styles/images/wp-portal/ico-bullet.png") no-repeat scroll 4px 14px transparent;
border-bottom:1px solid #EDEDED;
padding-left:20px;
}

.widget ul, .widget div, .widget p {
padding:0 15px 10px;
clear:both;
margin:5px 0
}
.widget ul li a {
color:#777777;
line-height:30px;
padding:0 0;
text-decoration:none;
}

For you to apply it, you would go to the Style Settings for your theme and add it to the Extra Properties textarea and Update the style. ;)

One last thing to note is the Custom Island title. The ‘Name’ field in the Custom Portal Island editor is:

<h3><a href="http://www.nba.com/rss/nba_rss.xml" title="Syndicate this content"><img src="https://sirdude.com/forum/styles/images/wp-portal/ico-rss.png" alt="RSS" /></a> <a href="http://www.nba.com/news">NBA news</a></h3>

That’s it!

Phew :ty: