Playing with SnapCasa screenshots and

Tonights nerdfest will include trying to use the SnapCasa and to generate a lovely page full of thumbnails, one for each url.


1. My 100 latest bookmarked urls from
2. A SnapCasa login account.
3. A server that supports xslt transformation. (I’m running MAMP on my macbook, and pappmaskin is hosted on
4. A text editor. I’m using Dreamweaver for this, since it has some pretty good tools for building xslt. (Take a look at the Adobe Livedocs for more info on using it).

(More after the break)

See a live demo of the finished result so far:


Source Code:

You can download the files as a zip if you prefer:

UPDATE: This script, with a few enhancements, is also available as a wordpress plugin now.

The PHP: delicious_snapcasa.php
This little script grabs variables from the url and builds up the url for fetching your links from
it then uses the links to fetch a lovely thumbnail (screenshot) for each site using the free, and pretty fast Snapcasa service

Made by Morten Skogly,

Example 1: Fetch the 10 latest links tagged with electronics

Example 2: Fetch the 20 latest links tagget with both art and electronics feed examples

– Fetch the username dynamically from the url
– Pass the unique code from Snapcasa into the xslt dynamically. You now have to edit delicious_snapcasa.xsl in a texteditor
Pass thumbnail size dynamically? (needs to change the css to make this look good)
– Create wordpress plugin?



$tag = trim($_GET[«tag»]); //grabs the tag parameter from the url, and trims spaces if there are any
$tag = urlencode($tag); //urlencodes the tag, just in case
$maxresults = $_GET[«count»]; //grabs the count parameter from the url
$count = 15; //sets a default count, nice to have a fallback number, just in case

$baseurl = «»; //this should be changed to set the username dynamically
$feedurl = $baseurl; //sets the feedurl = baseurl, which is eventually used to ask for links, we will add to this feedurl later

if($tag != «»)
$feedurl .= «/» . $tag; //adds tag to the feedurl, but only if there is a tag.

if($maxresults != «»){
$count = $maxresults; //overwrites the count number if count was defined in the url
$feedurl .= «?count=» . $count; //adds count to the feedurl.

else {
$count = 15;
$feedurl .= «?count=» . $count; //adds the default count number to the url if count is not specified in the url

//For debugging, remove // under neath to print out the feedurl in the top of the page, just to see whats going on
//echo $feedurl;

/* load the xml file and stylesheet as domdocuments */
$xsl = new DomDocument();
$inputdom = new DomDocument();


//$inputdom->load(«» . $count);

/* create the processor and import the stylesheet */
$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
//$proc->setParameter(null, «titles», «Titles»);

/* transform and output the xml document */
$newdom = $proc->transformToDoc($inputdom);

print $newdom->saveXML();


The XSLT: delicious_snapcasa.xsl

<?xml version=»1.0″ encoding=»UTF-8″?><!– DWXMLSource=»delicious_snapcasa.xml» –><!DOCTYPE xsl:stylesheet  [
<!ENTITY nbsp   » «>
<!ENTITY copy   «©»>
<!ENTITY reg    «®»>
<!ENTITY trade  «™»>
<!ENTITY mdash  «—»>
<!ENTITY ldquo  «“»>
<!ENTITY rdquo  «”»>
<!ENTITY pound  «£»>
<!ENTITY yen    «¥»>
<!ENTITY euro   «€»>
<xsl:stylesheet version=»1.0″ xmlns:xsl=»» xmlns:wfw=»» xmlns:atom=»» xmlns:dc=»»>
<xsl:output method=»html» encoding=»UTF-8″ doctype-public=»-//W3C//DTD XHTML 1.0 Transitional//EN» doctype-system=»»/>
<xsl:template match=»/»>

<html xmlns=»»>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″/>

<link rel=»stylesheet» href=»delicious_snapcasa.css» media=»screen» />
<title> + SnapCasa = True</title>


<div class=»delicious_wrapper»>

<div class=»delicious_header»>
<h1><xsl:value-of select=»rss/channel/title»/></h1>
<h2><xsl:value-of select=»rss/channel/description» disable-output-escaping=»yes»/></h2>

<xsl:attribute name=»href»><xsl:value-of select=»link»/></xsl:attribute>
<xsl:value-of select=»rss/channel/link»/>


<xsl:for-each select=»rss/channel/item»>
<div class=»delicious_item»>

<xsl:attribute name=»href»><xsl:value-of select=»link»/></xsl:attribute>

<xsl:element name=»img»>

<xsl:attribute name=»src»><xsl:value-of select=»link»/></xsl:attribute><xsl:attribute name=»lowsrc»>lowsrc.gif</xsl:attribute><xsl:attribute name=»width»>140</xsl:attribute><xsl:attribute name=»height»>105</xsl:attribute><xsl:attribute name=»alt»>Screenshot for <xsl:value-of select=»link»/></xsl:attribute>

<p><xsl:value-of select=»title»/></p>

</div>  <!– ends class delicious_item –>


</div> <!– ends class delicious_wrapper –>



The CSS: delicious_snapcasa.css


text-align: left;
margin: 0;
padding: 0;
color: inherit;
background-color: transparent;
font-family: Verdana,Arial,Helvetica,Sans-Serif;

div.delicious_wrapper {
font-family: Verdana,Arial,Helvetica,Sans-Serif;
font-size: 0.8em;


div.delicious_wrapper div.delicious_item img {
border:solid 1px #999999; padding:1px;

div.delicious_wrapper div.delicious_item {
float:left; width:144px; height: 150px; overflow:hidden; vertical-align:top;
margin: 10px;
font-size: 0.8em;

Av Morten Skogly

Creator of Things

2 kommentarer

  1. Thanks for the great code, I have already implemented it! Snapcasa is a great thumbnail service too!

Kommentarer er stengt.