Playing with SnapCasa screenshots and del.icio.us

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

Ingredients:

1. My 100 latest bookmarked urls from del.icio.us: http://feeds.delicious.com/v2/rss/mskogly?count=100
2. A SnapCasa login account.
3. A server that supports xslt transformation. (I’m running MAMP on my macbook, and pappmaskin is hosted on One.com)
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:

https://pappmaskin.no/opensource/delicious_snapcasa/delicious_snapcasa.php?tag=art&count=10

Screenshot:

Source Code:

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

https://pappmaskin.no/opensource/delicious_snapcasa/delicious_snapcasa.zip

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

The PHP: delicious_snapcasa.php
<?php
/*
This little script grabs variables from the url and builds up the url for fetching your links from del.icio.us
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, https://pappmaskin.no

Example 1: Fetch the 10 latest links tagged with electronics
https://pappmaskin.no/opensource/delicious_snapcasa/delicious_snapcasa.php?tag=electronics&count=10

Example 2: Fetch the 20 latest links tagget with both art and electronics
https://pappmaskin.no/opensource/delicious_snapcasa/delicious_snapcasa.php?tag=art+electronics&count=20

Del.icio.us feed examples
http://feeds.delicious.com/v2/rss/mskogly?count=100
http://feeds.delicious.com/v2/rss/mskogly/screenshot?count=15
http://feeds.delicious.com/v2/rss/mskogly/art+electronic?count=15

Todo:
– 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?

Resources:
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/WScbb6b82af5544594822510a94ae8d65-7a5b.html
http://www.w3schools.com/xsl/xsl_value_of.asp
http://devzone.zend.com/node/view/id/1713#Heading17

*/

$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 = «http://feeds.delicious.com/v2/rss/mskogly»; //this should be changed to set the username dynamically
$feedurl = $baseurl; //sets the feedurl = baseurl, which is eventually used to ask del.icio.us 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();
$xsl->load(«delicious_snapcasa.xsl»);
$inputdom = new DomDocument();

$inputdom->load($feedurl);

//$inputdom->load(«http://feeds.delicious.com/v2/rss/mskogly?count=» . $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();

exit;
?>

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=»http://www.w3.org/1999/XSL/Transform» xmlns:wfw=»http://wellformedweb.org/CommentAPI/» xmlns:atom=»http://www.w3.org/2005/Atom» xmlns:dc=»http://purl.org/dc/elements/1.1/»>
<xsl:output method=»html» encoding=»UTF-8″ doctype-public=»-//W3C//DTD XHTML 1.0 Transitional//EN» doctype-system=»http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»/>
<xsl:template match=»/»>

<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″/>

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

<body>

<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>

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

</div>

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

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

<xsl:element name=»img»>

<xsl:attribute name=»src»>http://snapcasa.com/get.aspx?code=3279&size=s&url=<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>
</xsl:element>

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

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

</xsl:for-each>

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

</body>
</html>

</xsl:template>
</xsl:stylesheet>

The CSS: delicious_snapcasa.css

/* DELICIOUS SNAPCASA CSS, MADE BY MORTEN SKOGLY, PAPPMASKIN.COM */

*
{
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;
color:#000;
width:100%;

}

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;
overflow:hidden;
font-size: 0.8em;
}