Playing with SnapCasa screenshots and

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;

2 thoughts on “Playing with SnapCasa screenshots and

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

Comments are closed.