Feedonomics

We are still putting the finishing touches on the features I promised you for this week, but after using Twitter with Grazr for a while, I felt we had to clean up the way the widget displays a Twitter feed. So we added a new argument called itemtext that only displays the title of an item in a Twitter feed. It also fixes Del.icio.us feeds, which have always looked pretty funky in the widget. It is easier to demonstrate this new feature than describe it.

Here is a link for a widget that displays my Twitter feed without any new arguments:

http://www.grazr.com/gzpanel.html?file=http://twitter.com/statuses/user_timeline/grazr.rss

And here is the same widget with the itemtext=off argument added:

http://www.grazr.com/gzpanel.html?itemtext=off&file=http://twitter.com/statuses/user_timeline/grazr.rss

As you can see if you try both examples, this argument is useful for sites like Twitter that repeat the same information in both the title and contents of the feed items. When itemtext is set equal to off, only the title of the feed items appears, and it is made a link to the matching Web page. The itemtext=off argument is global, so it applies to all feeds in the widget. If you display an OPML file with this argument, all the feeds in the OPML will behave this way. You might want to have more control over this feature, so we also added a new grazr:itemtext attribute that can be applied to individual feed nodes. Here is an OPML file that has two Del.icio.us feeds. The first displays the normal feed behavior with a Del.icio.us feed, and the second has the same feed with the grazr:itemtext=”off” attribute added to it’s definition.

 All of these examples use itemtext set to off, but you can also set it to on. This is the default setting, so it probably won’t be used much. There is one situation where you might need it. If you want most of the feeds in an OPML to use the off setting, and only one or two to have it set to on, you could add the grazr:itemtext=”on” attribute to those few feeds, and then apply the itemtext=”off” argument to the entire widget.

The Grazr Widget has had a linktarget argument for about a year. This lets you select a named iframe or browser window that displays the results of clicking a link. It controls the behavior of link nodes, or a hyperlink in a text node or feed item. The linktarget argument is global, meaning it applies to all links in an OPML file or feed. Today we added a new Grazr attribute to OPML for use within the widget. The new grazr:linktarget attribute makes it possible to specify the destination for links on an individual node basis. Here is an OPML file that uses this attribute for the three types of nodes that can contain a hyperlink:

If you try the various hyperlinks in this widget, you will see that nodes with the grazr:linktarget attribute go to one window, and nodes without it go to another:

http://grazr.com/gzpanel.html?view=o&file=http://grazr.com/data/adam/linktarget.xml

You can assign different destinations for the grazr:linktarget attribute on different nodes within a single OPML file. This gives you a huge amount of control over the results of clicking links. You can also use the name of iframes as a link target. If a widget is embedded on a page along with multiple iframes, the results of links on one subject could go to one iframe, and the links for a different subject could go to another.

The grazr:linktarget attribute can also be used in combination with the linktarget argument. Nodes that don’t have the attribute will use the target assigned by the global argument. Nodes that have the attribute will ignore the argument and use the attribute’s target. Here is the same file with a linktarget argument of _self. This tells the widget to display the result of a link in the current window. Try both types of links, and you will see how the nodes with the attribute replace the current contents, and nodes with the attribute open in new window.

http://grazr.com/gzpanel.html?view=o&linktarget=_self&file=http://grazr.com/data/adam/linktarget.xml

Soon after adding the anc argument to the widget last week we realized that there is a case where it would be useful to modify its behavior. There are lots of pages on the Web where the widget is used as a navigation tool or table of contents for a collection of pages within a site. This is done by creating an OPML file with link nodes for each page. A visitor can then navigate within the site by clicking on links within the widget. The anc argument was planned as a feature for just this type of interface. Using it you can have the widget automatically select the matching link node for the current page.

In some page designs this can create a circular set of links. The link node is clicked, which loads the page, which opens the widget and clicks the link, which loads the page… Our solution to this issue is to add an additional argument of anclink. If the value of this argument is set to off, the node named in the anc argument will be selected, but the URL that is the target of the node won’t be loaded. This argument is only used in conjuction with the anc argument:
anc=[node_name]&anclink=off.

