Getting Started with the Cooliris Embed Wall

The Cooliris Embed Wall is an embeddable 3D wall that gives users the Cooliris media experience within a web page, without requiring the Cooliris plugin. The embeddable wall requires users to have Adobe Flash (version 9 or later) installed.

The following is a quick guide that will show you how to set up a simple embeddable wall on your site. This guide requires basic knowledge of HTML. More advanced topics are covered in the 'more detail' links for each section.

Embed the Wall (more detail)

Show this wall

This is the Cooliris embeddable wall, showing a stream of images from Flickr. You can add it to your own site by copying the embed code below and pasting it into the body of any HTML page, wherever you want the wall to appear.

<object id="o" 
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  width="600" 
  height="370">
    <param name="movie"
      value="http://apps.cooliris.com/embed/cooliris.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashvars" value="feed=api://www.flickr.com/" />
    <embed type="application/x-shockwave-flash"
      src="http://apps.cooliris.com/embed/cooliris.swf"
      flashvars="feed=api://www.flickr.com/"
      width="600" 
      height="450" 
      allowFullScreen="true"
      allowScriptAccess="always">
    </embed>
</object>

After adding the code, you should see a wall of photos from the Flickr interestingness feed, just like the one at the start of this section.

Display Your Media (more detail)

The media that the embeddable wall displays is specified in the feed section of the flashvar parameter on the object and embed tags. The wall can display both API feeds from Flickr and Picasa and MediaRSS feeds.

The embed wall above is set up to display the default Flickr feed. Let's change it to show pictures from a search for neon:

<object id="o" 
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  width="600" 
  height="370">
    <param name="movie"
      value="http://apps.cooliris.com/embed/cooliris.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashvars" value="feed=api://www.flickr.com/?search=neon" />
    <embed type="application/x-shockwave-flash"
      src="http://apps.cooliris.com/embed/cooliris.swf"
      flashvars="feed=api://www.flickr.com/?search=neon"
      width="600" 
      height="370" 
      allowFullScreen="true"
      allowScriptAccess="always">
      </embed>
</object>

(Note that the feed must be changed in both places)

Show this wall

The wall can also be set up to show a MediaRSS feed, which can include all sorts of media from across the web:

<object id="o" 
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  width="600" 
  height="370">
    <param name="movie"
      value="http://apps.cooliris.com/embed/cooliris.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashvars" 
      value="feed=http://cooliris.com/static/images/feeds/home/media.rss" />
    <embed type="application/x-shockwave-flash"
      src="http://apps.cooliris.com/embed/cooliris.swf"
      flashvars="feed=http://cooliris.com/static/images/feeds/home/media.rss"
      width="600" 
      height="370" 
      allowFullScreen="true"
      allowScriptAccess="always">
      </embed>
</object>

Note that MediaRSS feeds, like this one, use standard URLs, while API feeds use the special api:// protocol.

Show this wall

Customize Your Wall (more detail)

The wall supports a number of other customization options, set in the same way as the feed, above. Two of these are numRows, which controls the number of rows of images to display, and style, which controls the appearance of the wall UI (Valid style options are 'white', 'black', 'light', and 'dark'). Let's customize our wall to have two rows of images, and a light background:

<object id="o" 
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  width="600" 
  height="370">
    <param name="movie"
      value="http://apps.cooliris.com/embed/cooliris.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashvars" 
      value="feed=api://www.flickr.com/?search=neon&numRows=2&style=light" />
    <embed type="application/x-shockwave-flash"
      src="http://apps.cooliris.com/embed/cooliris.swf"
      flashvars="feed=api://www.flickr.com/?search=neon&numRows=2&style=light"
      width="600" 
      height="370" 
      allowFullScreen="true"
      allowScriptAccess="always">
    </embed>
</object>

(Again, note that the options must be set in both places)

Show this wall

There are many more customization options available, using both flashvars and the JavaScript API.

Next > Embedding the Wall (Details)