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.

SharePoint 2010 Custom Themes

SharePoint theme is a collection of graphics and cascading style sheets that can modify how a Web site looks. SharePoint Themes are stored in Theme Gallery at “_catalogs/theme/Forms/AllItems.aspx”. To change the theme of a site g to “Site Actions -> Site Settings -> Look and Feel -> Site theme”. Also we can develop custom SharePoint themes for all administrative and non-publishing elements of the site that matches as close as possible to the site look. Here we can use Microsoft PowerPoint to create a custom theme.

1. Open PowerPoint and go to Design Tab. Expand “Colors” dropdown and select “Create New Theme Colors…” option.

• 

2. Change the colors so they match as close as possible to the site look. Then give a meaningful name and save. It should be noted that this is the Display Name of the theme once you added it to the SharePoint.

• 

3. Then expand “Fonts” dropdown and change it to what you would like. Also you can go to “Create New Theme Fonts…” option to define theme fonts.

• 

4. Click on “More” button to expand the Themes section and select “Save Current Theme…”

• 

• 

Now you have your own theme (.thmx) file. You can upload it to SharePoint Theme Gallery manually and use. Also you can include it in your Visual Studio 2010 solution.

Include Custom Theme in a Visual Studio 2010 Project
1. Add a SharePoint Module to the project and include theme file in the module as follows.

• 

Here is how the Element.xml file looks like.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="Site Theme" Url="_catalogs/theme" Path="Site Theme">
<File Type="GhostableInLibrary" Url="MyCustomTheme.thmx" />
</Module>
</Elements>

2. Then add a Feature to deploy the Module. It will upload the custom theme to the Theme Gallery. Then add an Event Receiver to the same feature to apply custom theme to the current Web and sub sites if required.

• 

Here is how the Modules.EventReceiver.cs file looks like.

public class ModulesEventReceiver : SPFeatureReceiver
{
public override void FeatureActivated(SPFeatureReceiverProperties properties)
{
  SPWeb currentWeb = properties.Feature.Parent as SPWeb;

  // Get themes collection.
  ReadOnlyCollection<ThmxTheme> themes =
              ThmxTheme.GetManagedThemes(currentWeb.Site);
        
  // Loop all themes.
  foreach (ThmxTheme theme in themes)
  {              
    if (theme.Name.Equals("MyCustomTheme"))
    {
      // Apply custom theme to the current web.
      ThmxTheme.SetThemeUrlForWeb(currentWeb, theme.ServerRelativeUrl, true);

      // Apply custom theme to the immediately beneath Webs.
      if (currentWeb.Webs != null && currentWeb.Webs.Count > 0)
      {
         foreach (SPWeb subWeb in currentWeb.Webs)
         {
           ThmxTheme.SetThemeUrlForWeb(subWeb, theme.ServerRelativeUrl, true);
         }
      }
      break;
    }
  }
}
}

Thanks @ Kamil Anurdeen