Integrating twitter with SharePoint

Hi All,

Interesting integration with SharePoint has come. And yes, you have heard it right. It is the integration of twitter with SharePoint. We have done this for MOSS 2007. If this can be done with 2007 version of SharePoint, it certainly can be done in SPS 2010.

Before starting this topic, first we need to understand the structure of twitter XML file that we will be using in this post. We all know the so popular and ever increasing twitter site. So many people updates some or the other thing on twitter. In twitter they are called statuses.

If you already have an account in twitter or do not have, this XML file has no concern with this, because we can anyways see tweets of anybody even though you do not have account. This XML file read the latest tweet, followers, following and updates. Also shows your user name, photo, location, description and website. Well, actually you need to observe the XML file properly and from there you can get an idea about what all parameters you can retrieve.

For example, if I talk about my profile, malayvasavada, then I need to look for this XML file.

http://twitter.com/users/show/malayvasavada.xml

http://twitter.com/users/show/{twitter user name}.xml

Open this XML in Internet explorer. (In Google chrome, it cannot display properly) And you can see similar to this.

So I get following XML file.

<?xml version="1.0" encoding="UTF-8" ?>
<user>
<id>100438644</id>
<name>Malay Vasavada</name>
<screen_name>malayvasavada</screen_name>
<location>Pune</location>
<description />
<profile_image_url>http://a1.twimg.com/profile_images/600111137/Copy_of_Malay1_normal.JPG</profile_image_url>
<url />
<protected>false</protected>
<followers_count>2</followers_count>
<profile_background_color>EBEBEB</profile_background_color>
<profile_text_color>333333</profile_text_color>
<profile_link_color>990000</profile_link_color>
<profile_sidebar_fill_color>F3F3F3</profile_sidebar_fill_color>
<profile_sidebar_border_color>DFDFDF</profile_sidebar_border_color>
<friends_count>10</friends_count>
<created_at>Wed Dec 30 07:43:33 +0000 2009</created_at>
<favourites_count>0</favourites_count>
<utc_offset>19800</utc_offset>
<time_zone>New Delhi</time_zone>
<profile_background_image_url>http://s.twimg.com/a/1284676327/images/themes/theme7/bg.gif</profile_background_image_url>
<profile_background_tile>false</profile_background_tile>
<profile_use_background_image>true</profile_use_background_image>
<notifications />
<geo_enabled>false</geo_enabled>
<verified>false</verified>
<following />
<statuses_count>24</statuses_count>
<lang>en</lang>
<contributors_enabled>false</contributors_enabled>
<follow_request_sent />
<listed_count>1</listed_count>
<show_all_inline_media>false</show_all_inline_media>
<status>
<created_at>Sat Sep 18 04:01:32 +0000 2010</created_at>
<id>24819814760</id>
<text>Silverlight 5? Hummm....something very good is coming to web. Keep watching.</text>
<source>web</source>
<truncated>false</truncated>
<in_reply_to_status_id />
<in_reply_to_user_id />
<favorited>false</favorited>
<in_reply_to_screen_name />
<retweet_count />
<retweeted>false</retweeted>
<geo />
<coordinates />
<place />
<contributors />
</status>
</user>

As you can see, from the XML, you can get so much information. Name, location, photo URL, even the background color of my twitter profile site, latest tweet, date and time of tweet. So now the point is how to use this XML file and how to present it in SharePoint.

Okay, let us go ahead and use XML web part that SharePoint provides. Create one web part page in any site under any document library. Click on add web part and then add XML web part. Now in the XML Web part, modify shared we part properties. In the XML link, provide the twitter XML file path. Click on Apply and Ok.

Now see what you have got.



You can see profile, latest tweet and followers and so on so forth. However, it is not formatted. It looks ugly. So we need to format this output. When we have XML file with us, the formatting options comes with XSLT files.

You can use Visual Studio to create XSLT file because Visual Studio gives you a fantastic UI to create and suggestions for the attribute and tags.

I have already created one XSLT file here. See below code. You can format according to your need. Just make sure that XML tag remains the same. You can change the layout in term of tables, td and tr, width and height.

<?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">
.dsc{ font-weight:bold; vertical-align:top; text-align:left; } .prof { background-color:#
<xsl:value-of select="profile_background_color" />
; color:#
<xsl:value-of select="profile_text_color" />
; } .prof a { color:#
<xsl:value-of select="profile_link_color" />
; text-decoration:none; overflow:auto; }
</style>


<table width="100%" style="background-image:url({profile_background_image_url}); text-align:center;">

<tr>
<td colspan="3" align="center">

<img src="http://assets1.twitter.com/images/twitter_logo_s.png" />

</td>

</tr>

<tr>

<td colspan="3" align="center">
<a href="http://twitter.com/{screen_name}" target="_blank">
<xsl:value-of select="screen_name" />
</a>
<img src="{profile_image_url}" />
</td>

</tr>

<tr>

<td align="center" colspan="3">
City: <xsl:value-of select="location" />
</td>

</tr>


<tr>

<td align="center" colspan="3">
Language: <xsl:value-of select="lang" />
</td>

</tr>


<tr>

<td align="center" colspan="3">
Status: <xsl:value-of select="status/text" />
</td>

</tr>


<tr>

<td align="center" colspan="3">
Last Status Created Date: <xsl:value-of select="status/created_at" />
</td>

</tr>

<tr>

<td>
Friends count: <xsl:value-of select="friends_count" />
</td>
<td>
Followers_count: <xsl:value-of select="followers_count" />
</td>
<td>
Statuses_count: <xsl:value-of select="statuses_count" />
</td>

</tr>



</table>


</xsl:template>
</xsl:stylesheet>

Open XSL editor in the web part property. Copy and paste the above XML file. Just make sure that the first line has to be at first column, first row area. Exactly at the top of the window and left corner, otherwise you will get an error. "The XSL specified by the XSL property or XSL Link property is not valid, or the XSL file cannot be accessed. Make…..". You might stretch your head whole day finding what went wrong.

And this is the overall result combining XML and XSLT. You have just integrated twitter with SharePoint. Cool, isn’t it?