UBB.threads and Wordpress experts » How to

Custom Vimeo BBCode for UBB.Threads

SD — Thu, 05 May 2011 18:11:54 +0000

I’ve had quite a few customers request a custom BBCode for Vimeo, so rather than go into a long post about it, I will post the file and some short instructions on how to implement.

There are really two ways to add a Custom Tag. One being to manually type all the appropriate fields in and the other is to import from a previously exported tag from a working UBB.Threads site.

Since I have one working on many sites, I exported it for your convenience.

The file to import into the Custom Tag Editor is below:

Vimeo Custom Tag - v1 - Downloaded 154 times

To import this file, go to your Admin Control Panel, Content tools and select the 2nd Tab ( Custom Tag Editor ).

The URL to this page would be:

“http://yourforums.com/forums/admin/rebuildcontent.php”

where the colored text would be replaced with the base URL to your forums.

Locate the bottom menu ( or tabs, if you prefer ) and click on “Import New Tags”.

Once imported, you will see the following form:

The ‘Custom Tag’ I used is ‘vimeo’, however you are free to use the more common ‘video:vimeo’ if you would like. I prefer the shorter / less typing approach.

The other reason I use the vimeo tag, is that it mirrors the same tags or “shortcode” used in WordPress. Makes sense to keep it consistent

So when the user inserts the tag into a post with the following as an example:

[ vimeo ]http://vimeo.com/23199805[ /vimeo ] ( no spaces )

The result is:

Click here to view the embedded video.

Have at it and enjoy !

A Better YouTube custom BBcode

SD — Tue, 03 May 2011 15:52:42 +0000

A forum that I consult to ( SimHQ ), recently informed me that YouTube has changed the URL format for when you click the “Share” Link below the video. It no longer matches the URL in the address bar and this was causing some confusion.

The URL in the address bar is the still the familiar one that links to youtube.com, adding the ?v=xxxx parameter as always, but the Share link has gone a different way now.

Namely, YouTube decided to use “http://youtu.be/kXRSZSxXB9g” for example.

This, of course broke any existing BBcode regexes that UBB.Threads had in place and simply didn’t parse if the user used the URL generated from the “Share” button.

Quandary, you say?

I looked at the resulting embed code and it is the same as before, so the regex simply needs to be updated to handle both cases; old and new.

For UBB.threads forum admins, go to your Control Panel, Content Tools and Custom Tag Editor ( shown below ):

Click to see Full size

The only line that needs to be modified is the Matching regex:


(|.*youtu\.be/|.*v=)([a-zA-Z0-9_-]{8,12})(|&.*)

and you are good to go.

You can double click on the regex above and the line will be automatically selected. You can then copy it and paste it into your UBB.threads admin BBcode edit window.

Just a note on the regex. It actually parses three different types:

YouTube URL from address bar: http://www.youtube.com/watch?v=JOddp-nlNvQ&feature=grec_index
YouTube from “Share”: http://youtu.be/JOddp-nlNvQ
YouTube ID: JOddp-nlNvQ

All three produce the same embed code and a case in point would be:

[yt]http://youtu.be/JOddp-nlNvQ[/yt]

produces:

Click here to view the embedded video.

You can also just download the entire custom text file below and import it, so as to play with it separately before enabling. I used the ‘yt’ tag, instead of what you may be more familiar with ‘video:youtube‘. Typing [yt] seems much easier for my forum members anyway!

Youtube Custom BBcode for Import - v1.1 - Downloaded 156 times

Enjoy

UBB.threads user selectable tooltip preferences

SD — Sun, 13 Mar 2011 20:13:11 +0000

From what I’ve seen, the naysayers win in most cases and it ends up with the forum turning off the option entirely. Whoever wants it, just can’t get it. Matter of fact, this is the case over at Ubb.central right now ( I posted the solution there as well ).

It’s turned off for whatever reason.

So, that leads me to this post and the first modification to stock UBB.threads 7.5.6. This post will walk you through what you need to do in order to give the users the option to have it or not by editing their profile and choosing which they prefer.

Step 1:

Go into Registration settings / Registration screen and set the Custom field prompt ( example picture below ) to something meaningful:

When saved, this will add an extra field to the user profile screen that allows them to show the Tooltip ( 1 ) or to not show it ( 0 ).

Step 2:

Enable tooltips globally for the forum. In other words, it will be turned on by default. This is done in Display Options, General and is pictured below:

Step 3:

Open up the file ‘scripts/postlist.inc.php’ and make 2 small changes. This will essentially look at the user profile setting and enable tooltips or not.

Find:


"user_fields" => "t2.USER_TOPIC_VIEW_TYPE, t2.USER_TOPICS_PER_PAGE, t2.USER_POSTS_PER_TOPIC",

Change to:


"user_fields" => "t2.USER_TOPIC_VIEW_TYPE, t2.USER_TOPICS_PER_PAGE, t2.USER_POSTS_PER_TOPIC,USER_EXTRA_FIELD_1",

Then find:


$postrow[$z]['tooltip'] = "";
if ($config['TOOLTIP_LENGTH'] && $config['TOOLTIP_LENGTH'] > 0) {

and change to:


$postrow[$z]['tooltip'] = "";
if ($config['TOOLTIP_LENGTH'] && $config['TOOLTIP_LENGTH'] > 0
                                              && $user['USER_EXTRA_FIELD_1'] == '1') {

Step 4:

Tell your forum members about it or better yet, link to this post!

That’s it!

Image upload directly into your post

SD — Sun, 21 Nov 2010 08:05:57 +0000

A feature that has always been needed on ubb.threads is a simple way to upload images directly into a new post without having to either upload to a gallery forum first or a popular picture sharing site, then link to it.

There are other methods too, including having a companion photopost installation that links the board members together, but in the end, you can’t beat, just clicking on a button in the editor toolbar, selecting a number of images and uploading them right into a post.

Furthermore, it would be nice for all the bbcode markup to be auto-generated without thinking.

Bottom line: Click, browse and Save!

Well, this now exists as a custom modification. The difference with this modification is that I won’t be posting all the files to change here, because they aren’t trivial. I will instead describe how it works, then make it available as a paid modification by me for your board.

Here is how it works:

First of all the modification adds the editor buttons to the quick reply area. This is logical, since those images are cached once the images are loaded the first time. No speed issues really apply. The new and improved quick reply is shown below:

There is a new kid on the block, which initiates the image up-loader.

It’s the 5th icon over from the left

The blue up arrow over the image is the symbol for uploading the image into a post.

Clicking this image pops up a nifty shadowbox dialog that guides the user through the process of uploading one or more images into the post.

The dialog is shown below:

When first used, there is a fairly lengthy help text to guide the user through what is really an easy and painless process. You simply browse to your computer and “Add file from your PC” or alternatively can paste a URL from a remote picture (ie: imageshack, tinypix or photobucket) and the up-loader will send it to the server.

Since the process is so easy, you will find that the help text is no longer needed and that can be hidden (cookie based to remember your preference) by clicking the [ Hide help ] button on the upper right corner.

Uploading is all ajax driven and you will get feed back as the file uploads with a loading icon ( ). Once complete, the dialog shows a thumbnail for each image on the left. An example of two images is shown below:

The user can continue to repeat the process of adding files from their PC or from remote URLs and the thumbnails will keep being added to the vertical list.

If for some reason, you change your mind after seeing a particular thumbnail, just click on the [ Remove ] button to the right of the specific thumbnail and it won’t be included in the batch to be inserted into the post.

When ready, you have two options to save into the post and they are “Lightbox” or “Standard”

Lightbox would normally be used if you are uploading very large pictures, that you want to expand as a lightbox effect when clicked. I actually use a free library called “Shadowbox“, which is based upon the Lightbox idea.

Standard is for normal or smaller images that don’t need to be clicked on at all to see their full potential.

There are admin settings to set the maximum width of an image when it appears in a post, so as to not interfere with the board display as well as a maximum physical width of the expanded image in lightbox mode.

For this example, I saved the images as a Lightbox to see how this effect works:

The IMG tags are auto generated, with an additional set of parameters (gal and a hash value) to specify that they are to be treated as a lightbox gallery.

Clicking either image, brings up the lightbox and you can click on all the images to cycle through them:

I’ve installed this on quite a few sites now and they simply love it, since it’s all in one place.

If you are interested, just use the contact form and ask for a quote. You can view my profile comments on the many satisfied customers that have had this and / or other modifications done.

One satisfied customer even went as far as to write an article on it here

Upcoming events Custom Island

SD — Sat, 06 Nov 2010 05:26:18 +0000

Ubb.threads has a very underused, but powerful capability in what are called “Custom Islands”.

You essentially can have a php code module be scheduled to run at whatever interval you want to produce output to be used as one of the custom islands (left or right) on your forums.

I was recently asked to provide such a beast for a customer of mind at Fishing Minnesota and figured that I would share it with the Threads public. Thanks to Rick Paquin for this!

I’ve done the work, so all you have to do is copy the code and paste it into one of your empty custom islands, enable it, set a schedule for how often it updates and you are good to go.

The code is shown below:

/* PHP CODE HERE, IF NECESSARY */

# Change the next parameter to the maximum future events you want
$maxEvents = 10;
# Change to whichever column this Custom Island will be shown (for CSS)
$portalCol = 'left';

# -- Nothing changes below, unless you are non-n00bers ;)
$intTime = time();
$dateParts = getdate($intTime);
$dtYr = $dateParts['year'];

$q = "
 SELECT ce.CALENDAR_EVENT_SUBJECT, ce.TOPIC_ID, t.POST_ID,
 ce.CALENDAR_EVENT_DAY, ce.CALENDAR_EVENT_MONTH,
 ce.CALENDAR_EVENT_YEAR, ce.CALENDAR_EVENT_BODY
 FROM {$config['TABLE_PREFIX']}CALENDAR_EVENTS ce, {$config['TABLE_PREFIX']}TOPICS t
 WHERE ce.CALENDAR_EVENT_TYPE='public'
 AND ce.CALENDAR_EVENT_RECURRING = 'never'
 AND ce.CALENDAR_EVENT_YEAR >= $dtYr
 AND ce.TOPIC_ID=t.TOPIC_ID
";
$r = $dbh->do_query($q);
$ceList = array();
while (list($ceSubject, $topicID, $postID, $ceDay, $ceMon, $ceYr) = $dbh->fetch_array($r)) {
 $ceTime = mktime(0,0,0,$ceMon,$ceDay,$ceYr);
 if ($ceTime >= $intTime) {
 $ceList[$ceTime]['Subject'] = $ceSubject;
 $ceList[$ceTime]['postID'] = $postID;
 }
}

# Create the list
$i=0;
sort($ceList);
foreach ($ceList as $ce) {
 $cssExt = ($i++&1) ? '2' : '1';
 $cssClass = 'class="' . $portalCol . 'alt-' . $cssExt .'"';
 if ($i == 1) {
 $htmlList .= "{$ce['Subject']}";
 } else {
 $htmlList .= "";
 $htmlList .= "{$ce['Subject']}";
 }
}

/* DO NOT CHANGE THE LINE BELOW */
$body = <<
There really are only two things to change here:

How many upcoming events to display (line 4)
Which column the island will be on (left or right – line 6)

That’s it for the code!
The final thing to do is to configure the custom island’s behavior and I’ll just show a screenie of the parameters I chose:

I set the island to update every 2 hours (120), gave it a title and that was it! Well, almost. One final thing was to go to portal settings and select which column (left or right) to display it on and what order.
Here’s how it looks on the right hand column at Fishing Minnesota forums:

Enjoy and hit the tip jar on the upper right of the site, if you find this worth it   
Related posts:

UBB.threads Custom Island from an RSS feed
UBB.threads Twitter Custom Island
Getting more out of the Custom Island Editor

Adding a Gametrailers.com video tag

SD — Sun, 04 Apr 2010 21:41:08 +0000

A customer of mine recently wanted to know if I could gin up a custom ubbcode tag for Gametrailers.com and I obliged him.

The first thing is to note a pattern that can be matched from the video URL and the resulting embed code at the site. In most cases, this is what you want to do; look at a source URL or other identifier and try to find a correlation between that and the resulting html markup that is normally called the embed code.

For this example, the URL I used was:

http://www.gametrailers.com/video/pax-east-breach/63822

and the resulting embed code was:


  
  
  
  
  
  
  
  

  
    Video Games |
    Breach |
    PAX East 10: Destruction Walkthrough
  
  
    XBox 360 |
    Playstation 3 |
    Nintendo Wii

I cleaned up the code to be on multiple lines, instead of a giant glob of embed code, for readability.

The first thing I want to do is just to remove the extraneous crap after the object and embed code. No need to have all those extra links, so we’ll just remove them and the resulting embed code looks like this:

Also note that I wrapped the whole thing in a containing div with the class=”gt-embed”

The key things to note is the relationship between the URL and the resulting embed and to further hone in on that point, lines 10 and 13 are key. They take the numeric value from the URL and include it there.

This is where a regex comes into play. We’ll capture that number from the URL and substitute it into the embed code and be done with it.

The regex that does this is:

(|.*/video/.*/)(\d+)

It has two captures, with the first one being just to discard all of the URL up to the final numeric value. The second capture is then used in the substitution markup as follows:

Lines 10 and 13 use the \\2 to represent the 2nd capture value; namely the number.

That’s it!

One further thing to note is that the gametrailer site also has user videos too and the relationship between URL and resulting embed is slightly different. It is different enough to warrant another ubbcode tag.

Rather than go into all of what would pretty much be the same concept, I will just include the exported tags. You can import both of them in the Custom Tag editor and make any changes you’d like. For example, you might want to use different tags than what I chose ( and ).

That is all up to you.

Text or Zip available, you decide:

Gametrailer ubbcode - v1.1 - Downloaded 233 times
Gametrailer ubbcode (zipped) - v1.1 - Downloaded 214 times

The approves.

Adding a top logo to your UBB.threads forum

SD — Sun, 14 Mar 2010 16:27:42 +0000

I don’t know how many times I’ve seen someone post on the UBB.central support forums, “How do I add a logo to the top of my new forum?”. It’s a simple request, really and we’ll find out that the answer is just as simple.

This article will build up to the final answer by first making a new style available, discussing some of the particulars and then culminate with adding the top logo itself. Feel free to skip to the end, if that is all the information you really need or want.

The style that you can download is a simple fixed width one, with three basic colors involved: Red, White and Blue. It became a reality, when I had a customer want “something simple” and many times, simple IS better anyway.

I won’t get into all the details of how to import a style into UBB.threads, because there is a lengthy, step by step saga that you can read about here. Feel free to read that article first, if you aren’t too familiar with the whole style importation process.

We’ll just get on with it, import the new style and use it instead of the stock UBB.threads style shown here:

That’s the standard we’re all used to by now, excluding the “wonderful” free hand logo I placed up top in the screen capture editor to stand out like a sore thumb. I’ve also added one category and one forum, just to have something to show in the screen capture. You probably have much more content on your forum, however you get the picture.

Grab the style, import it, and also upload the other directories to the corresponding forum directories on your site:

Red, White N Blue style - v1.1 - Downloaded 211 times

After importing the style in the Style Editor, saving it and selecting it in your preferences, you should see something that looks similar to the picture, below:

Initial look after import (Click for full size)

The first thing you will notice is that the style is setup to default to a fixed width of 1100 pixels wide and centered on the screen. You can quickly change this to allow it to be full width by removing the following from the Extra Properties section of the style:

#content {
  width:1100px;
  margin:0 auto;
}

Regardless of what you decide, you are probably reading onward and wondering how to get the damned logo to show up. You can see stuff in the Extra Properties section pertaining to a logo and might be wondering why it hasn’t shown up yet.

This assumes you have uploaded both the styles and images directories to your site, of course

The entire extra css is shown below, minus some of the extra stuff you can actually throw away:

#content {
  width:1100px;
  margin:0 auto;
}

