How to display Twitter RSS Feed with Twitter Options - Using SharePoint 2010 XML Viewer Web Part

SharePoint out of the box XML Viewer Web Part is used display XML and apply XSLT to the XML before the content is displayed. We can use the same control to display Twitter RSS Feed in a SharePoint 2010 web site. Here I will show how we display the last five tweets sent by a given Twitter RSS Feed URL using XML viewer WebPart. Here the Tweets will be presented in order from most recent to oldest.
In addition and more importantly the feed will display twitter messages along with the following Twitter options as per the below image.

• Time of message
• Reply
• Retweet
• Favourite

• 

Here are the steps:
Go to the Edit mode of the SharePoint page and add a XML Viewer WebPart.

• 

Go to “Edit Web Part” mode, find “XML Link” field in the properties dialog and insert your RSS Feed URL. Check if the content is receivable by “Test Link” option.

• 

Now if we click “OK” and view the WebPart we can see unformatted feed data as follows.

http://twitter.com/our_children/statuses/78092026352123905 http://twitter.com/our_children/statuses/78092026352123905 web our_children: RT @TorontoStar Allowing kids to play and have fun makes them smarter: http://bit.ly/iG4t6q #parenting Mon, 06 Jun 2011 13:00:03 +0000

http://twitter.com/our_children/statuses/77721414702088193 http://twitter.com/our_children/statuses/77721414702088193 web our_children: RT @OntMinChildren If you’re 12-25, we still have a few spaces left at some of our Youth Dialogues this weekend http://ow.ly/59nBI Fri, 03 Jun 2011 13:58:40 +0000

In order to format these data we can specify a XSL style sheet by clicking on “XSL Editor…” button. Then the next question is how we include Twitter Reply, Retweet and Favorite buttons. For the purpose we can specify a Twitter URL with the Tweet id as follows.

Twitter Reply option:

<a target="_blank" href="http://twitter.com/intent/tweet?in_reply_to={$postId}">
  reply
</a>

Twitter Retweet option:

<a target="_blank" href="http://twitter.com/intent/retweet?tweet_id={$postId}">
  retweet
</a>

Twitter Favorite option:

<a target="_blank" href="http://twitter.com/intent/favorite?tweet_id={$postId}">
  favourite
</a>

So here is the complete XSL that displays formatted feed with options buttons. In this code I have looped all tweets received through the feed and limit number of entries to 5 by looking at position() value. Within the loop each tweet id is read into a variable called “pId” and used with options button URLs. “feedItem” is the CSS class that I used to style the WebPart.

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:param name="TITLE"/>
<xsl:template match="rss"> 
<xsl:for-each select="channel/item">
 <xsl:if test="(position() &gt;= 1 and position() &lt;= 5)">
  <xsl:variable name="pId" select="substring(guid, 42)"></xsl:variable>
  <p><xsl:value-of select="description" disable-output-escaping="yes"/></p>
  <div class="feedItem">
  <a target="_blank" href="{link}">
        <xsl:value-of select="substring-before(pubDate,' +0000')" />
  </a> .
  <a target="_blank" href="http://twitter.com/intent/tweet?in_reply_to={$pId}">
         reply
  </a> .
  <a target="_blank" href="http://twitter.com/intent/retweet?tweet_id={$pId}">
         retweet
  </a> .
  <a target="_blank" href="http://twitter.com/intent/favorite?tweet_id={$pId}">
        favourite
  </a>
  </div>
 </xsl:if>
</xsl:for-each> 
</xsl:template>
<xsl:template match="description"><xsl:value-of select="."/><br/></xsl:template>
</xsl:stylesheet>

Note:
It is difficult to find the RSS feed button in the new version of Twitter. If you are unable to find it, here is a workaround.

1. Login to Twitter
2. "Switch to Old Twitter" mode by using the dropdown next to your username.
3. Scroll down and find RSS button on middle of the right pane.