Site archive. SpicyNodes was active 2005-2018.

Home > Archive > Developers/reference > API Reference > Embedding

When you embed a SpicyNodes nodemap into a web page, you are embedding an Adobe Flash movie (the SpicyNodes player) and several parameters that cause the player to load your nodemap’s content and style, as well as some other settings that control Flash.

Like all Flash movies, the SpicyNodes player is added to an existing HTML page using two HTML tags: OBJECT and EMBED. More details about the OBJECT and EMBED tags can be found in this Adobe technote.

The method of embedding depends upon where your files are located; you will use the "SpicyConnector" if you are loading content from your site.

This is SpicyNodes’ default method, and is similar to the code that is provided if you click the “Get HTML” button from the “Edit details” or “Preview nodes” modes in the SpicyNodes interface. Use this method if you have created your nodemap using the online authoring tools on the SpicyNodes site, and your nodemap doesn’t need to load content from your web site:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab" height="480" width="720">
    <param name="movie" value="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef">
    <param name="quality" value="high">
    <param name="allowFullScreen" value="true">
    <embed height="480" width="720" pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef" type="application/x-shockwave-flash" quality="high" allowFullScreen="true">
    </object>

Set your nodemap ID

The “?id=0123...” variable identifies the nodemap and settings files hosted on the SpicyNodes server (i.e., if you created your nodemap using the "Edit Content" mode on this site). When you copy the above code, replace the string “0123456789abcdef0123456789abcdef” with your nodemap ID. To get your nodemap ID, right-click on your nodemap when you are viewing it live, and choose "Copy nodemap id to clipboard". Alternatively, click “See it live” from “Preview Nodes”. Your URL will be something like this: http://www.spicynodes.org/a/0123456789abcdef0123456789abcdef. And your nodemap ID is the 32-character string after the “/a/”

Resolution

Regardless of the embedding code you use, it is important to set the correct display resolution by modifying the width and height parameters of the object and embed nodes. They should be the same for both tags and should correspond to the display size you’d like SpicyNodes to occupy on your web page.

Use this method when the nodemap and/or settings are hosted on your server. You need to upload a file, snconnector.swf, to your web site, where the XML files reside. By uploading snconnector.swf, you provide a conduit that allows the Adobe Flash player to access XML files on your web site domain. (Without the SpicyConnector, the nodemap and settings cannot be accessed by the SpicyNodes player because of Flash Player security restrictions.)

The embedding syntax has values (flashvars) that reference your hosted nodemap and/or settings XML files. When using SpicyConnector for loading the nodemap and settings from your server, the embedding block can look like the following:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab" height="480" width="720">
    <param name="movie" value="http://media.spicynodes.org/display.swf">
    <param name="quality" value="high">
    <param name="allowFullScreen" value="true">
    <param name="flashvars" value="snconnector=path/to/snconnector.swf&nodemap=/path/to/xml/myNodemap.xml&settings=/path/to/xml/mySettings.xml">
    <embed height="480" width="720" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://media.spicynodes.org/display.swf" type="application/x-shockwave-flash" quality="high" allowFullScreen="true" flashvars="snconnector=path/to/snconnector.swf&nodemap=/path/to/xml/myNodemap.xml&settings=/path/to/xml/mySettings.xml">
    </object>

Get SpicyConnector

Follow this link (e.g., right click) to save the snconnector.swf file, and then upload snconnector.swf to your web site.

Set your paths

When you copy the above code, replace the string “/path/to/xml/” with your full web site path, such as “http://www.mysite.com/mycoolnodes/data/”. For example, your nodemap might be: nodemap=http://www.mysite.com/mycoolnodes/data/nodemapVersion1.xml

You can use any path you want, as long as you also upload snconnector.swf to the same web domain. You will need to set the nodemap, settings, and snconnector paths twice each (once for the OBJECT tag, and once for the EMBED tag).

You can use a mixture of direct and indirect embedding. For example, perhaps you want to host only the nodemap XML file on your server and use settings that you created via the SpicyNodes “Edit style” tool with the “&id=0123...” variable. Similarly, you can host only the settings XML file but access the nodemap with “&id=0123...”

You can simply add the “&id=0123...” snippet to the SpicyNodes player URL as in direct embedding mode and use only the flashvar related to the XML file that you plan to host on your server.

In either of these cases, the SpicyConnector swf file still has to reside in the same domain or sub-domain where the hosted file resides – just as with embedding with SpicyConnector mode.

For example, if your settings id is 0123456789abcdef0123456789abcdef and you want to host a nodemap or many nodemaps on your server and use the same settings file for them, you can embed the SpicyNodes player with the following HTML code:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab" height="480" width="720">
    <param name="movie" value="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef">
    <param name="quality" value="high">
    <param name="allowFullScreen" value="true">
    <param name="flashvars" value="snconnector=path/to/snconnector.swf&nodemap=/path/to/xml/myNodemap.xml">
    <embed height="480" width="720" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef" type="application/x-shockwave-flash" quality="high" allowFullScreen="true" flashvars="snconnector=path/to/snconnector.swf&nodemap=/path/to/xml/myNodemap.xml">
    </object>

In addition to hosting the nodemap XML on your server, you can load simple HTML files (text, images, one table) as node content. This content is displayed when a node is centered in view.

SpicyNodes allows loading HTML tables as node content (see API reference for node content). Normally, those HTML file reside on your server. The SpicyNodes player requires using the SpicyConnector to load them (see above, Embedding with SpicyConnector). If you want to use HTML for nodes content but you do not plan to host nodemaps nor settings on your server, then you can add the snconnector flashvar to your embedding code:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab" height="480" width="720">
    <param name="movie" value="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef">
    <param name="quality" value="high">
    <param name="allowFullScreen" value="true">
    <param name="flashvars" value="snconnector=path/to/snconnector.swf">
    <embed height="480" width="720" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef" type="application/x-shockwave-flash" quality="high" allowFullScreen="true" flashvars="snconnector=path/to/snconnector.swf">
    </object>

You can use JavaScript to control SpicyNodes (see API Reference for javascript), for example, to have HTML form elements or buttons on your page control your nodes. To enable this, upload the SpicyConnector swf file to your server in the same domain or subdomain where the JavaScript code is hosted. The embedded HTML is the same as above, and the URL to SpicyConnector has to be passed as a flashvar. For example:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab" height="480" width="720">
    <param name="movie" value="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef">
    <param name="quality" value="high">
    <param name="allowFullScreen" value="true">
    <param name="flashvars" value="snconnector=path/to/snconnector.swf">
    <embed height="480" width="720" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef" type="application/x-shockwave-flash" quality="high" allowFullScreen="true" flashvars="snconnector=path/to/snconnector.swf">
    </object>

If you plan to call JavaScript methods from your node content (see API reference for node content), then you need to allow access to server scripts. This may be done by adding allowScriptAccess OBJECT tag parameter and allowScriptAccess EMBED tag attribute, in both cases with the value always. The embedding code can look like the following:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab" height="480" width="720">
    <param name="movie" value="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef">
    <param name=”allowScriptAccess” value=”always”/>
    <param name="quality" value="high">
    <param name="allowFullScreen" value="true">
    <embed allowScriptAccess=”always” height="480" width="720" pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://media.spicynodes.org/display.swf?id=0123456789abcdef0123456789abcdef" type="application/x-shockwave-flash" quality="high" allowFullScreen="true">
    </object>