ARENA: The Power of Community.

Welcome to Sign in | Join | Help
in Search

In the Arena

Tweets on Your Website

For my first post to this blog, I'm borrowing and slightly modifying the latest entry from my personal blog on CodersForChrist.com.  I think this is something that even a non-developer can do so I'm sharing it with the larger Arena Community.

I recently heard someone say 'oh, Arena can't do that yet' on the topic of integrating twitter with their Arena powered 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.)

Here is what is going on in my XSLT file.  In lines 9-60 is a small C# function for converting the RSS pubDate value  into a more modern, friendly relative date.  Lines 63-75 are an embedded a style block.  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. 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;">
  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>


Here's a close-up of what the final product looks like.

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

Published Wednesday, February 03, 2010 9:57 PM by nairdo

Comments

 

Steve Pruitt said:

Great Post Nick.  Thanks for sharing.

February 4, 2010 9:49 AM
 

CRivers said:

Nick,

I love that you made this available to us. Thanks for your continued efforts and challenging people like me to think differently about the way we can do things... especially in Arena! :)  

February 4, 2010 1:50 PM
Anonymous comments are disabled

About nairdo

I work part-time with Jason Offutt at Central Christian Church (CCCev) where I develop ministry related software, web integrated applications, and do all the other odd developer jobs. Besides participating in the Arena Community Developer Board (CDB), I also co-lead the RefreshCache community developers group with Jason, Daniel, Jon, and David.

My dream, passion and goal is to collaborate with other christian developers to create shared source software for The Church.

This Blog

Syndication

Powered By Community Server
© Shelby Systems, Inc. All rights reserved.  Terms Of Use |  Privacy Statement
www.arenachms.com