Tip of the Week #2: Wikilet Tips from the Masters!

15 Jan

totw-banner.jpg

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

No IframeBack 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.pbworks.com/PAGE?raw=bare"></iframe>

And with options:

<iframe src="http://WIKI.pbworks.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.pbworks.com/PAGE?raw=bare&embed=1&#8243;. 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.pbworks.com/PBwikiBlogEx2

The embed code:

<script src="http://WIKI.pbworks.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.pbworks.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.pbworks.com/PAGE?raw=bare&embed=1&#8243;, 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

5 Responses to “Tip of the Week #2: Wikilet Tips from the Masters!”

  1. clark shah-nelson January 30, 2007 at 7:52 am #

    this is great! it would be super to include this in the “Settings” somewhere, perhaps add an “embed” section.

    I also like the ability to embed the most recent changes into a web page for an online course, especially since most LMS’s (WebCT, Blackboard, eCollege, etc) still don’t support RSS – this way you can paste in the embed code into an HTML page on those, and have it function like RSS in that it auto-updates from the wiki… wikid!

  2. clark shah-nelson January 30, 2007 at 1:53 pm #

    Please do tell how in the world you got WordPress to keep that line of code in your post… I’m trying to put this in my post and it keeps messing it all up, or showing the wiki page instead of the code…

    thanks!

  3. Jason January 30, 2007 at 1:57 pm #

    Yeah, this post was a pain in the rear to get working. In the rich-text editor, you actually have to double escape the angle braces for it to show, so it’d have to be:

    &amp;lt;iframe&amp;gt;

    or something to that effect. (to make this example show correctly, I actually had to TRIPLE escape…)

  4. Ben October 6, 2008 at 4:13 pm #

    any chance of getting embed=1 to work in the raw=js javascript include method? when embedding my pbwiki into blackboard, secondary links are opening a full pbwiki page view messily within their frames.

    or alternatively is there a way of making all links on a raw=js page into target=blank_ links to open a new page first?

  5. Bertie X. Nenno September 26, 2014 at 1:09 pm #

    Everything is very open with a clear clarification of the issues.
    It was truly informative. Your site is useful. Thanks for sharing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 90 other followers

%d bloggers like this: