Adding a Twitter feed with SharePoint xml viewer web part

Working on sites these days you have many social feeds that need to be added to your SharePoint site. One way we have accomplished this is using the XML viewer web part.

You can add this into a web part zone on your page through your browser or you can add the web part directly to your master page. I typically don’t add this directly into a client’s master page, but for my blog I did add it directly to my master page.

Browse to your site and add the XML Viewer Web Part to your page. To make this work you need the XML Link – this will be the RSS feed/code used to pull the information from twitter. Next you need the XSL Link, this will format the tweets that you are pulling from twitter.

Getting the XML Link

First thing you need is a link for your Twitter account.  For my site I use an RSS feed and can also control the number of tweets I want to show on my site (count=3). http://twitter.com/statuses/user_timeline/xxxxxxxx.rss?count=3.  Since Twitter removed the RSS feed on their site you can use this link to find your RSS feed link or you can use the following code, which is just as easy. http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx

Now that you have your feed link you can add the XML viewer web part to your page/zone and make the proper connections.

Create your Twitter.xsl File

<xsl:stylesheet xmlns:x=”http://www.w3.org/2001/XMLSchema”
version=”1.0″
xmlns:xsl=”
http://www.w3.org/1999/XSL/Transform”
xmlns:cmswrt=”http://schemas.microsoft.com/WebPart/v3/Publishing/runtime”
xmlns:atom=”http://www.w3.org/2005/Atom” xmlns:georss=”http://www.georss.org/georss” xmlns:twitter=”http://api.twitter.com”
exclude-result-prefixes=”ddwrt xsl cmswrt x”
xmlns:ddwrt=”
http://schemas.microsoft.com/WebParts/v2/DataView/runtime” xmlns:ddwrt2=”urn:frontpage:internal”>
<xsl:output method=”html” indent=”no” />

<xsl:param name=”rss_FeedLimit”>4</xsl:param>
<xsl:output method=”html” />

<xsl:template match=”rss” xmlns:atom=”http://www.w3.org/2005/Atom” xmlns:georss=”http://www.georss.org/georss” xmlns:twitter=”http://api.twitter.com”>
<ul>
<xsl:for-each select=”channel/item”>
<xsl:if test=”position() &lt;= $rss_FeedLimit”>
<xsl:call-template name=”item” />
</xsl:if>
</xsl:for-each>
</ul>
</xsl:template>

<xsl:template name=”item”>
<xsl:variable name=”item_title” select=”description”/>
<li>
<p class=”date”>
<xsl:value-of select=”substring(pubDate, 1, 16)” />
</p>
<p class=”tweet”>
<xsl:attribute name=”title”><xsl:value-of select=”substring-after($item_title, ‘:’)” disable-output-escaping=”yes”/></xsl:attribute>
<xsl:value-of select=”substring-after($item_title, ‘:’)” disable-output-escaping=”yes”/>
</p>
</li>
</xsl:template>
</xsl:stylesheet>

Copy this code into notepad and name it twitter.xsl or yournamehere.xsl. Then upload the file to your Style Library or another library where you keep your custom xsl files. Or use this link to download the xsl file from Dropbox.

UPDATED: You will link to this file in the XSL Link part of the XML Viewer.

Using the feed count in this code you can change this number to increase or decrease the number of twitter items showing in your web part (<xsl:param name=”rss_FeedLimit”>4</xsl:param>).

For styling you can change the class for the <ul>, the date and the tweet are wrapped in a <p> tag and have their own classes as well.

Credit to Michael Mendelson for letting me show off his code.

Thanks for reading!

, , , , , , , ,