Tips for adding website thumbnails to your site

Adding website thumbnails on your website, can make your website stand out from the crowd and give your users the advantage of getting a sneak preview of other websites before the user has even clicked on the link, which typically results in more clickthroughs.

In this post you will get links some of the different services that delivers thumbnail services, and tips to the integration on your php based site.

Capturing screenshots of websites automatically can be a quite complex task, that typically can be done either by installing some kind of service on your desktop PC , or by using an online service. Our recommendation is to use a online service since there are great free services available, these services automatically updates their screenshots, and they have good API’s for accessing their content.

Online screenshot service

Shrinktheweb.com offers a basic thumbnail service for free. The free service supports up to 5.000 new screen shots (screen shots not already in the database) per month, up to 250.000 image requests per month, and screenshots in 6 standard sizes. Using the free service requires a link back to Shrinktheweb.com somewhere on all pages that displays screenshots from the page.

To get started using Shrinktheweb, you need to sign up at the site to get a site key.

This is the basic html for displaying a single screenshot:

<img src=’http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=<your access key>&stwsize=<thumbnail size>&stwUrl=<url>’>

To get things running you need to specify the following parameters:

  • STWAccessKeyId: Your API key
  • stwsize: The size of the thumbnail. You can request the following sizes in the free service:
    ‘mcr’ (75×56 pixels)
    ‘tny’ (90×75 pixels)
    ‘vsm’ (100×75 pixels)
    ‘sm’ (120×90 pixels)
    ‘lg’ (200×150 pixels)
    ‘xlg’ (320×240 pixels)
  • stwUrl: The url of the website that you want a preview from. Please notice that the service only captures and displays screenshots from the front page of sites. You can’t get a screenshot from www.example.com/articles/tips.html but you can get a screenshot from  www.example.com

This means that if you want a screenshot of www.bing.com in the resolution 90×75 pixels, you should use the following code:

<img src=’http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=<API key>&stwsize=tny&stwUrl=http://www.bing.com’>

Serving the screenshots locally

The free service can be a bit slow from time to time, so if you want to speed up things, you should consider hosting the screenshots locally. Shrinktheweb.com allows you to download their screenshots and deliver these from your local server, as long as you keep mandatory backlink to their website.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

2 Replies to Tips for adding website thumbnails to your site

  1. Jessica says:

    You can use w3snapshot.com. It is easy to integrate and works fine.

  2. I know it’s possible to host the images locally. Can you point me to a place where I can learn how to do that?

Comments are now closed for this article.