#head {
  position:relative;
  margin: 0px auto;
  padding: 0px;
  width: 1100px;
  height: 130px;
  background: transparent;
}

.top-mb {
  position:absolute;
  top:0px;
  left:425px;
  width: 393px;
  height: 123px;
  padding: 0px;
  margin:0px;
  border:none;
  display:inline;
  background:url(../styles/rwb/images/mb-logo.png) transparent no-repeat;
}

.post-buttons img {
  display:none;
}

It sure looks like it should be displaying!

But there is one final thing to do and that is to go to the Display Options, General, HTML Includes tab and paste some markup for the css to act upon. My example for my local development system is shown below:

Save this out and you should see your logo on top. Well…. make that the example logo I supplied for you

You can supply your own logo. Just make sure that the .top-mb class matches the new file name or simply upload a new file on top of the original. It is your choice.

You will also want to change the href URL to your board value, since there really isn’t an sd.com, if you get my drift. I’ll leave that little change up to you

The final result is shown below:

In all its glory (Click for full size)

I hope this helped out in some small way. What amazes me is that there is already 5 downloads and I am just now finishing off this article. Who is wearing out their F5 key and laying in wait for a new .zip to be available?

Regardless, the approves!

Demystifying UBB.threads framework – Part I

SD — Thu, 04 Mar 2010 01:22:45 +0000

