Website Owner Tutorial - Menu Feed

How to Build a feed for your entire web site

Most RSS feeds are designed to represent a podcast, a TV series, or a search result. This is an acceptable solution when the user is browsing your web site at a desktop PC or laptop and can click on individual shows. However, Zinc was designed for use with a remote control.

This is where the Zinc "menu feeds" come into play. A menu feed is simply an RSS feed that links to other feeds. In the past, ZeeVee (and others like Boxee) has created many of these menu feeds. For instance, when you are browsing CNN in Zinc, the first feed that is loaded is the CNN menu feed. This menu feed points to other feeds that are served directly from cnn.com. The menu feed adds additional metadata for display and control purposes.

We want you, the content owner, to create these menu feeds. Not only does it save us work but it helps you control exactly how your content is presented. Creating a menu feed is very easy. We will start with a couple of very basic examples and move into some more complicated scenarios.

The Skeleton

First, we'll fill in some boilerplate: standard RSS tags and our XML preamble:

<?xml version="1.0"?>
<rss xmlns:media="http://search.yahoo.com/mrss/" xmlns:zv="http://zeevee.com/zinc/2009" version="2.0">
  <channel>
    <title>Sample Feed Title</title>
    <link>http://link.to/feedwebsite</link>
    <description>Description of feed</description>
    <media:thumbnail width="512" height="256" url="http://feedwebsite.com/feedthumbnail.png"/>
    <item>
      <title>Hats for Cats</title>
      <description>A cool series on hats for cats</description>
      <media:thumbnail url="http://feedwebsite.com/hatsforcats.png"/>
      <link>rss://feedwebsite.com/hatsforcats/main.xml</link>
      <pubDate>Wed, 02 Oct 2002 13:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>

The most significant difference here is that the link uses the rss:// protocol instead of the HTTP protocol.

<link>rss://feedwebsite.com/hatsforcats/main.xml</link>

Using links prefixed with rss:// hints to Zinc that the URL contains a feed. rss:// URLs can be loaded directly in Zinc from the browser bar. If you do not specify a link using the rss:// format the targeted feed will still load, however Zinc will treat the feed as a content feed rather than a menu feed.

Providing a good feed thumbnail

There are several mechanisms in wide use today to specify a thumbnail for a feed. We recommend using the media:thumbnail tag. Example:

<media:thumbnail width="512" height="256" url="http://feedwebsite.com/feedthumbnail.png"/>

If you have an existing feed, Zinc also supports a channel image tag. Example from Revision3:

<image>
  <title>Diggnation (Large Flash)</title>
  <width>100</width>
  <height>100</height>
  <link>http://revision3.com/diggnation</link>
<url>http://bitcast-a.bitgravity.com/revision3/images/shows/diggnation/diggnation.jpg</url>
</image>

Many sites that conform to the Apple podcast spec use the the itunes:image tag. Zinc supports this as well. Example:

<channel>
  <itunes:image href="http://www.cnet.com//i/pod/images/applebyte_600x600.jpg" />
  ...
</channel>

Controlling the presentation of the feed

Ideally, the feeds that you support are completely self describing. However, in many cases a feed is generated by a third party or another tool. For these scenarios, the zv:controls element may be used to provide information on how Zinc should render the feed. The zv:controls element should be specified on the item tag. Here is an example for CNN:

<item>
    <title>Latest News</title>
    <media:thumbnail url="http://www.zeevee.com/zviewer/zvart/logos/cnn.png"/>
    <link> rss://www.cnn.com/.element/ssi/www/auto/2.0/video/xml/top_stories.xml</link>
    <zv:controls viewhint="Shows" showtitle="true" itemstyle="folder" remotesupport="true"/>
</item>

The zv:controls element specifies that rss://www.cnn.com/.element/ssi/www/auto/2.0/video/xml/top_stories.xml has the following properties:
* showtitle=true: always show the title of the items in the feed.
* itemstyle=folder: indicate the the item should be use the folder style (indicate it has children).
* remotesupport=true: CNN content can be control via a remote control. You should test your site with a media center remote, a Zv remote, or an apple remote first to make sure site works properly.
* viewhint="Shows": Controls what Metadata Zinc uses when rendering your feed. The default viewhint is "Episodic", appropriate for shows that have season and episode information. "Shows" is used if you have many different videos but they order is not sequential. Other options include "News","UGC", and "Movies". See the specification for more info.