I realize that the purpose of this new argument is obscure, but we’ll have a new section of the site online next week that takes advantage of this technique. I’ll revisit this issue at that point, and point to these new pages as a concrete example. It really does let you create a cool interface. The widget becomes a great sitemap tool.

Our new weekly release program is running at a 100% success rate. Actually, we got 3 features out instead of the promised 2, so it must be 150%. I’ll describe each improvement in detail in later posts, but the summary is:

Facebook App. You can now install any Grazr widget within your Facebook profile. This can be done from the Facebook application directory, or directly from any Read page on the Grazr.com site.

Enhancement to the Anchor argument. The Anc argument we added last week allows you to automatically select any node as the starting point when the widget loads. Now you can select the node, but not load the associated page or feed. I’ll provide an example in the post that goes into the details.

Grazr:linktarget attribute for individual nodes. This will let you direct the target of link nodes, or feed items into different target browser windows or iframes.  

Our goals for next week are a text editor integrated into the site for editing hosted OPML files, and a new section of the website that will list Grazr and OPML related tools.

All of the examples of expansion and anchors we’ve seen have been with either outline or 3 pane view. These arguments also work with slider view, but the behavior of the expansion argument is different. First let’s try using the anchor argument with slider view. This embedded widget has an argument of anc=viewed.week:

You can see how the anchor is a great way of bringing the user directly to a position deep within an outline. Again, this can also be done with relative positions, like 5.1, and mixed positions, like viewed.1.

The behavior of the expansion argument with slider view is useful, but it takes a little experimentation to understand it. When you use an expansion with slider view, the referenced node is loaded into memory, but the display doesn’t change. What does this mean? Here is an embedded widget with an argument of exp=viewed.week:

Try opening the folder for Most Viewed Videos and click on the feed for Today. You will see that progress indicator in top left corner of the widget runs for a second or two and then the feed loads. Now try clicking the feed for This Week, which was named in the expansion argument. The difference is that this feed will open immediately, because it was already loaded into memory. This behavior is subtle, but it can be a good way of speeding up the user’s experience for an important feed. Of course, there is no such thing as a free lunch. It still takes time to load this feed, but now the loading is done before the widget appears instead of when the feed node is clicked. This can still be useful, because users don’t notice delays as much when a page is first loading. So the overall effect is a snappier interface when they interact with the widget.

The expansion and anchor arguments are clearly very flexible, but they have an important limitation. You can only specify a named node or a relative position in the current OPML file. This means that you can’t refer to a node in a separate OPML file that is referenced in an include node. You also can’t point to an item within a feed. For example, in Youtube.xml node 5.1 is a feed. You can’t try to select the first item in that feed with an anchor position of 5.1.1. If you point to a node that can’t be reached because it is an external file, the argument is ignored. The same thing happens if you try to use a named path that doesn’t exist. An argument of viewed.week will work, because there is such a node, but if you use viewed.year nothing will happen.

But that’s not all. Besides using named nodes with the anchor and expansion arguments, you can also use relative positions. This is done by giving the number of the node starting from the top, so the 3rd node at the top level would have a position of 3. If a node is a folder then you can use a complete path with each node’s position separated by periods. For example, node number 5 in the Youtube.xml example is a folder that contains feeds. A position of 5.1 would refer to the first feed within that folder. Here is a link that points to this node using an anchor:

http://grazr.com/gzpanel.html?view=o&anc=5.1&file=http://grazr.com/data/adam/youtube.xml

You can also mix relative and named positions using both arguments. Here is a link that selects node 5.1, and expands node 5.week:

http://grazr.com/gzpanel.html?view=o&anc=5.1&exp=5.week&file=http://grazr.com/data/adam/youtube.xml

Since the expansion argument can take multiple positions, you can use any of these position types in the expansion list:

