How to Easily display Your Stumbleupon Favorites using XSLT

Feb 24, 2011

0 25350

Stumbleupon tutorial. Today I will tell you about another similar tutorial, but about Stumbleupon. We will create application which will show our (or any wished profile) Stumbleupon posts. And we will use XSLT transformation to parse XML (RSS) provided by Stumbleupon. I will using my profile for our sample. After some investigation I find that SU provide our list of favs in rss format here: http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc – where ‘aramisgc’ is my account name. Also, we can obtain our comments too: http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc&comments=1. So, we have all to start. Today I`ll show you how to display this information in any view.

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the source files and lets start coding !

Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Stumbleupon posts. As you can see – I already put several samples ($sMethod values) for different urls. So you can try any. Quite all code commented, so I hope it will easy to understand it.

<?php
//$sMethod = 'http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc&comments=1';
$sMethod = 'http://www.stumbleupon.com/syndicate.php?stumbler=aramisgc';
$sXmlSrc = getStumbleuponStoriesXml($sMethod);
// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);
// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/stumbleupon.xslt');
$proc = new XSLTProcessor; // configure the transformer
$proc->importStyleSheet($xsl); // attach the xsl rules
echo $proc->transformToXML($xml);
// this function get stumbleupon information using caching (not more than 1 times per hour)
function getStumbleuponStoriesXml($sUrl) {
    // our folder with cache files
    $sCacheFolder = 'cache/';
    // cache filename
    $sFilename = date('YmdH').'.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}
.su-unit{background-color:#F3F3F3;border:1px solid #CCC;position:relative;margin:10px;padding:10px}
.su-unit h3, .su-unit div{border-bottom:1px dashed #888;padding:5px;overflow:hidden}
.su-unit div p{float:left;margin-right:20px}
.su-unit div p:first-child{font-weight:bold}
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/stumbleupon.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"/>
        <html>
            <head>
                <link media="all" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main">
                <h1>
                    <a>
                        <xsl:attribute name="href">
                            <xsl:value-of select="$authorLink"/>
                        </xsl:attribute>
                        <xsl:value-of select="$channelDescription"/>
                    </a>
                </h1>
                <xsl:for-each select="item">
                    <div class="su-unit">
                        <h3>
                            <a target="_blank">
                                <xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
                                <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
                                <xsl:value-of select="title"/>
                            </a>
                        </h3>
                        <div><p>Description:</p><p><xsl:value-of select="description" disable-output-escaping="yes" /></p></div>
                        <div>
                            <a target="_blank">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="comments"/>
                                </xsl:attribute>
                                link to comments
                            </a>
                        </div>
                        <div><p>When:</p><p><xsl:value-of select="substring(pubDate, 0, 26)"/></p></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 Stumbleupon requests. I don`t load provided RSS often that once per hour. No need overload Stumbleupon 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

Thats all.