Skip to main content
SharePoint Evolved, Small Steps for a Big Solution

Blog

Go Search
Home
Blog
Wiki
Contact
Themes
TV
  

SharePoint Evolved > Blog > Posts > Showing Off Your Twitter Status in SharePoint
Showing Off Your Twitter Status in SharePoint

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!

Comments

Twitter

Very nice, I like it.

tk
at 1/4/2009 1:01

Re: Showing Off Your Twitter Status in SharePoint

Interesting, although when I try this, it gives an XSL error:
The XSL specified by the XSL property or XSL Link property is not valid, or the XSL file cannot be accessed. Make sure you have specified a valid XSL style sheet for this Web Part, or if the XSL file is linked that it can be accessed by the server. For assistance, contact your site administrator.
at 1/14/2009 23:01

Re: Re: Showing Off Your Twitter Status in SharePoint

It sounds like sharepoint is having an issue locating the twitter.xslt file. Do you have the correct link to the file? Are you using a relative path or a specific path.

-Isaac
Isaac Stith at 1/15/2009 20:22

Twitter status in SharePoint

I simply pasted to contents of the twitter.xslt using the XSL Editor instead of using an external/separate xslt file. That also worked.
Thanks for this great feature, I love it.
at 1/17/2009 10:42

Thanks!

Thanks for the feedback, I'm glad you like it! You're right too, you can just copy it in the XSL Source View. I have it in my Document Library for the versioning :-)
Isaac Stith at 1/17/2009 13:09