In previous versions of vBulletin to create a page based on an IFRAME required either creating a custom PHP file and template or installing a 3rd party modification. With the new Site Builder in VB5 Connect it is now quick and easy to add content to your site via IFRAMEs.

In this example we will add a powerful online photo-editor to your site. Users will be able to load, edit, and save images in a photoshop like interface. The photo editor is provided free by http://pixlr.com. They allow it to be embedded in an IFRAME on your site using code like this:

HTML Code:
<iframe src="http://pixlr.com/editor/" scrolling="no" width="100%" height="600">This page requires an IFRAME compatible browser.</iframe>
Scrolling options, width, and height are all values we can choose. I strongly suggest using 100% width on IFRAMEs with a set height in pixels. This usually renders well in most browsers. Anything in-between the <iframe> tags will be shown in browsers that either do not support IFRAMEs or have them turned off- At this time I know of no browser that doesn't support IFRAMEs but you should include a message or something just in case.

To integrate the editor into VB5 Connect we must first create a new page-

With "Edit Site" turned on, click on the "New Page" button at the top of the page:

Click image for larger version

Name:	iframe_blog1.jpg
Views:	1
Size:	64.0 KB
ID:	3725371

Next, click on "Change Layout" and choose "100%"

Click image for larger version

Name:	iframe_blog2.jpg
Views:	1
Size:	65.2 KB
ID:	3725372

Next click on "Add Modules" choose "Generic" and Select "Static HTML"

Click image for larger version

Name:	iframe_blog3.jpg
Views:	1
Size:	72.0 KB
ID:	3725373

Now drag the "Static HTML" module onto the page and release. Then click on the pencil icon to edit the module-

Click image for larger version

Name:	iframe_blog4.jpg
Views:	1
Size:	98.0 KB
ID:	3725374

On the configuration page enter "Photo Editor" for the title, and paste in the code above as the Static HTML content. You can drag the corner of the box to make it larger so you can see all the content you pasted in. Finally click SAVE.

Click image for larger version

Name:	iframe_blog5.jpg
Views:	1
Size:	54.2 KB
ID:	3725375

Now, back at the top of the page, click "Save New Page"

Click image for larger version

Name:	iframe_blog6.jpg
Views:	1
Size:	53.4 KB
ID:	3725376

Next you are prompted to give the page a name, call it "Photo Editor." You will see the URL is automatically created you can keep this default URL unless you have reason to change it. Next add Keywords and a Description for your Meta tags. This will help search engines and other pages determine the content on this custom page. You must also provide a name for the new custom template this page will use, use something that describes the page, I chose to call it "photoedit." The exact value isn't important. Finally click OK.

Click image for larger version

Name:	iframe_blog7.jpg
Views:	1
Size:	75.0 KB
ID:	3725377

You should now be returned to the new page and photo editor should be visible in all its glory. If you do not see it, refresh the page-

Click image for larger version

Name:	iframe_blog8.jpg
Views:	1
Size:	88.7 KB
ID:	3725378

You now have an integrated photo editor in your site.

There is other content you can add into IFRAMEs as well although the pxlr photo editor is probably the most popular. Before wrapping an IFRAME around a page please make sure the site allows you to do this. Many sites like IMDB and others specifically mention in their terms of service you are not allowed to "Frame" them on your site. Generally government sites like NASA, The National Weather Service, and the like do not have any such restrictions. If you found the URL to weather map for example on weather.gov you could frame that.

Finally now that you have your photo editor you may want to add it to your Navbar so users can find it. To do this make sure Edit Site is enabled again and click on the "Navigation Bar" button- and on the page that comes up choose "New Sub Navigation Option"

Click image for larger version

Name:	iframe_blog9.jpg
Views:	1
Size:	80.6 KB
ID:	3725379

Enter the Title of "Photo Editor" (or anything else you wish to call it) but in the Target URL make sure you use the URL that was automatically created when saving the IFRAME page, for us it was "PhotoEditor" (no space). Optionally you can edit the usergroups allowed to see this link.

Click image for larger version

Name:	iframe_blog10.jpg
Views:	1
Size:	37.3 KB
ID:	3725380

Press OK and finally "Save Changes" at the top of the page.

You have now added the Photo Editor as a sub-navigation menu item and you will see it like this:

Click image for larger version

Name:	iframe_blog11.jpg
Views:	1
Size:	72.2 KB
ID:	3725381

Now users will have easy access to your site's photo editor. Of course you could have made this a full nabvar button instead of a sub-navigation item if you wanted, or you could link to it in any other way you choose.