Customizing Your Wall

The embeddable wall can be customized in a variety of different ways. First and foremost, you can change the size of the wall by modifying the width and height components in the embed code.

For HTML embedding, the height and width are defined in the object and embed tags. Make sure you've changed this in both locations to account for all browser configurations.

<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>

For JavaScript embedding, the height and width are the 3rd and 4th arguments to embedSWF:

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

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

</script>

Any aspect ratio/size will work, and we recommend walls in size greater than 200 x 100.

FlashVar Customization

There are a number of other aspects of the wall that can be customized using FlashVars, similarly to how the feed is set. A full list of FlashVar customization options can be found here. As an example, here is how to display the Flickr feed, customized to have more rows and a white background:

If you used the HTML method, you must pass your FlashVars as a query parameter string (This is why ampersands in URLs need to be encoded). Place this string into the FlashVars param. Note that you will have to do this twice:

<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/&numRows=5&style=light" />
    <embed type="application/x-shockwave-flash"
           src="http://apps.cooliris.com/embed/cooliris.swf"
           flashvars="feed=api://www.flickr.com/&numRows=5&style=light"
           width="600" 
           height="450" 
           allowFullScreen="true"
           allowScriptAccess="always">
    </embed>
</object>

If you used the JavaScript method, you can pass your FlashVars as an object that contains name/value pairs. If you have many FlashVars, this method keeps your code nice and clean, since there is no repetition:

<script>
var flashvars = {
    feed: "api://www.flickr.com/",
    numRows: 5,
    style: 'light'
};
var params = {
    allowscriptaccess: "always"
};

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

</script>

Either way should give you this result:

Next > Developer Reference