How to Easily display Your Tweets using XSLT transformation

Feb 23, 2011

0 35290

Twitter tutorial. Today I will tell you how to create application which will display your Tweets (or someone else) at your website. And we will use XSLT transformation to parse XML (RSS) provided by Twitter. As example I take my Twitter account. At this page you can see that I have RSS channel: http://twitter.com/statuses/user_timeline/83882961.rss. Today I`ll show you how to display this information in any view.

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Twitter posts. All code commented, so I hope it will easy to understand it.

<?php
$sMethod = 'http://twitter.com/statuses/user_timeline/83882961.rss';
$sXmlSrc = getTwitterStoriesXml($sMethod);
// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);
// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/twitter.xslt');
$proc = new XSLTProcessor; // configure the transformer
$proc->importStyleSheet($xsl); // attach the xsl rules
echo '<link media="all" href="css/styles.css" type="text/css" rel="stylesheet">';
echo $proc->transformToXML($xml);
// this function get twitter information using caching (not more 1 times per minute)
function getTwitterStoriesXml($sUrl) {
    // our folder with cache files
    $sCacheFolder = 'cache/';
    // cache filename
    $sFilename = date('YmdHi').'.xml';
    if (! file_exists($sCacheFolder.$sFilename)) {
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, 'w');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array('User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15') ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}
?>

Step 2. CSS

Here are used CSS file. Just few styles for our demo:

css/styles.css

h1{text-align:center}
.tw-unit{background-color:#F3F3F3;border:1px solid #CCC;position:relative;margin:10px;padding:10px}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:900px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

Step 3. XSLT

And, most interesting part of my story – used XSLT rules:

xslt/twitter.xslt

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="channel">
        <xsl:variable name="channelDescription" select="description"/>
        <xsl:variable name="authorLink" select="link"/>
        <xsl:variable name="authorName" select="substring(title, 10)"/> <!-- we will cut off Twitter / -->
        <xsl:variable name="authorNameLength" select="string-length($authorName)+2"/> <!-- we will calculate length of our name + 2 symbols more (for colon and space symbols) -->
        <html>
            <body>
                <div class="main">
                <h1><xsl:value-of select="$channelDescription"/></h1>
                <xsl:for-each select="item">
                    <div class="tw-unit">
                        <h3>
                            <a target="_blank">
                                <xsl:attribute name="title"><xsl:value-of select="substring(title, $authorNameLength)"/></xsl:attribute>
                                <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
                                <xsl:value-of select="substring(title, $authorNameLength)"/>
                            </a>
                        </h3>
                        <div>Submitted by:
                            <a>
                            <xsl:attribute name="href">
                                <xsl:value-of select="$authorLink"/>
                            </xsl:attribute>
                            <xsl:value-of select="$authorName"/>
                            </a>
                        </div>
                        <div>Description: <xsl:value-of select="substring(description, $authorNameLength)"/></div>
                        <div>Source: <xsl:value-of select="*[name()='twitter:source']"/></div>
                        <div>When: <xsl:value-of select="substring(pubDate, 0, 26)"/></div> <!-- we will take first 26 symbols -->
                    </div>
                </xsl:for-each>
                </div>
                <xsl:comment>Copyright © AndrewP</xsl:comment>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Step 4. Few important notes

During checking my PHP file you will notice that I perform caching of Twitter requests. I don`t load provided RSS often that once per minute. No need overload Twitter server with often requests :)

I made ‘cache’ folder with permission to write (you should create ‘cache’ folder too).

Also I created .htaccess file in it with next content:

Options -Indexes

That’s all. After this, you will able to load not only my RSS feeds (of 83882961.rss), but also and your own too.

[sociallocker]