SoarPort 102: Embedding Tutorial

On the display page for each SoarPort, you can choose to copy and paste the "embed" code to place the SoarPort into your own webpages.

You can accept the defaults, and the result is a SoarPort which is 400 pixels wide by 400 pixels tall. And the zoom level is the lowest value - which means the image content is fully zoomed out.

With some minor modifications, you can customize your SoarPort to change the dimensions and the zoom level prior to embedding in your site. Consider the following SoarPort embed code:

<iframe style="border:1px solid #cecece" src="http://www.soarport.com/soarport1.0.0.0.php?a=2&i=30" width="400" height="400" ></iframe>

This code contains an HTML element called an "iframe", or inline frame. That means the contents of another webpage are displayed within the boundaries of the box created by the iframe. In this case, the iframe has a width and a height attribute. Notice how they are both 400. If you change the width to 200 and the height to 450, here is the resulting code:

<iframe style="border:1px solid #cecece" src="http://www.soarport.com/soarport1.0.0.0.php?a=2&i=30" width="200" height="450" ></iframe>

And here is the resulting SoarPort:



To set the default zoom level, you can add a hidden switch to the URL of the iframe. Zoom is expressed as the parameter "z". In the following code, a zoom level of 3 is specified:

<iframe style="border:1px solid #cecece" src="http://www.soarport.com/soarport1.0.0.0.php?a=2&i=30&z=3" width="400" height="400" ></iframe>

And the resulting SoarPort: