Tutorial PHP

On this page we will guide you through all the steps needed to create a nice screenshot program using our API to serve the images.

The Best-of-the-web project

We want to show the Top 10 websites with a small description and a recent screenshot on one page. It is called the best of the web page.

The Data

The data is stored in data.php. This can be filled from a database or manually of course.

<?php
$websites = array(
  array("id"=>1, "name"=>"Google", "url" => "http://www.google.com/", "description" => "Enables users to search the world's information, including webpages, images, and videos."),
  array("id"=>2, "name"=>"Facebook", "url" => "http://www.facebook.com/", "description" => "A social utility that connects people, to keep up with friends, upload photos, share links"),
  array("id"=>3, "name"=>"Youtube", "url" => "http://www.youtube.com/", "description" => "YouTube is a way to get your videos to the people who matter to you. Upload, tag and share."),
  array("id"=>4, "name"=>"Yahoo", "url" => "http://www.yahoo.com/", "description" => "A major internet portal and service provider offering search results, customizable content and more."),
  array("id"=>5, "name"=>"Baidu", "url" => "http://www.baidu.com/", "description" => "The leading Chinese language search engine, provides simple search experience."),
  array("id"=>6, "name"=>"Amazon", "url" => "http://www.amazon.com/", "description" => "Amazon.com seeks to be Earth's most customer-centric company."),
  array("id"=>7, "name"=>"Wikipedia", "url" => "http://wikipedia.org/", "description" => "A free encyclopedia built collaboratively using wiki software."),
  array("id"=>8, "name"=>"Taobao", "url" => "http://taobao.com/", "description" => "Launched in May 2003, Taobao Marketplace (www.taobao.com) is the online shopping destination of choice for Chinese consumers."),
  array("id"=>9, "name"=>"Twitter", "url" => "http://twitter.com/", "description" => "Social networking and microblogging service utilising instant messaging, SMS or a web interface."),
  array("id"=>10, "name"=>"Thumbnail.ws", "url" => "http://thumbnail.ws/", "description" => "Website screenshot API with an excellent tutorial.")
);

The HTML

The HTML is created by PHP by showing a list of 10 websites using a for loop.

<!DOCTYPE html>
<html>
<head>
 <title>Best Of The Web Tutorial</title>
</head>
<body>
<h1>Best of the web Tutorial</h1>
<?php
//--- Load the website data ---------------
include_once('data.php');
//--- Show all websites in the array ------
foreach ($websites as $website) { ?>
    <div style="width: 400px; height: 400px; float: left; border: 1px solid black; 
                padding: 10px 10px 10px 10px; margin: 0px 20px 20px 0px;
                background-color: #ccccff;">
      <h2>#<?= $website['id']  ?>. <?= $website['name'] ?></h2>
      <img src="screenshot<?= $website['id'] ?>.jpg" width="380" height="214" />
      <br />
      <?= $website['description'] ?>
    </div>
<?php } ?>
<br clear="all" />
This page is part of the thumbnail.ws <a href="https://thumbnail.ws/tutorial-php.html">PHP website screenshot tutorial</a>.
</body>
</html>

The Screenshots

Now it is time to load the screenshots using the thumbnail.ws API. The API offers three interfaces we can use: HTTP GET, HTTP POST and SOAP. I will demonstrate HTTP-GET and SOAP.

You need to implement only one.

SOAP client

<?php
//--- Construct the SOAP client --------------------
$client = new SoapClient('https://api.thumbnail.ws/soap?wsdl');
//--- Get all websites we want screenshots for -----
include_once('data.php');
//--- Loop through all websites --------------------
foreach ($websites as $website) {
  echo "Getting screenshot for " . $website['name'] . "\n";
  
  try {
    $response = $client->get(array(
      "apikey"   => 'YOUR_API_KEY', 
      "url"      => $website['url'],
      "width"    => 380
    ));
    //--- Image is base64 encoded in transport. Decode it here.
    $image = base64_decode($response->image);
    
    //--- Save image to disk
    file_put_contents(dirname(__FILE__) . '/screenshot' . $website['id'] . '.jpg', $image);
  } catch (SoapFault $fault) {
    echo "Error: " . $fault->faultcode . ": " . $fault->getMessage() . "\n";
  }
}

You will probably get this error:
Error: SOAP-ENV:Server: Invalid API key
Get your own API key and put in the right place in the soap-client script.

HTTP GET client

<?php
//--- Get all websites we want screenshots for -----
include_once('data.php');
//--- Set the parameters --------------//
$apikey = "YOUR-FREE-API-KEY";
$width   = 380;
//--- Loop through all websites --------------------
foreach ($websites as $website) {
  echo "Getting screenshot for " . $website['name'] . "\n";
  
  //--- Make the call -------------------//
  $fetchUrl = "https://api.thumbnail.ws/api/".$apikey ."/thumbnail/get?url=".
    urlencode($website['url'])."&width=". urlencode($width);
  
  $image = file_get_contents($fetchUrl);
  //--- Save image to disk
  file_put_contents(dirname(__FILE__) . '/screenshot' . $website['id'] . '.jpg', $image);
}

You will probably get this error:
Error: SOAP-ENV:Server: Invalid API key
Get your own API key and put in the right place in the soap-client script.

To finish up

Run either the SOAP client script or the HTTP GET client script and make sure you have permission to write in the directory you start this script. I would run this script from the command line (Linux shell or Windows CMD) and if it all works let this script run automatically once very day to keep refreshing the screenshots as the websites will change over time.

You can see the end result here: https://thumbnail.ws/tutorial-php/