Playing with SnapCasa screenshots and del.icio.us

http://i0.wp.com/pappmaskin.no/wp-content/2011/07/20081016-es6718uspgixxfa8x8d7kbqm8y.jpg?resize=480%2C354

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:

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

Screenshot:

 http://img.skitch.com/20081016-cs4qcxn1qheh3b9dig19bhni8w.jpg

Source Code:

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

http://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, http://pappmaskin.no

Example 1: Fetch the 10 latest links tagged with electronics

http://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

http://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;
}

2 Comments

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

  2. Hey, thats cool! Glad you liked it. Post a link to it when you have it running.

Comments are closed.