Addition: 9:44pm, January 9, 2007
I address some of the changes to the wikilets below (click here).

Wikilets, or PBwiki pages embedded in other webpages (PBwiki or otherwise), have been around for a while, and although the feature has yet to go past the “alpha� phase, it’s become a pretty ingrained part of PBwiki editing. It’s often useful for including wiki pages in non-wiki sites, or to have content from one page in another without reproducing it manually.

There are two main official methods for doing this, using an iframe or by using a javascript include. A final method uses BittyBrowser.

Iframes

Back in the old days of HTML (no really, I was around back then), we all clamored to use frames to give our sites that hi-tech look. Soon, we realized that frames usually looked sorta lame, and they were often more difficult to manage than Beyonce on an ego trip.

But hey, what’s that to your right? What a snazzy looking little menu! That menu, hosted here on my personal wiki, is an iframe (inline frame). All I did was create a normal wiki page, and then added some links to it.

So, how do you embed an iframe, you ask? Here’s the basic code:

<iframe src="http://WIKI.pbwiki.com/PAGE?raw=bare"></iframe>

And with options:

<iframe src="http://WIKI.pbwiki.com/PAGE?raw=bare" width="150" height="100"></iframe>

WIKI is the name of your wiki and PAGE is the page name. If you’re linking to a page on the same wiki, you can simplify the entire URL to just “/PAGE?raw=bare�. width and height are numerical pixel values. To do something like the example above, you’d have to set align=�right� as well, so that it moves the iframe to the right side. A complete list of possible options can be seen here. Advanced users can also use CSS.

This method is the easiest to configure and as you can see, the results are pretty nice. There are also a few things to note:

• It uses a simplified snakeskin regardless of what skin you’re actually using. That may or may not be important to you, but if you do want to change that, the only way is to modify the page being referenced in the iframe either with Javascript or CSS, and that can be annoying.
• If you click on the links inside an iframe, it’ll open the link INSIDE the iframe. You can fix this by putting at the top of the page in the iframe (target=_blank to make them go to a new page). Like the other problem, there’s no way to fix it without changing the page in the iframe.
• If you DO want links to open inside the iframe, then all the links point to the full versions of the pages and not the wikilet version. Fix that by linking to the URL “http://WIKI.pbwiki.com/PAGE?raw=bare&embed=1″. The added “embed=1″ attribute transforms all links to wiki pages so they point to the wikilet versions.

The Javascript wikilet solves both these problems.

Javascript Include

Wordpress (the backend running this blog) is a bit finicky with the inclusion of Javascript, so I’ll have to bother you to visit my wiki to see this next example:

http://dochuyen.pbwiki.com/PBwikiBlogEx2

The embed code:

<script src="http://WIKI.pbwiki.com/PAGE?raw=js"></script>

This example takes the FrontPage of Yummy, the official PBwiki wiki, and embeds it in my wiki. Notice how its styles match those of my wiki automatically. Also, I don’t have to do anything to make the links open in a full window.

To change the height and width:

<script src="http://yummy.pbwiki.com/FrontPage?raw=js&width=300&height=100"></script>

Where width and height are numerical pixel values, just like above.

Scripter’s Secret
The “raw=js” mode stores the html of the entire embedded page in a variable called tx. Clever javascript hackers can probably find some use for that.

Bitty Browser

There’s a cute little web widget called Bitty Browser, which is basically a little mini browser inside your browser…they describe themselves as the Picture-in-Picture of the web. For example, you could do a google search inside the page without leaving it.

Since you can get it to automatically load any page you want, make it link to “http://WIKI.pbwiki.com/PAGE?raw=bare&embed=1″, and the “embed=1″ tag once again serves to make sure you’re linked only to other wikilet-style pages.

Go to their page to see all the options. They automatically generate code so you don’t have to do much of anything at all to make it work. Try it!

Wikilet changes

The release of PBwiki rolled out on January 19, 2007 made a few small changes to wikilets. I make note of these below:

• When using “raw=bare”, a black strip now appears at the top, which is really useful when embedding in external webpages to identify where a particular snippet comes from. Using this together with “embed=1″ really creates a neat little “mini-me” experience. But for those of you who dont care for that kind of thing, the entire bar is wrapped in a div with id “embtitle”, so that you can put <style> #embtitle { display:none } </style> somewhere on your page (the embedded one) to prevent it from showing.
• The content is wrapped in a new div as well, with id “embcontent.” That may be useful to the CSS-savvy, although you’ll have to do it per-page, since embedded pages don’t include “wiki.css”.
• The “raw=js” mode also offers a new feature. If you set both width and height to 0 (so the parameters would be “?raw=js&width=0&height=0″, you’ll get the contents to output in an unformatted wrapper div. To most of us, that means you’ll get the data outputted as if it was a natural part of the page. A very cool idea. (hmm…I wonder whoever thought of it…)

Closing

That’s all for today’s tip. As an aside, I hate typing code examples into wysiwyg editors (Wordpress uses one). Next week…using the new wysiwyg plugins in non-wysiwyg wikis!

- Jason Nguyen