Twitter offers customers the status in XML format, SharePoint is the perfect consumer for this type of data and in contrast to existing solutions, we will not have advertise on our Widget. With the strength of XSLT transformations coupled with XML we will have a unique look.
First, we must analyze the structure of the XML document returned by the Twitter API. To view information about your Twittername, use the following format:
http://twitter.com/users/show/YourTwitternameHere.xml
For an example, we'll look at the information returned by the Twitter service using my Twittername:
<?xml version="1.0" encoding="UTF-8"?>
<user>
<id>75575509</id>
<name>Jérôme HUGON</name>
<screen_name>hugonjerome</screen_name>
<location>Scionzier, FRANCE</location>
<description>SharePoint / .NET</description>
<profile_image_url>http://s.twimg.com/a/1253301564/images/default_profile_2_normal.png</profile_image_url>
<url></url>
<protected>false</protected>
<followers_count>0</followers_count>
<profile_background_color>ffffff</profile_background_color>
<profile_text_color>333333</profile_text_color>
<profile_link_color>009999</profile_link_color>
<profile_sidebar_fill_color>efefef</profile_sidebar_fill_color>
<profile_sidebar_border_color>eeeeee</profile_sidebar_border_color>
<friends_count>0</friends_count>
<created_at>Sat Sep 19 15:41:53 +0000 2009</created_at>
<favourites_count>0</favourites_count>
<utc_offset>-10800</utc_offset>
<time_zone>Greenland</time_zone>
<profile_background_image_url>http://s.twimg.com/a/1253301564/images/themes/theme1/bg.png</profile_background_image_url>
<profile_background_tile>true</profile_background_tile>
<statuses_count>1</statuses_count>
<notifications></notifications>
<verified>false</verified>
<following></following>
<status>
<created_at>Sat Sep 19 16:23:42 +0000 2009</created_at>
<id>4104982664</id>
<text>Hello world</text>
<source>web</source>
<truncated>false</truncated>
<in_reply_to_status_id></in_reply_to_status_id>
<in_reply_to_user_id></in_reply_to_user_id>
<favorited>false</favorited>
<in_reply_to_screen_name></in_reply_to_screen_name>
</status>
</user>You can see that the returned XML document provides almost all the relevant information that can be found on Twitter. This is where SharePoint comes into play, we'll use the XML Web Part and apply a transformation to these data.
Edit the page to which you add the Twitter Status Web Part, and open the Web Part Library, Select the XML Web Part and click on Add button.
Once the XML Web Part is on the page, edit the properties to specify the source XML.
In the properties of XML Web Part, you'll enter the URL to the Twitter account in the text box XML Link. In my case, I entered http://twitter.com/users/show/hugonjerome.xml but you can replace hugonjerome with your Twittername.
Click OK to validate and see the Twitter account data. Your webpart should now look like this:
We will transform the XML data to make them more attractive. We'll use XSLT transformations to apply a visual style to the data. I created an XSLT document that you can use to convert these 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">
<style type="text/css">
.twitter-main
{
background-image:url(<xsl:value-of select="profile_background_image_url"/>);
width:100%;
text-align:center;
color:#<xsl:value-of select="profile_text_color"/>;
}
.twitter-main a, .twitter-main a:hover
{
color:#<xsl:value-of select="profile_link_color"/>;
}
.twitter-main img
{
border:0px;
}
.twitter-main .logo
{
padding:5px;
}
.twitter-main .user
{
font-size:x-large;
font-weight:bold;
background-color:#<xsl:value-of select="profile_background_color"/>;
width:80%;
text-decoration:none;
margin-top:5px;
}
.twitter-main .status
{
width:80%;
background-color:#<xsl:value-of select="profile_background_color"/>;
padding:5px;
margin-top:5px;
}
.twitter-main .profil
{
width:80%;
background-color:#<xsl:value-of select="profile_background_color"/>;
color:#<xsl:value-of select="profile_text_color"/>;
margin-top:5px;
margin-bottom:5px;
}
.twitter-main .profil .row
{
width:90%;
text-align:left;
}
.twitter-main .profil .row .title
{
width:45%;
font-weight:bold;
text-align:left;
}
.twitter-main .profil .row .value
{
width:45%;
font-weight:normal;
text-align:right;
}
</style>
<div class="twitter-main">
<div class="logo">
<img src="http://assets1.twitter.com/images/twitter_logo_s.png" width="85" height="20"/>
</div>
<div class="user">
<a href="http://twitter.com/{screen_name}">
<img src="{profile_image_url}"/>
<xsl:value-of select="screen_name"/>
</a>
</div>
<div class="status">
<xsl:value-of select="status/text"/>
</div>
<div class="profil">
<div class="row">
<span class="title">Location</span>
<span class="value"><xsl:value-of select="location"/></span>
</div>
<div class="row">
<span class="title">Description</span>
<span class="value"><xsl:value-of select="description"/></span>
</div>
<div class="row">
<span class="title">Website</span>
<span class="value"><a><xsl:attribute name="href"><xsl:value-of select="url"/></xsl:attribute>Link</a></span>
</div>
<div class="row">
<span class="title">Following</span>
<span class="value"><xsl:value-of select="friends_count"/></span>
</div>
<div class="row">
<span class="title">Followers</span>
<span class="value"><xsl:value-of select="followers_count"/></span>
</div>
<div class="row">
<span class="title">Updates</span>
<span class="value"><xsl:value-of select="statuses_count"/></span>
</div>
</div>
</div>
</xsl:template>
</xsl:stylesheet>We'll add a link to the XSLT file in the text box XSL Link in the XML Web Part properties:
You can remove the title bar XML Web Part by defining the Chrome type to None under Appearance in the XML Web Part properties. After applying your changes, your Twitter box should look like this:
The most interesting is that when the status is updated on Twitter, the Twitter box will update automatically.