Using XSL to manipulate your feeds

Zinc supports manipulating an existing feed using XSL. XSL is very useful if you need add missing data to a feed or normalize a feed by extracting information from the description element and putting the information into XML. Zinc applies the XSL stylesheet prior to parsing the XML. Example of how to specify a XSL stylesheet:

<item>
    <title>Latest News</title>
    <media:thumbnail url="http://example.com/logo.jpg"/>
    <link zv:xsl="http://example2.com/stripfirstimage.xsl"
      rss://example.com/feed</link>
    <zv:controls showtitle="true" itemstyle="folder" remotesupport="true"/>
</item>

The example stylesheet will create a media:thumbnail tag from the first image found in the description field. If you are interested in learning more about XSL in Mozilla, the Mozilla developer site has some good information.

<?xml version="1.0" ?>
<xsl:stylesheet version="2.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:zv="http://zeevee.com/zinc/2009"
  xmlns:media="http://search.yahoo.com/mrss/"
  xmlns:regexp="http://exslt.org/regular-expressions">



<!-- Parameters -->
<xsl:param name="width">0</xsl:param>
<xsl:param name="height">0</xsl:param>



<!-- Copy and use description to create media:thumbnail attribute -->
<xsl:template match="/rss/channel/item/description">
  <xsl:if test="regexp:test(string(.), '.jpg', 'i')">
    <xsl:for-each select="regexp:match(string(.), '(http://[^"<>]*.jpg)', 'i')">
      <xsl:if test="position() = 1">
        <media:thumbnail>
          <xsl:attribute name="width"><xsl:value-of select="$width"/></xsl:attribute>
          <xsl:attribute name="height"><xsl:value-of select="$width"/></xsl:attribute>
          <xsl:attribute name="url">
            <xsl:value-of select="."/>
          </xsl:attribute>
        </media:thumbnail>
      </xsl:if>
    </xsl:for-each>
  </xsl:if>
  <xsl:copy-of select="."/>
</xsl:template>



<!-- Add namespaces to root tag -->
<xsl:template match="rss">
  <rss xmlns:media="http://search.yahoo.com/mrss/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0"><xsl:copy-of select="@*"/><xsl:apply-templates/></rss>
</xsl:template>



<!-- Blind copy everything else -->
<xsl:template match="">
  <xsl:copy><xsl:copy-of select="@"/><xsl:apply-templates/><
/xsl:copy>
</xsl:template>



</xsl:stylesheet>

Using the sectioned layout

If your feed contains sectioning information, the sectioned layout is used. A good example of the sectioned layout is the Netflix page. Sectioning is useful when your feed contains multiple items that you may want to visually separate. A good example is the "top videos" feed for a popular video site. The site has two main areas of popularity: the comedic clips and the short dramas. In order to separate the comedy from the drama, each RSS item is assigned to the appropriate section. Example:

<channel>
  <zv:sectionorder position="1" url="rss://sample.com/comedy">Comedy</zv:sectionorder>
  <zv:sectionorder position="2" url="rss://sample.com/drama">Drama</zv:sectionorder>
      <item>
         ...
         <zv:section>Comedy</zv:section>
         ...
      </item>
      <item>
         ...
         <zv:section>Drama</zv:section>
         ...
      </item>
</channel>

Zinc will automatically create sections for episodic content and news. Using the <zv:viewhint> to recognize each type Zinc will create sections per season for the episodes and separate clips out into their own section as shown below:

News will also be separated into sections for Today, This Week and Older as shown below.

If a URL is defined in the <zv:sectionorder> tag Zinc will create a clickable section header as shown below. These section headers will highlight as shown indicating that they are clickable like the tiles within the system.

Developers

Log in

New to Zinc?

Register