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>
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:
Next, click on "Change Layout" and choose "100%"
Next click on "Add Modules" choose "Generic" and Select "Static HTML"
Now drag the "Static HTML" module onto the page and release. Then click on the pencil icon to edit the module-
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.
Now, back at the top of the page, click "Save New Page"
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.
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-
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"
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.
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:
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.