http://grazr.com/gzpanel.html?view=o&exp=5.week,6.1&file=http://grazr.com/data/adam/youtube.xml

The expansion argument can also be used with more than one label. This is done by entering multiple labels separated by commas. For example, we can expand both the node labeled viewed and the node labeled discussed with a value of viewed,discussed. The order of these labels doesn’t matter. Here is an example of this type of expansion:

http://grazr.com/gzpanel.html?view=o&exp=viewed,discussed&file=http://grazr.com/data/adam/youtube.xml

Before we can go into the details of the expansion and anchor arguments, we need to look at the new name attribute that allows you to add a name to an OPML node. With the addition of this attibute you can specify any node as the starting point with the anchor argument, or automatically open a node with the expansion argument. The OPML spec gives us permission to add new attributes to OPML using our own Grazr namespace, and that is how we have built the Grazrscript language into OPML. Now we have added a new attribute called name. The Youtube.xml file used in these examples has many of its nodes labeled with this attribute:

There are two steps required to use the name attribute. First you have to add the Grazr namespace declaration at the start of the file in the OPML tag. This tells any tool using this file to expect new attributes that are prefixed with “grazr:”.

<opml version=”2.0″ xmlns:grazr=”http://docs.grazr.com/script/spec/1.0″>

Then you can add the name attribute to any node using grazr:name=”[label]”. For example, here is an RSS node from this file that has been labeled as “week”:

<outline type=”rss” text=”This Week” grazr:name=”week” xmlUrl=http://youtube.com/rss/global/top_viewed_week.rss />

Let’s try two simple links that demonstrate this attribute in action. First we’ll use the anchor argument to tell the widget to select the node named “week” when it opens:

http://grazr.com/gzpanel.html?view=o&anc=week&file=http://grazr.com/data/adam/youtube.xml

Then we can use the same node with the expansion argument:

http://grazr.com/gzpanel.html?view=o&exp=week&file=http://grazr.com/data/adam/youtube.xml

If you click both links, you’ll see the fundamental difference between the two arguments. Anc opens the outline to reveal the named node, and selects the node. if the node is a feed, then it’s contents are also loaded. Exp, on the other hand, expands that node and loads its data, but doesn’t select it. To make this clear, here is an embedded widget with arguments of anc=viewed and exp=discussed. Note that both nodes are expanded, but the node specified in the anchor argument is selected:

One final point for this post. If you look closely at the source of this OPML file, you will see that there are multiple nodes with the same name attribute. This is not a problem. When you specify a named node for the expansion or anchor arguments, the widget starts at the top of the file and stops at the first node that matches that name. We’ll see how to reach other nodes with the same name in the next post.

The only tricky part about using the Hdiv and Vdiv arguments with the widget is figuring out which argument to use. The Hdiv argument is used to control the divider that splits the 3 Pane view into two horizontal pieces. The divider that splits the view vertically is controlled with the Vdiv argument. This screenshot should help clarify the two options.

The Hdiv divider defaults to 40% from the left edge of the widget. Here is a link that opens the widget with the Hdiv divider set to only 20%:

http://grazr.com/gzpanel.html?view=3p&hdiv=20&file=http://grazr.com/data/adam/youtube.xml

The Vdiv divider defaults to 50% from the top edge of the widget. This example link opens the widget with the Vdiv divider set to 20%:

http://grazr.com/gzpanel.html?view=3p&vdiv=20&file=http://grazr.com/data/adam/youtube.xml

You can use both arguments at the same time, and the order doesn’t matter. The only rule that must be followed for ordering of widget arguments is that the file argument must be the last one. Here’s another link with both dividers set to 20%:

http://grazr.com/gzpanel.html?view=3p&hdiv=20&vdiv=20&file=http://grazr.com/data/adam/youtube.xml

You can also use these arguments with an embedded widget, but you’ll have to add these arguments to the embed code by hand. We’ll be updating the Create a Widget page to automate the creation of these arguments in the near future. This embedded widget has both dividers set to 20%.