How Can I Make BB Code Display My Web Pages?

By Nathan Segal

If you spend time on forums, sooner or later you'll venture to the section(s) where people are selling all sorts of products, like the one below.


As you can see, this screenshot was taken from the Warrior Forum.

If you want to sell products, you'll have to make use of BBCode, not HTML. When I began to use it, I found it extremely clumsy and difficult to use. The control over text and other page functions was a real pain and worse, I realized it would take a really long time to code my pages. 

I thought there had to be a better way, especially since there were people whose sales pages looked fabulous, as good what they looked like on their web sites.  

Determined to find the solution, I visited several of these forum pages. On one page, when I tried to select some text, I found I couldn't do so. It hit me in a flash. "This was an image!" When I right-clicked my mouse I was able to learn some more, but it wasn't until I downloaded the image and had a closer look that I learned the full story. Essentially, the author of this sales page had turned the entire page into a series of images, which were assembled onto the forum using BBCode. 

In this article you'll learn how to do that. And the best part is that it's not too difficult, it only takes a bit of time and some testing. 

Here's how to make it work:

1. Your first step is to get a copy of Techsmith Snagit, or a similar program. 


2. Launch Snagit and set the interface to capture scrolling web pages.

3. In Internet Explorer (I have version 8), capture a sales page (I used one of my own). 


The result will be a really long page like the one above (it's been reduced in height to save space on this page). Save it as a 256 color GIF, which will create a small file size. 

4. Next, open the GIF file in an image editor, such as Photoshop, Paintshop Photo Pro or PHOTO-PAINT. In my case I decided to use PHOTO-PAINT.


5. The next thing to do is to activate the horizontal image slicing tool and start cutting the image into sections. (Note that in the Warrior Forum, you can only use ten images. I used eight to keep it safe.) Also be aware that when you're cutting the image into sections, note where the price is on your page and cut that accordingly. Later on, you'll link this with the BBCode and it will become an active area to purchase your product, just like on a normal web site. 

6. Once you've cut the image into sections, save them into one folder (each program will have a different way of doing that). 

7. Once you've saved the files, you'll want to load them to your server. When working with the Warrior Forum, I would create the directory this way. http://www.yourdomain.com/images/wso  (wso stands for warrior special offer). 

Now you're ready to start building your web page using BBCode. To keep it simple, and to preserve the exact appearance of the page, I recommend using only two pieces of BBCode:

• The images tag [img]• The URL tag [url]

You can use more than this for text, etc., but if all you want to display is the web page, this will be enough. 

Here's how you would set up the code to work with an image:  


Here's how you would do it with a URL:

[url]http://www.yourwebsitehere.com.com[/url][url=http://www.yourwebsitehere.com.com]How to Create Great Reports[/url] 

And finally, here's how you set up the code to work with an image and a URL. (This is especially important when adding a link to a payment processor, such as PayPal. 


Here's an example of code from an actual posting: 

[img]http://www.speedupmycomputernow.com/images/wsoapr23R1C1.gif[/img[img http://www.speedupmycomputernow.com/images/wsoapr23R2C1.gif[/img][img]http://www.speedupmycomputernow.com/images/wsoapr23R3C1.gif[/img][img]http://www.speedupmycomputernow.com/images/wsoapr23R4C1.gif[/img][url=http://simplehowtoguides.com/dlg/sell.php?prodData=pp%2C1%2C25][img]http://www.speedupmycomputernow.com/images/wsoapr23R5C1.gif[/img][/url][img]http://www.speedupmycomputernow.com/images/wsoapr23R6C1.gif[/img][url=http://simplehowtoguides.com/dlg/sell.php?prodData=pp%2C1%2C25][img]http://www.speedupmycomputernow.com/images/wsoapr23R7C1.gif[/img][/url][img]http://www.speedupmycomputernow.com.com/images/wsoapr23R8C1.gif[/img]

When you post the code on a forum, it will appear differently than what I have here. Still, there are several important points to observe:


  1. Make sure there are no spaces in the code. This will create breaks in your image and you'l have to tweak it to get the right result. 
  2. Use 256 color GIF images only.
  3. Check the forum to see how many images you can use in a layout. If you use too many images, you'll probably lose portions of the page.
  4. Finally, test everything. 
  5. And that's it. You now know my secret. I hope it works well for you.  

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date