Papermashup

Subscribe


Tweets


"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 1 day ago

"@burgerbeartom @kycutwilson finally got around to using my free burgers for life! And we weren't disappointed. http://t.co/nJ6p2nLtg4"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Using web thumbs to enhance user experience

AshleyAshley

Over the past few years I’ve had the opportunity to work on a few personal projects. This allowed me to experiment more with techniques that I wouldn’t have normally used on client sites. During this time I was building a blogging platform, I soon found that it was difficult to present the data and make it look interesting to the user, this is where i discovered web thumbnails to achieve this.

There are a variety of web thumbnail services out there but the best and easiest to use by far is shrinktheweb.com

Shrink The Web Thumbnail Engine

Lets add thumbnails to an application

I’m going to run through the concept of adding web thumbnails to an analytics application. Lets say we have a concept and want to display our data like the image below taken from the popular link shortening service http://tweet.me.it.

Tweet.me.it URL Shortener

So we have our data in a database including the URL or link to our target site that we want the thumbnail for. In the code example below you’ll see that I’m just doing a simple database query in a while loop. You can see from my example that it’s very easy to add web thumbnails from shrinktheweb.com to your application and sites, and it improves the readability, stickiness, and retention rate of your users.

This is the kind of query used to create the example in the image above.


<?php

// simple database query
$result = $connector->query("SELECT url, title, clicks  FROM analytics order by date ASC LIMIT 10");
while($row = $connector->fetchArray($result)){			

// store the variable from the database
$clicks = stripslashes($row['clicks']);
$title = stripslashes($row['title']);
$url = stripslashes($row['title']);

?>

<div class="analytics">
<img style="float:left;" src="http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=YOURKEY&stwsize=tny&stwUrl=<?php echo $url;?>"/>
<?php echo $title;?>
<?php echo $url;?>
<?php echo $clicks;?>
<div style="clear:both;"></div>
</div>


<?php
// end of while loop
}
?>

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 1
  • Anthony
    Posted on

    Anthony Anthony

    Reply Author

    I totally agree with the writer. I am running a web directory and putting screenshots along with the URL always good compare to not using anything at all. I am not using shrinkthweb but w3snapshot.com and it is working.