Darren Ferguson - Blog

21 January 2009 at 08:40

Quick Umbraco tip: Display twitter feeds on your site

Tags: twitter search , XSLT , XML , Technology Internet
Author: Darren Ferguson

First, install the Ferguson Moriyama Feed Cache package for Umbraco. Make sure you read the install instructions which explain how to get the package to run as a scheduled task.

Grab the URL for your twitter feed, mine is http://search.twitter.com/search.atom?lang=en&q=from%3Adarrenferguson. You can turn any twitter search into an atom feed by visiting search.twitter.com and clicking on the ‘Feed for this query’ button after your search.

Next, configure the Feed Cache package to cache your feed. Open <webroot>/umbraco/plugins/FergusonMoriyama/FeedCache/feeds.config and add an entry like the following:

<?xml version="1.0"?>
<feeds>
	<feed>
		<url>http://search.twitter.com/search.atom?q=from%3Adarrenferguson</url>
		<localFile>twit.xml</localFile>
	</feed>
</feeds>

Wait a little while until twit.xml appears in the <webroot>/umbraco/plugins/FergusonMoriyama/FeedCache folder. If it doesn’t there is probably something wrong with your scheduled task setup.

Use the following XSLT macro to display tweets on your site:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [<!ENTITY nbsp "&#x00A0;">]>
<xsl:stylesheet
 version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
 xmlns:umbraco.library="urn:umbraco.library"
 exclude-result-prefixes="msxml umbraco.library Atom"
 xmlns:Atom="http://www.w3.org/2005/Atom">
    
    <xsl:variable name="y" select="document('../umbraco/plugins/FergusonMoriyama/FeedCache/twit.xml')/Atom:feed"/>
    <xsl:output method="xml" omit-xml-declaration="yes"/>
    <xsl:param name="currentPage"/>
    
    <xsl:template match="/">
        <xsl:for-each select="$y/Atom:entry">
            <p>
                <em>
                    <xsl:value-of select="umbraco.library:FormatDateTime(Atom:published, 'MMMM d, yyyy @ H:mm')"/>
                </em>
		<xsl:value-of select="Atom:content" disable-output-escaping="yes"/>
            </p>
        </xsl:for-each>
    </xsl:template>
</xsl:stylesheet>

Obviously you can just change your twitter search to look for hash tags, Umbraco related tweets or whatever you want. There is also a lot more information in the atom feed than I am displaying above and the XLST can be modified to your liking.

Written by: Darren Ferguson

Comments

  1. gregg dourgarian says:

    Gravatar of gregg dourgarianthanks Darren!

  2. Chris Houston says:

    Gravatar of Chris HoustonHi Darren,

    I created a bit of XSLT for Warren's twitter package that looks for @name's, #name's and URL's and converts them into links using Regex.

    I thought it might be useful for someone who reads your example above so here is the XSLT :)

    &lt;xsl:template name="formaturl"&gt;
    &lt;xsl:param name="twitterfeed"/&gt;
    &lt;xsl:variable name="transform-http" select="Exslt.ExsltRegularExpressions:replace($twitterfeed, '(http\:\/\/\S+)',ig,'&lt;a href=&quot;$1&quot;&gt;$1&lt;/a&gt;')"/&gt;
    &lt;xsl:variable name="transform-https" select="Exslt.ExsltRegularExpressions:replace($transform-http, '(HTTps\:\/\/\S+)',ig,'&lt;a href=&quot;$1&quot;&gt;$1&lt;/a&gt;')"/&gt;
    &lt;xsl:variable name="transform-AT" select="Exslt.ExsltRegularExpressions:replace($transform-https, '(^|\s)@(\w+)',ig,' &lt;a href=&quot;http://www.twitter.com/$2&quot;&gt;@$2&lt;/a&gt;')"/&gt;
    &lt;xsl:variable name="transform-HASH" select="Exslt.ExsltRegularExpressions:replace($transform-AT, '(^|\s)#(\w+)',ig,' &lt;a href=&quot;http://www.twitter.com/search?q=$2&quot;&gt;#$2&lt;/a&gt;')"/&gt;
    &lt;xsl:value-of select="$transform-HASH" disable-output-escaping="yes"/&gt;
    &lt;/xsl:template&gt;

    Cheers,

    Chris

Leave a comment