To start off, I read Ben's post about integrating SharePoint and Twitter. You can find the post here. You'll also see his blog on my blog roll on this site. Essentially the Twitter information is just XML that can be read by any client, and considering how good SharePoint is at consuming XML, I thought it would make the perfect client. It was that and the fact that I did not want to have any other "Widgets" advertising on my site, when I could use it as a perfect case to use XML Transformations.
First we should look at the structure of the XML returned by the Twitter API. To see the information pertaining to your Twittername, use the format:
http://twitter.com/users/show/YourUserNameHere.xml
For an example, we'll look at the information returned by the Twitter service using my twittername and the url:
http://twitter.com/users/show/mrisaac.xml
When you retrieve this document you will see a plethora of information about the user that you specified. This API returns the users profile along with their latest status. There are other APIs to retrieve other information about the user, such as a larger amount of tweets, but that is outside the scope of this article. Note: The twitter documentation is available here: http://apiwiki.twitter.com/REST+API+Documentation.
<?xml version="1.0" encoding="UTF-8"?>
<user>
<id>17722980</id>
<name>Isaac S</name>
<screen_name>MrIsaac</screen_name>
<location>Copenhagen, Denmark</location>
<description>SharePoint,. AJAX, .Net Oh My</description> <profile_image_url>http://s3.amazonaws.com/twitter_production/profile_images/65769931/uc_normal.jpg</profile_image_url>
<url>http://www.sharepointevolved.com</url>
<protected>false</protected>
<followers_count>27</followers_count>
<profile_background_color>C6E2EE</profile_background_color>
<profile_text_color>663B12</profile_text_color>
<profile_link_color>1F98C7</profile_link_color>
<profile_sidebar_fill_color>DAECF4</profile_sidebar_fill_color>
<profile_sidebar_border_color>C6E2EE</profile_sidebar_border_color>
<friends_count>53</friends_count>
<created_at>Fri Nov 28 23:33:19 +0000 2008</created_at>
<favourites_count>0</favourites_count>
<utc_offset>3600</utc_offset>
<time_zone>Copenhagen</time_zone> <profile_background_image_url>http://static.twitter.com/images/themes/theme2/bg.gif</profile_background_image_url>
<profile_background_tile>false</profile_background_tile>
<statuses_count>146</statuses_count>
<status>
<created_at>Sat Jan 03 18:11:01 +0000 2009</created_at>
<id>1093730404</id>
<text>@MossLover maybe there should be a sharepoint saturday org with a global tshirt and quarterly meetings</text>
<source>web</source>
<truncated>false</truncated>
<in_reply_to_status_id>1092416604</in_reply_to_status_id>
<in_reply_to_user_id>9836732</in_reply_to_user_id>
<favorited>false</favorited>
<in_reply_to_screen_name>MossLover</in_reply_to_screen_name>
</status>
</user>
You can see that the XML Document returned provides pretty much all the relevant information that I could find on Twitter. While this is particularly useful, it is not visually appeasing. This is where SharePoint comes in, and we are going to use the XML Web Part to apply a transformation to this data. A benefit to using SharePoint is that the server gets the XML Data, and continually applies the transformation for you so it is constantly up to date.
Step One: Add the XML Web Part to the Page.
Go ahead and edit the page that you're going to add the Twitter Status Web Part to, and open up the Web Part Library.
Once the web part is one the page, edit the properties of the web part to specify the XML source.
When you get to the properties of the XML Web Part, you're going to want to enter in the Url for the Twitter Feed into the "XML Link" Textbox. In my case it is http://twitter.com/users/show/mrisaac.xml but you would substitute your username where "mrisaac" is located.
Now go ahead and click Ok to see that you can see the data from the Twitter feed. Your webpart should now look something like this:
Success! You're done with Step One, On to Step Two: Transforming the XML Data Received.
For Step Two, We are going to transform the XML Data returned from Twitter into a visually appealing web part. We're going to achieve this by using an XML Transformation to apply a visual styling to the data that is received. What I have done is created an XSLT document that you can use to transform this data to a more visually appealing look. I have made this available in my Shared Documents document library, and you can download the document here (Right Save As). http://www.sharepointevolved.com/Shared%20Documents/twitter.xslt . I'll also put a link off of the front page directly to the XSL Transformation.
The XSLT file looks like this, it basically defines a visual style for the XML Data, not unlike what SharePoint does to the list data.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/user">
Once you have this file, you put it somewhere on your server where the web part can access it, and copy the link. Since I have it in my Shared Documents, I'm going to provide the link directly to the document using this link : http://www.sharepointevolved.com/Shared%20Documents/twitter.xslt. So go back to the properties of the XML Web Part and paste in the location of the Twitter.XSLT File into the "XSL Link" Text Box.
Now to finish it off, you can optionally remove the title bar that says XML Web Part by setting an appearance option. Set the Chrome Type to None:
Now apply your changes and you should have a visually appealing Twitter Web Part that shows off your status and key profile information. The best part is that it uses the settings that you have in your profile on twitter to customize the look and feel of the widget. Change your look on twitter, and the web part updates as well!