Have you ever gone to a UBB.threads site, notice something unique about it’s layout and wonder ‘how the heck did they do that’ ?

For example, there is a very well put together site that is in the ‘Community spotlight’ forum over at UBB.central called [ Love the Garden ].

They peeked under the hood, figured out what needed to be done and created both a unique look and feel to their forum, while not doing anything super radical in the process. The end result is probably one of the best looking UBB.threads sites I’ve yet seen.

All that is needed to accomplish the same kind of thing for your site is to understand the basic building blocks that go into displaying any page on a forum. At first that might seem daunting, but as you’ll read further on in this article, you’ll find that it’s not so hard after all.

In most cases, the UBB.threads software takes the URL, determines what kind of page needs to be displayed (forum list, post list, topic etc), wraps it in a header and footer, slaps a left or right column or both for good measure and spits it out in HTML.

But, if you’re like me and you have an itch to see what makes a site unique for some reason, you’ll probably be running Firefox with Firebug installed and you’ve worn out your right mouse button by clicking and then doing ‘Inspect Element’!

You inevitably see stuff like this and the natural first reaction might be to simply want to close it up and go watch a movie instead or take a shot of Jack Daniels to erase the horror!

It’s like TABLE heaven or hell, however you might look at it.

Not to worry though, it’s really not as ‘bad’ as it looks.

