Whane's Web: Embed Unsupported Code

The Problem

The web is full of useful widgets. Unfortunately, wiki whackers don't have unlimited access to all of them directly. However, the wikidot administrative staff has given us the tools necessary to install custom widgets. The process may not be as user friendly as using the wiki syntax directly, but this still works very well for those of us that must have that special site addon. Here is the process, step by step.

Step By Step Solution

First, find the addon you wish to include in your site, copy the code provided and paste it into a .txt file. For this example, I'll be embedding an interactive google map, but any addon/widget will work.

Since we'll be using iframe to plug the addon into the site, be sure to include essential markup within your .txt file. (See reference A below.)

Upload the .txt file to your wikidot site.

Rename the document to a .html file.

Using iframe, embed the .html file on the desired page of your site.

It's that easy.

Improving the appearance of your widget.

If you've been playing around with this, then you may have noticed that using the default iframe settings will probably result in a widget displayed imperfectly. Note that style tags are supported when using the wikidot iframe so you are not restricted by the basic attributes alone and can use several .css styles too.

You may have also noticed that the page you created to hold your widget does not display evenly within your iframe. This is because most browsers display pages with a default margin around them, the result is that you have an invisible border above and to the left of your widget. To fix this, you will need to include the following html within your .txt file before uploading it to your site:

With that bit of code, and some creative use of styles, many opportunities await you:

Sample interactive Google map:

How did I do it? First head over to Google Maps and navigate to the geographic area that you wish to display on your site. Next, click the link that reads "link". A window will popup over the map, click on the "Customize and preview embedded map" link and adjust the size to preference. Copy and paste the code into your .txt file mentioned above, upload and apply styles to your iframe code.

Here is the bit of code I use to display the map above:

[[iframe http://cmbd.wdfiles.com/local--files/hold/map_no_api.html style="border: 1px solid #464646; border-bottom-width: 20px; border-top-width: 20px; overflow: hidden" width="267" height="425" scrolling="no"]]

Reference A

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>

Your widget code

<body>
</html>

Hide all comments | Unfold all | Fold all

fold

map doesn't show anymore