Displaying Your Media

By now, you are probably tired of seeing the default Flickr images on your wall. This section describes how to get your own photos or videos into the embeddable wall. In order to show your own media, you must tell the wall where to find it.

FlashVars

Your website communicates with the wall using FlashVars. Flashvars are a series of key=value pairs that allow you to customize the behavior of the 3D Wall. For instance, the location of the media for the wall to display is specified in the feed FlashVar, highlighted below.

If you embedded your wall using the HTML method, you will need to specify your FlashVars in two locations:

<object id="o" 
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="600" 
        height="450">
    <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>

If you embedded your wall using JavaScript and SWFObject, FlashVars are contained in a flashvars object:

<script>
var flashvars = {
    feed: "api://www.flickr.com/"
};
var params = {
    allowscriptaccess: "always"
};

swfobject.embedSWF("http://apps.cooliris.com/embed/cooliris.swf",
                   "wall", "730", "390", "9.0.0", "", 
                   flashvars, params);

</script>

Feeds

The wall supports display of feeds from MediaRSS and from the Flickr and Picasa APIs.

API Feeds are what we've been displaying so far, specifically the front-page Flickr feed.

MediaRSS Feeds are more flexible, and are the best way to display your own content in the wall (as well as in the Cooliris plugin).

Either type of feed is specified in the feed FlashVar. In the examples so far, we have been using the Flickr front page feed:

feed=api://www.flickr.com/ (For HTML-embedded, in both places)
feed: "api://www.flickr.com/" (For JavaScript-embedded)

Replace api://www.flickr.com/ with your media URL, and it will display your own content. Refer to the above links to see the details on how to set up both sorts of feeds.

Encoding Feed URLs

Note that if your feed contains an ampersand (&), it needs to be encoded. Otherwise, Adobe Flash will break up the feed address into multiple parts, and the embeddable wall will not find your photos.

For example, your site might generate Media RSS feeds on the fly, based on a user's search term. In this case, your feed would take in query parameters:

http://www.mysite.com/mrss.php?page=3&term=ocean

Since this feed URL contains an ampersand, it needs to be encoded as:

http%3A%2F%2Fwww.mysite.com%2Fmrss.php%3Fpage%3D3%26term%3Docean

When encoding URLs, special characters are replaced with their encoded equivalents (e.g., the slash / becomes %2F).

You can use the box below to encode a feed URL.

Type in text above, and the encoded text will display here

Next > Customizing your Wall (Details)