All we need to understand is just four templates and how they get glued together to show a nice looking site like Love the Garden is.

Then, let’s get on with it and identify these templates, deconstruct them into a simpler form for demonstration purposes and then show what I did with them on this site in particular.

I’ve done something very similar to what they’ve done and haven’t violated any ‘rules’ because all the changes are done to templates and CSS for presentation purposes.

The stock code is left intact!

You can see the work in progress over [ here ]. Please note that the actual forum styling is in flux, since I’m trying to support not only a style previewer, but a theme previewer, in anticipation of version 8.0 of Threads

The four files in order of use are:

templates/default/header.tpl
templates/default/left_column.tpl
templates/default/right_column.tpl
templates/default/footer.tpl

If you open each one up individually in your editor, you might head on over to the Jack Daniels bottle again, since there is really no indentation practiced at all. They just ‘work’!

What follows next is a result of my stripping out all the clutter, adding HTML comments
for sections and gluing them together into one contiguous file as shown below:




	Your board title stuff
	
	{$headerinsert}
	{$refresh}
	


	

	
	
		{$headerfile}

		
					{$tbclose}
				
					{$tbclose}
					

			
				
					{$tbopen}
						

							Breadcrumb bar here
						
						
							Navigation menu here
						
			
			
				
					
						

						
						
							
								{$island_data} 
							
							
						

								

						
							
							
								{$island_data} 
						

						
							
						
					
				
			
			
				
					{$tbopen}
						

							
								
									
										Board rules . Mark all read . Style select
										Contact Us . Homepage . Top
									
								
							
						
				
			
		
		{$footerfile}
	


	Debug info and powered by UBB.Threads(tm)

