Arena Loves Twitter Too

Wednesday, February 03, 2010 8:26 PM by nairdo

Have I mentioned how much I love Arena?  Here's why - because it can do almost anything you need it to.  Let me illustrate with a small example.  I recently heard someone say 'oh, Arena can't do that yet' on the topic of integrating twitter with our website.  Not true.  There's no need to wait for a future of release of Arena.  You can easily add your favorite tweets to an Arena powered website using the XML File Transformation module.

@RefreshCache tweets as seen on www.refreshcache.com (powered by Arena ChMS)

Here's how to do it in three simple steps.

1) Publish an XSLT file that transforms a Twitter RSS feed to suit your website's layout, look and feel.  I've included mine below which you can reuse or modify as you see fit.

2) Add the XML File Transformation module to a page.

3) Configure the module's settings appropriately.  For example, I'm using "http://twitter.com/statuses/user_timeline/47123579.rss" for the XML File Path and "~/xslt/Custom/Cccev/twitter.xslt" for the XSLT File Path setting.  (That XML File Path is the RSS feed for our @RefreshCache tweets.)

Ok, I'm definitely no XSLT expert -- in fact I'm an absolute bumbling n00b in this area.  Regardless, I was able to cobble something together that works.  Notice in lines 9-60 I'm falling back to my language of choice (C#) for date processing mostly because the JavaScript date parser does not like the RSS pubDate string format.  Yes, lines 63-75 are me embedding a style block directly inline.  (I know, shame on me.)  Line 78 is where I restrict the number of tweets displayed to only 5.  Lastly, lines 77-86 are the main HTML layout for the tweets. Again, you can download mine and modify it as you please.

   1: <?xml version="1.0" encoding="ISO-8859-1"?>
   2:  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   3:         xmlns:msxsl="urn:schemas-microsoft-com:xslt"
   4:         xmlns:cs="urn:cs"
   5:         xmlns:js="urn:custom-javascript"
   6:         exclude-result-prefixes="msxsl js" 
   7:  >
   8:  
   9: <msxsl:script language="c#" implements-prefix="cs">
  10:  <![CDATA[       
  11:     public static string UXDate( string pubDate )
  12:     {
  13:         DateTime d = DateTime.Parse( pubDate );
  14:         DateTime now = DateTime.Now;
  15:         TimeSpan timeSince = now - d;
  16:         
  17:         double inSeconds = timeSince.TotalSeconds;
  18:         double inMinutes = timeSince.TotalMinutes;
  19:         double inHours = timeSince.TotalHours;
  20:         double inDays = timeSince.TotalDays;
  21:         double inMonths = inDays / 30;
  22:         double inYears = inDays / 365;
  23:  
  24:         if(Math.Round(inSeconds) == 1){
  25:             return "1 second ago";
  26:         }
  27:         else if(inMinutes < 1.0){
  28:             return Math.Floor(inSeconds) + " seconds ago";
  29:         }
  30:         else if(Math.Floor(inMinutes) == 1){
  31:             return "1 minute ago";
  32:         }
  33:         else if(inHours < 1.0){
  34:             return Math.Floor(inMinutes) + " minutes ago";
  35:         }
  36:         else if(Math.Floor(inHours) == 1){
  37:             return "about an hour ago";
  38:         }
  39:         else if(inDays < 1.0){
  40:             return Math.Floor(inHours) + " hours ago";
  41:         }
  42:         else if(Math.Floor(inDays) == 1){
  43:             return "1 day ago";
  44:         }
  45:         else if(inMonths < 3 ){
  46:             return Math.Floor(inDays) + " days ago";
  47:         }
  48:         else if(inMonths <= 12 ){
  49:             return Math.Floor(inMonths) + " months ago ";
  50:         }
  51:         else if(Math.Floor(inYears) <= 1){
  52:             return "1 year ago";
  53:         }
  54:         else
  55:         {
  56:             return Math.Floor(inYears) + " years ago";
  57:         }
  58:     }
  59:  ]]>
  60: </msxsl:script>
  61:  
  62:   <xsl:template match="rss/channel">
  63:       <style>
  64:        #tweets a {
  65:         text-decoration: none;
  66:         color: #444;
  67:        }
  68:        
  69:        #tweets span {
  70:         font-family: Verdana, Helvetica, sans-serif;
  71:         font-size: 9px;
  72:         color: #888;
  73:         font-style: italic;
  74:        }
  75:       </style>
  76:  
  77:         <div id="tweets" style="padding-left:5px;font-family: Verdana, Helvetica, sans-serif; font-size: 10px; width: 500px;">
  78:         <xsl:for-each select="item[position() &lt;= 5]">
  79:             <p>
  80:               <a href="{link}">
  81:                   <xsl:value-of select="substring-after(title,': ')" />
  82:               </a>
  83:               <br/><span><xsl:value-of select="cs:UXDate(pubDate)" /></span>
  84:             </p>
  85:         </xsl:for-each>
  86:         </div>
  87:     </xsl:template>
  88: </xsl:stylesheet>

An "expert" may cringe at what I've done in there, but I really don't care.  I mostly care about the end result.

In case you're wondering, the XSLT transforms this sort of thing:

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:georss="http://www.georss.org/georss">
  <channel>
    <title>Twitter / refreshcache</title>
    <link>http://twitter.com/refreshcache</link>
    <atom:link type="application/rss+xml" href="http://twitter.com/statuses/user_timeline/47123579.rss" rel="self"/>
    <description>Twitter updates from Refresh Cache / refreshcache.</description>
    <language>en-us</language>
    <ttl>40</ttl>
  <item>
    <title>refreshcache: #ArenaChMS comm devs - planning is underway for RefreshCache 2010!  Submit your topics and discussion ideas now http://digs.by/1KpL</title>
    <description>refreshcache: #ArenaChMS comm devs - planning is underway for RefreshCache 2010!  Submit your topics and discussion ideas now http://digs.by/1KpL</description>
    <pubDate>Wed, 03 Feb 2010 19:57:37 +0000</pubDate>
    <guid>http://twitter.com/refreshcache/statuses/8600862288</guid>
    <link>http://twitter.com/refreshcache/statuses/8600862288</link>
  </item>
.
.
.

...into this.  Here's a close up of the final product.

@RefreshCache tweets as seen on www.refreshcache.com (powered by Arena ChMS)

 

Filed under: , , ,

Comments

    No Comments

New Comments to this post are disabled

(c) 2006-2009 Nick Airdo
Powered by Community Server, by Telligent Systems