Using the new Remote RSS Feed Component

Options

The new Remote RSS Feed Component is a great way to promote or share content from other sites. You should read the the online help to get started, but I thought it might be useful to follow that up with some real-world examples. I'm going to assume that you've read the online help and are comfortable inserting a Remote RSS Feed Component into a web page and concentrate on some of the fun things you can do using this new tool.

For my first example, I'm going to display some news about Ajax Amsterdam , the favorite soccer team of one of my co-workers. To get the list of stories, I'm going to create a custom RSS feed from Google News by searching for "ajax amsterdam" and then copying the custom RSS feed URL. Note: because my search query had spaces, I had to replace the space in the URL with %20, the HTML entity for a space.

Next, I create my display template:

<t:list id="rss.channel.item"><t:if test="index == 0"><div>Top $ "Ajax Amsterdam" Stories</div><ol></t:if><li><span><a href="$"><t:value id="title"></t:value></a></span></t:list></ol>

Note: I used the "guid" property of the RSS Feed as the URL because the "link" property passes the URL through Google News. I also used some advanced templating techniques to write a header that includes the number of items in the list.

That is all it took to make a free, customized news feed to include in my site.

In my next post, I'll show you how you can include images from Flickr.

Tagged:

Comments

  • This time, I'll use this custom RSS feed  from Flickr with some nifty Ajax Amsterdam  related photos. Note that again, I needed to manually replace the "+" in the RSS feed URL with "%20". When I'm done writing up this post, I will put on my engineer hat and see if I can't fix CMS to make that step not necessary:smileyhappy:

    Now it's time to make a template. I've decided to take the first six photos and arrange them in a 3 x 2 grid:

    <table><t:list maxlength="6" id="rss.channel.item"><t:if test="index % 3 == 0"><tr></t:if><td><div><img src="$" alt="$"></div><div><a href="$"><t:value id="title"></t:value></a></div><div>Taken: <t:value type="date" id="pubDate" format="5"></t:value></div></td><t:if test="index % 3 == 2"></tr></t:if></t:list></table>

    I've employed some other advanced templating constructs to control the layout. I used the "maxlength" attribute of the "t:list" tag to limit the number of items in the list to 6. I've used "t:if" tests (with everyone's favorite binary operator modulo  "%") at the top and the bottom of the loop to determine if it was time to start or end the table row.

    Note: If this were a real site and not just an example, I would not use tables, but rather divs and CSS rules to control the layout. There are countless examples of how to do this available on the web.

    It would be possible for an enterprising template developer to use a Geo Feed  from Flickr and Google Maps  to create a mashup of custom photos on a map. Maybe I should start a contest. What other cool RSS feed-based ideas can you come up with that would be worthy of a prize?

    Message was edited by: Bruce Keilin: changed <image> tag to be <img>

  • Bruce Keilin:

    This time, I'll use this custom RSS feed  from Flickr with some nifty Ajax Amsterdam  related photos. Note that again, I needed to manually replace the "+" in the RSS feed URL with "%20". When I'm done writing up this post, I will put on my engineer hat and see if I can't fix CMS to make that step not necessary:smileyhappy:

    Now it's time to make a template. I've decided to take the first six photos and arrange them in a 3 x 2 grid:

    <table><t:list maxlength="6" id="rss.channel.item"><t:if test="index % 3 == 0"><tr></t:if><td><div><img src="$" alt="$"></div><div><a href="$"><t:value id="title"></t:value></a></div><div>Taken: <t:value type="date" id="pubDate" format="5"></t:value></div></td><t:if test="index % 3 == 2"></tr></t:if></t:list></table>

    I've employed some other advanced templating constructs to control the layout. I used the "maxlength" attribute of the "t:list" tag to limit the number of items in the list to 6. I've used "t:if" tests (with everyone's favorite binary operator modulo  "%") at the top and the bottom of the loop to determine if it was time to start or end the table row.

    Note: If this were a real site and not just an example, I would not use tables, but rather divs and CSS rules to control the layout. There are countless examples of how to do this available on the web.

    It would be possible for an enterprising template developer to use a Geo Feed  from Flickr and Google Maps  to create a mashup of custom photos on a map. Maybe I should start a contest. What other cool RSS feed-based ideas can you come up with that would be worthy of a prize?

    Message was edited by: Bruce Keilin: changed <image> tag to be <img>

    That's it for now, example-wise. I'd encourage those of you with the need to display remote content on your site to play around with the Remote RSS Feed component. We welcome your questions and comments and are eager to make this new tool as easy-to-use and powerful as possible.

  • So what other properties are available and how can I reference them? For instance, what if I want to include the description of the article in my list template. How can I check to see if that is available and how do I find the correct syntax?

  • tommy Spann:

    So what other properties are available and how can I reference them? For instance, what if I want to include the description of the article in my list template. How can I check to see if that is available and how do I find the correct syntax?

    The available properties depend on the particular RSS feed you are using. You can reference them using the same syntax. For example, the media credit field in the Flickr AJAX feed would be displayed thusly:

    <t:value id="media:credit">Media Credit Here</t:value>

    Is that what you were asking?

  • Is there a way to suppress the "RSS Feed is Unavailable" message when the feed is unavailable?

  • Beth Allen:

    Is there a way to suppress the "RSS Feed is Unavailable" message when the feed is unavailable?

    That is a good question, Beth. The short answer is yes, but it is ugly.

    You could wrap the RSS Display component in a DIV (with a unique ID) and apply CSS to hide EM tags inside the DIV. Something like this:

    CSS in your stylesheet:

    #rss em

    HTML in your template (or page body):

    <div id="rss">** RSS Component Here **</div>

    Even better, would be for us to remove the message or make it customizable. I'll go ahead an file an Enhancement Request for that.

  • Bruce Keilin:

    That is a good question, Beth. The short answer is yes, but it is ugly.

    You could wrap the RSS Display component in a DIV (with a unique ID) and apply CSS to hide EM tags inside the DIV. Something like this:

    CSS in your stylesheet:

    #rss em

    HTML in your template (or page body):

    <div id="rss">** RSS Component Here **</div>

    Even better, would be for us to remove the message or make it customizable. I'll go ahead an file an Enhancement Request for that.

    Thanks Bruce! Appreciate your filing the enhancement request.

  • Beth Allen:

    Thanks Bruce! Appreciate your filing the enhancement request.

    Is there any way to track feed subscriber statistics within the CMS or is Feedburner our only option?

  • temp_handle1945 :

    Is there any way to track feed subscriber statistics within the CMS or is Feedburner our only option?

    Bobby, this thread is discussing the consumption of RSS feeds by CMS. Are you wanting to track the popularity of the individual consumed items or are you asking how to track RSS feeds generated by CMS and consumed elsewhere?

  • Bruce Keilin:

    Bobby, this thread is discussing the consumption of RSS feeds by CMS. Are you wanting to track the popularity of the individual consumed items or are you asking how to track RSS feeds generated by CMS and consumed elsewhere?

    Sorry about that. I read the thread quickly. I was talking about RSS that is generated through CMS and consumed elsewhere.

  • temp_handle1945 :

    Sorry about that. I read the thread quickly. I was talking about RSS that is generated through CMS and consumed elsewhere.

    No problem, Bobby, just wanted to make sure I was answering the right question.

    I'd say Feedburner is a good option for many/most situations. If you have an analytics package and you want to track results using that package, you could create a custom RSS feed using the XML document content type and a List Template that renders XML instead of HTML. That way you could pass a source code or other URL parameter in the link to each story and you could put something into the single display template for the story that reads the source code/URL parameter and does the right thing to inform your analytics package.

    For those of you who found that paragraph a little too abstract, here is what I'm talking about.

    1. Create a List Template for the Content Type that you want in your feed that renders the list in RSS-compatible XML. Add a special URL parameter to the link to each item (in this case fromRSS=true.) Here is an example template:


    Fri, 21 Nov 2008 09:04:37 -0600



    ]]>

    2. Create a new instance of an XML Document (note, you may need to contact support to get the built-in XML document content type enabled for your site)

    3. Insert a list of the appropriate items into the XML document. Configure the List component to render the list using the template you wrote in step 1.

    4. Update the single display template that renders the feed item to check for the "fromRSS" URL parameter and "inform" the analytics package if the parameter exist. The actual implementation details depend on your package and what you want to track. For example,

  • Bruce Keilin:

    No problem, Bobby, just wanted to make sure I was answering the right question.

    I'd say Feedburner is a good option for many/most situations. If you have an analytics package and you want to track results using that package, you could create a custom RSS feed using the XML document content type and a List Template that renders XML instead of HTML. That way you could pass a source code or other URL parameter in the link to each story and you could put something into the single display template for the story that reads the source code/URL parameter and does the right thing to inform your analytics package.

    For those of you who found that paragraph a little too abstract, here is what I'm talking about.

    1. Create a List Template for the Content Type that you want in your feed that renders the list in RSS-compatible XML. Add a special URL parameter to the link to each item (in this case fromRSS=true.) Here is an example template:


    Fri, 21 Nov 2008 09:04:37 -0600



    ]]>

    2. Create a new instance of an XML Document (note, you may need to contact support to get the built-in XML document content type enabled for your site)

    3. Insert a list of the appropriate items into the XML document. Configure the List component to render the list using the template you wrote in step 1.

    4. Update the single display template that renders the feed item to check for the "fromRSS" URL parameter and "inform" the analytics package if the parameter exist. The actual implementation details depend on your package and what you want to track. For example,

    That's a helpful suggestion. Thank you.

  • Here's another example of how you can use the RSS Display Component and a third-party API to achieve something useful. In this case, we're going to display a Twitter feed on our site.

    The Twitter API allows us to make HTTP calls to get XML-formatted information about recent tweets. For example, http://twitter.com/statuses/user_timeline/convio.xml?count=5 returns the five most recent tweets made by http://twitter.com/convio. If we create a page with an RSS Feed Component, point it at that URL and use this template to render the XML:

    <t:list id="rss.status">

    <p>$ - source: $ from ${user.name} a/k/a ${user.screen_name} in ${user.location}

    </t:list>then we get an automatically updated twitter feed showing up on our page that looks like this (click the image to see a larger version):

    image

  • Bruce Keilin:

    Here's another example of how you can use the RSS Display Component and a third-party API to achieve something useful. In this case, we're going to display a Twitter feed on our site.

    The Twitter API allows us to make HTTP calls to get XML-formatted information about recent tweets. For example, http://twitter.com/statuses/user_timeline/convio.xml?count=5 returns the five most recent tweets made by http://twitter.com/convio. If we create a page with an RSS Feed Component, point it at that URL and use this template to render the XML:

    <t:list id="rss.status">

    <p>$ - source: $ from ${user.name} a/k/a ${user.screen_name} in ${user.location}

    </t:list>then we get an automatically updated twitter feed showing up on our page that looks like this (click the image to see a larger version):

    image

    You can also use in conjuction with Yahoo! Pipes to process a feed or serveral feeds into a new feed. Then you display the new feed.

    For example, there is a pipe that merges a search on Yahoo! News and Google News into a single feed: http://pipes.yahoo.com/pipes/pipe.info?_id=1nWYbWm82xGjQylL00qv4w

  • Bruce Keilin:

    This time, I'll use this custom RSS feed  from Flickr with some nifty Ajax Amsterdam  related photos. Note that again, I needed to manually replace the "+" in the RSS feed URL with "%20". When I'm done writing up this post, I will put on my engineer hat and see if I can't fix CMS to make that step not necessary:smileyhappy:

    Now it's time to make a template. I've decided to take the first six photos and arrange them in a 3 x 2 grid:

    <table><t:list maxlength="6" id="rss.channel.item"><t:if test="index % 3 == 0"><tr></t:if><td><div><img src="$" alt="$"></div><div><a href="$"><t:value id="title"></t:value></a></div><div>Taken: <t:value type="date" id="pubDate" format="5"></t:value></div></td><t:if test="index % 3 == 2"></tr></t:if></t:list></table>

    I've employed some other advanced templating constructs to control the layout. I used the "maxlength" attribute of the "t:list" tag to limit the number of items in the list to 6. I've used "t:if" tests (with everyone's favorite binary operator modulo  "%") at the top and the bottom of the loop to determine if it was time to start or end the table row.

    Note: If this were a real site and not just an example, I would not use tables, but rather divs and CSS rules to control the layout. There are countless examples of how to do this available on the web.

    It would be possible for an enterprising template developer to use a Geo Feed  from Flickr and Google Maps  to create a mashup of custom photos on a map. Maybe I should start a contest. What other cool RSS feed-based ideas can you come up with that would be worthy of a prize?

    Message was edited by: Bruce Keilin: changed <image> tag to be <img>

    My apologies if this was answered elsewhere in the thread, I couldn't quite follow everything. We're trying to feed in our blog's RSS feed, and the developer I'm working with had two questions:

    1. The descriptions that are part of the RSS that comes from the blog are rather long. You can see them here http://feeds.feedburner.com/blogforchoice?format=xml (use Firefox to open this link and have a look at the Source Code if you really want to see what's going on) We need to figure out if the Convio RSS Feed parser can truncate the RSS nodes. Here is how the display template looks, we need to truncate the description node/variable:



    <ul class="listUpdates">


    <t:list maxlength="2" id="rss.channel.item">

    <li>

    <h4>${pubDate}</h4>

    <h3>${title}</h3>

    <p>${description} <span class="linkMore"><a target="_blank" href="${guid}">Read More</a></span>

    </p>

    </li>

    </t:list>

    </ul>




    2. The date has the time stamp. We'd prefer that it display like, "August 17, 2010" instead. Can that be changed?

  • Kirsten Suhr:

    My apologies if this was answered elsewhere in the thread, I couldn't quite follow everything. We're trying to feed in our blog's RSS feed, and the developer I'm working with had two questions:

    1. The descriptions that are part of the RSS that comes from the blog are rather long. You can see them here http://feeds.feedburner.com/blogforchoice?format=xml (use Firefox to open this link and have a look at the Source Code if you really want to see what's going on) We need to figure out if the Convio RSS Feed parser can truncate the RSS nodes. Here is how the display template looks, we need to truncate the description node/variable:



    <ul class="listUpdates">


    <t:list maxlength="2" id="rss.channel.item">

    <li>

    <h4>${pubDate}</h4>

    <h3>${title}</h3>

    <p>${description} <span class="linkMore"><a target="_blank" href="${guid}">Read More</a></span>

    </p>

    </li>

    </t:list>

    </ul>




    2. The date has the time stamp. We'd prefer that it display like, "August 17, 2010" instead. Can that be changed?

    Re 1: Try the words(String, int) function to shorten it to the number of words specified. You'll need to first store the shortened value in a local variable like this (which shortens to the first 15 words):

    <t:set id="shortdescription" value="truncate(>

  • Hilary Shore:

    Re 1: Try the words(String, int) function to shorten it to the number of words specified. You'll need to first store the shortened value in a local variable like this (which shortens to the first 15 words):

    <t:set id="shortdescription" value="truncate(>

    Thanks Hilary, that worked. For anyone wondering what this looks like, you can see our lovely Blog RSS feed on here: http://prochoiceamerica.org/, just click the Blog tab in the middle of the page.

    There's one more place we're trying to use the RSS feel, and that's for the Flicker images at the bottom of http://prochoiceamerica.org Here's the question the developer I'm working with has:

    I started working on parsing the XML feed from a particular Flickr Set, but I run into one problem:

    The Flickr feed that I am using looks like this http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=cc4e3bfebbe842b8a09cb03d6479aa28&photoset_id=72157624622280007 This is a feed of the photos contained in the last NARAL Flickr set. And the problem is that I know how to use the RSS Feed Display feature to parse node values (which look more or less like this <rss><node>value</node></rss>), but I don't know if the feature allows me to parse node attribute values (which look like this <rsp><photoset><photo id="value" /></photoset></rsp>)... and all the values that I need from the above mentioned feed are are inside the node attributes (check out the feed).

    Can someone in Convioland help us out? Is there documentation on this that we're missing?

  • temp_handle1945 :

    That's a helpful suggestion. Thank you.

    Additionally, if you use campaigns in Google Analytics, you can append the URL with a Google Analytics Campaign parameters, such as:

    http://www.mysite.com/page.html?utm_source=rss&utm_medium=referral&utm_campaign=rss

    - Marissa

Categories