Compare this with what the raw files that I started with and it looks MUCH more manageable. Lets delve deeper into each of the four files and note any limitations as well as possibilities.

header.tpl

Your board title stuff

{$headerinsert}
{$refresh}

{$headerfile}

{$tbclose}

{$tbopen}

Breadcrumb bar here

Navigation menu here

This file sets the stage for all the other files to follow. It loads up your board title for the browser, includes the css and javascript, includes your header insert ($headerinsert} file, grabs your body header ($headerfile) sets the maximum width of your board ($config['TABLE_WIDTH']) and puts out the Breadcrumbs and Navigation rows.
Of course, it does much more than this, but I summarized. It also is pre-loading all the popup menus (javascript) and so forth, but that isn’t important for this post.
I’ve highlighted the lines that are of note in the above code snippet.
One thing that I immediately took advantage of was the code in line 14, where it has a containing div of id=”content”. By simply adding the following CSS to your Extra Properties section of the style editor, you can change your board to a fixed width. Example:
#content {
width:1100px;
padding:0;
margin:0 auto;
}
For the CSS junkies out there, I set the board width to 1100 pixels, no padding and the horizontal margin to auto, which centers it on the screen. Table width can then be 100% and you basically get what you see on my forum right now [ here ]
I prefer fixed width for many reasons, but they are probably best to be discussed in another article.
One other thing to note, you could have also achieved a fixed width by setting the ‘Table Width: (all screens)’ in General Options to 1100 and achieved the same result, however in the following article, I will show you why I am going the CSS route
left_column.tpl
Even though this says ‘left’, it really is responsible for 2 things. The actual left column (if enabled) and the middle column or the main body being displayed. There is a conditional in the tpl file that decides whether to output 1 or 2 columns based upon the existence of an enabled left column. In either case, the middle column will be output.

{$island_data}

I highlighted lines 3 and 6, since they determine the width of the left and middle columns. It is hardwired in the code to 15% for left or right column and whatever is left over is subtracted from 100%. So the middle column will be either 100% (no left or right), 85% (1 column, left or right) or 70% (all columns enabled). There is no wiggle room without changing code.

Or is there!??!
I’ll discuss later how to make the templates do your bidding, code be dammed! We’ll break out of most of the TABLE world for structure and enter into the DIV and CSS world as well

I forgot to mention the comment I put in for ‘The middle stuff goes here,….’ This is where the actual middle column information is placed and is determined by the UBB.threads URL and specifically the value of the ‘ubb’ parameter. If you’ve seen the classic URL structure in the past, it was something like ‘ubbthreads.php?ubb=showflat…’, which told the program to generate a list of posts for a particluar thread. The format of how showflat looks is (surprise) dictated by the file showflat.tpl
right_column.tpl

{$island_data}

Much like the left_column.tpl file where the right column is output. Note the width again and the same rule applies.
footer.tpl

{$tbopen}

Board rules . Mark all read . Style select
Contact Us . Homepage . Top

{$footerfile}

Debug info and powered by UBB.Threads(tm)

This basically cleans up the ‘mess’ that the first three files created and I really don’t mean a true mess in the sense of the word, but more to the effect of closing all the open TABLE, TR and TD tags nicely and neatly.

It then goes on to put out the actual footer bar and any footer insert you, the admin might have entered in the Admin control panel.

So there you have it and I would say it’s much more simple to understand than at first.

Part II of this will be how I took the TABLE, TR and TD elements and completely removed them. I then went on to move things around and not be confined by having to have the Breadcrumbs above the Navigation bar. Furthermore, the fixed 15% column widths were ignored and many other things.

All of this was done to ONLY the tpl files, so it keeps with not changing stock code to achieve what looks like a highly modified product. My forums are an example as well as the garden site I first mentioned in this article.

Hope you learned a bit about UBB.threads and that it might lead you to experiment a bit on your development system. Stay tuned for Part II coming soon.

The approves!

UBB.threads Twitter Custom Island

SD — Fri, 26 Feb 2010 08:13:33 +0000

It seems as if Twitter is the rage nowadays, so it is at least logical to have the option of a UBB.threads Custom Island to display your latest tweets.

Let’s do one!

This tutorial will assume you know your way around the Admin control panel for UBB.threads, but if you don’t, go the [ this ] article and look at the pictures

It should tell you what you need to know.

First things first: Know your Twitter username.

Now paste this code into one of your Custom Islands:

# Author: SD
# Website: http://sirdude.com
# Description:
#   Fetches a twitter feed via their .js library
# Version: 1.1
# Dependencies: Twitter .js API

$body = <<
	
	

EOF;

Lines of interest that you want to change:

Line 17 to specify the width in pixels of the Twitter insert within your Custom Island
Line 18 for the desired height in pixels
Line 21 wants to probably match the background color (leftalt-1 or rightalt-1) of your style’s container
Line 22 would be the text color
Lines 25 thru 27 are for individual tweets and their links
and finally Line 39 needs to replace ‘Sirdude’ with your Twitter name

Also, if you want a nicer looking title with an icon, paste the following into the ‘Name’ of the Custom Island:

 Tweet!

You will probably want to change the following things:

The img URL would probably be to your ‘styles/images/stylename’ directory and you can find a nice looking icon around the web for it or steal mine!
Change the URL of the feed and you’re done

That’s about it and here’s what mine looks like:

I found the Twitter icon for the post over at this site [ Click ]. They deserve attribution for such nice free icons!

Also of note is to give credit to the first guy who inspired this island. That would be the folks over at CampingPA. They asked me if it was possible, I noodled a bit and busted it out. Thank you again!

The llama approves

UBB.threads Custom Island from an RSS feed

SD — Wed, 24 Feb 2010 09:24:58 +0000

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!

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?

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'] . "";
 echo "
";
 foreach ($rss->items as $item) {
 $href = $item['link'];
 $title = $item['title'];
 echo "$title";
 }
 echo "";

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.

I don’t know how many people I’ve seen get confused with this template. It’s not obvious really, but all the snippet of code is doing (and by the way, it’s ALL php code) is just filling in a variable named $body with some stuff.That’s it!

So, in reality one could just replace the entire thing with 1 line of code: $body = <<

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

# Author: SD
# Website: http://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 = '';
foreach ($rss->items as $item ) {
	if ($i >= $numItems) continue;
		$title = $item[title];
		$url   = $item[link];
		$feedinfo .= '";
		$i++;
	}
$feedinfo .= '$title
';

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

I’ll also point out here that if you hover over the syntax highlighted code, a little box will appear which allows you to copy the code with 1 click to your clipboard or view the code and / or print it.
No need to Click, drag, select, Right click and copy. I always hated having to do that.
It’s perty handy!   

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!   
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!   
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 = '';
foreach ($rss->items as $item ) {
	if ($i >= $numItems) continue;
		$title = $item[title];
		$url   = $item[link];
		$feedinfo .= '";
		$i++;
	}
$feedinfo .= '$title
';

# Hand off to UBB.threads, which expects $body to have the stuff!
$body = <<
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:

	
		
			
		
		NBA news
	
	
		
			Shaq leaves game with 'significant' sprained thumb
		
		
			Fractures in back to sideline Kings' Thompson two weeks
		
		
			Pierce (thumb) out vs. Cavs, could miss 'couple of games'
		
		
			No. 2 draft pick Thabeet assigned to D-League
		
		
			Win over Lakers increases Mavs' confidence
		
	

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: http://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 = '';
foreach ($rss->items as $item ) {
	if ($i > $numItems) break;
	$feedinfo .= '' . $item[title] . '';
	$i++;
}
$feedinfo .= '';

# Hand off to UBB.threads, which expects $body to have the stuff!
$body = <<
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:
 NBA news
That’s it!
Phew   
Related posts:

UBB.threads Twitter Custom Island
Getting more out of the Custom Island Editor
Upcoming events Custom Island