There are several ways to use our thumbnail generation service. You can use direct linking, javascript wrappers or you can use APIs on the server side for advanced functionality.

Note on the domain name used below.

All URLs below use pagepeeker.com as the domain name. Depending on the membership level, other domain names should be used.

Membership level Domain to use

Free Branded

pagepeeker.com

Free Unbranded

Basic

Advanced

custom.pagepeeker.com

You can also use your own domain

Premium

We will communicate a custom domain to use

Direct Linking

Direct linking allows you to embed an image URL wherever you need that in your site. There are two ways to embed our links in your site.

Pretty URLs

These are nice looking URLs. They looks like this

http://pagepeeker.com/t/{size}/{url}

The parameters for this API are

Parameter Description
{size}

The size of the thumbnail. Available sizes:

t Tiny, 90 x 68 pixels
s Small, 120 x 90 pixels
m Medium, 200 x 150 pixels
l Large, 400 x 300 pixels
x Extra large, 480 x 360 pixels

Note

Premium accounts can have other sizes available as well
{url}

The URL to generate the thumbnail from

Warning

This API only accepts domain names as URLs, such as: wikipedia.org, cnn.com, etc. It will not accept internal pages
Please use the "Normal URLs" API below for full URL screenshots.

This API will return a thumbnail image, if one is already present on our servers. If not, it will return a placeholder image (default is this). You should retry loading the image after some time, so you can get the generated thumbnail, once generated.

Normal URLs

These are normal URLs that generate thumbnails. They allow for more options when generating thumbnails. They looks like this

http://pagepeeker.com/thumbs.php?size={size}&code={code}&refresh={refresh}&wait={wait}&url={url}

Important Notes

  1. This API requires the url= parameter to be the very last parameter passed
  2. Please pay attention to the domain name used. pagepeeker.com is used only for free branded accounts. All other accounts, please use custom.pagepeeker.com if you were not given a custom domain name

The parameters for this API are

Parameter Description
{size}

The size of the thumbnail. Available sizes:

t Tiny, 90 x 68 pixels
s Small, 120 x 90 pixels
m Medium, 200 x 150 pixels
l Large, 400 x 300 pixels
x Extra large, 480 x 360 pixels

Note

Premium accounts can have other sizes available as well

{code}

optional

Your API key. This is optional and recomended to use only for server side calls. Client side usage does not require it, as we automatically show the thumbnails only for the domains added in your account.

For the free branded accounts, this parameter is ignored, as we provide the free branded service for anybody, free of charge.

Warning

Never use this code on client side pages. We use it for counting your impressions, so having it used by third parties will count against your monthly quota.

{refresh}

premium

optional

This parameter forces the currently generated thumbnail to be regenerated. It is optional and will be ignored unless it contains the value 1

Note

This is available for premium accounts only

{wait}

premium

optional

If the thumbnail is not already generated and this parameter is present and equals 1, the API will not return a placeholder image, but wait until the thumbnail is generated and then return the generated thumb. It is optional and will be ignored unless it contains the value 1

Note

This is available for premium accounts only
{url}

The URL to generate the thumbnail from

Website Favicons

Use the URL below to embed the favicon from any site. This service if free of charge and available on all account levels

http://pagepeeker.com/f/{site}

The parameters for this API are

Parameter Description
{site} The site to get the favicon for. This works with site names only, it will not accept internal pages.

JavaScript Wrappers

We have several JS wrappers that allow for various functionality to be enbedded in your pages, with minimal effort

Auto refresh when thumbnail available

Sometimes, the thumbnais are not available when you request them. When this happens, unless you use a premium account, a placeholder thumbnail will be shown to your users. In order to show the site thumbnail as soon as possible, this API polls our server and replaces the placeholder with the actual thumbnail when the thumbnail becomes available.

Place this code immediately below the <body> tag

<!-- PagePeeker JS body script -->
<script language="JavaScript">
__pp_s='{size}';
__pp_u='http://pagepeeker.com/thumbs_generated.php?size='+__pp_s+'&url=';
__pp_f='http://pagepeeker.com/thumbs.php?size='+__pp_s+'&url=';
h=document.getElementsByTagName('body')[0];
function __pp_rd(rd,r){if (rd==1) document.getElementById('__pp_i_' + r).src=__pp_f+r+'&r='+Math.random();else setTimeout("__pp_call('"+r+"')", 5000);}
function __pp_call(r){
if (!document.getElementById('__pp_i_' + r)) document.write('<img id="__pp_i_'+r+'" src="'+__pp_f+r+'&r='+Math.random()+'" border="0">');
var e=document.getElementById('__pp_scr_'+r);if (e) h.removeChild(e);var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src=__pp_u+encodeURIComponent(r)+'&r='+Math.random();s.id='__pp_scr_'+r;h.appendChild(s);
}
</script>
<!-- END PagePeeker -->

Place this code where an image needs to appear

<script language="JavaScript">__pp_call('{url}');</script>

Parameters to customize in this API

Parameter Description
{size}

The size of the thumbnail. Available sizes:

t Tiny, 90 x 68 pixels
s Small, 120 x 90 pixels
m Medium, 200 x 150 pixels
l Large, 400 x 300 pixels
x Extra large, 480 x 360 pixels

Note

Premium accounts can have other sizes available as well
{url}

The URL to generate the thumbnail from

Show thumbnails on mouse over for external links

If you want your users to have an idea what sites they will be visiting when clicking a link out, you can use this handy JS script to automatically attach JS overlays with thumbnails for links on your site

Place this code immediately below the <body> tag

<!-- PagePeeker JS body script -->
<script language="JavaScript">
var size = '{size}'; //see http://pagepeeker.com/free_thumbnails for list of sizes
var useAttr = '{attr}'; //is not set, will hook automatically all A tags with absolute URLs. Is set to something, will only hook those A tags with the attribute set
var domain = '{domain}'; //this can be changed to custom.pagepeeker.com for unbranded or paid accounts
//note that you can customize the look of the hint window with CSS. 
//------------ do not edit below this line ---------------------

var tipDiv, tipImg;
window.onload = function() {
	var anchs = document.getElementsByTagName('a');
	for (var i = 0; i < anchs.length; i++) {
		attr = anchs[i].getAttribute(useAttr);
		hasAttr = (attr != '') && (attr != null);
		if ((useAttr != '') && !hasAttr) continue;
		anchs[i].onmouseover = handleOver;
		anchs[i].onmouseout = handleOut;
	}

	var tipDivIn = document.createElement('div');
	tipDiv = document.createElement('div');
	tipImg = document.createElement('img');
	tipDiv.style.display = 'none';
	tipDiv.appendChild(tipImg);
	tipDiv.appendChild(tipDivIn);
	document.body.appendChild(tipDiv);
	tipDivIn.innerHTML = '<small>Thumbnails by</small> <b><i>Page<font color="#A80000">Peeker</font>.com</i></b>';
	tipDivIn.style.paddingTop = '10px';
	tipDiv.style.position = 'absolute';
	tipDiv.style.border = '1px solid black';
	tipDiv.style.backgroundColor = '#dfdfdf';
	tipDiv.style.padding = '10px';
	tipDiv.style.textAlign = 'center';
	tipDiv.style.fontFamily = 'Verdana, Arial, sans-serif';
	tipDiv.style.fontSize ='13px';
	tipDiv.className = 'ppDiv';
	tipImg.style.padding = '2px';
	tipImg.style.backgroundColor = '#797979';
}

function handleOver(e) {
	var _left = _top = 0;
	if (!this.offsetParent) return;

	do {
		_left += this.offsetLeft; _top += this.offsetTop;
	} while (this = this.offsetParent);
		
	_top = _top + this.offsetHeight + 10;
	_left = _left + (this.offsetWidth / 2);
	if (!this.href.match(/http(s)?:/)) return;
	showTip(_top, _left, this.href);
}

function showTip(t, l, anch) {
	tipImg.src = 'http://' + domain + '/thumbs.php?size=' + size + '&url=' + anch + '&r=' + Math.random();
	tipDiv.style.left = l + 'px'; tipDiv.style.top = t + 'px';  tipDiv.style.display = 'block';
}

function handleOut(e) { tipDiv.style.display = 'none'; }
</script>
<!-- END PagePeeker -->

Parameters to customize for this API

Parameter Description
{size}

The size of the thumbnail. Available sizes:

t Tiny, 90 x 68 pixels
s Small, 120 x 90 pixels
m Medium, 200 x 150 pixels
l Large, 400 x 300 pixels
x Extra large, 480 x 360 pixels

Note

Premium accounts can have other sizes available as well
{domain}

The domain to load the thumbnail from

Can be:

  • pagepeeker.com - for free accounts
  • custom.pagepeeker.com - for unbranded or paid accounts
  • your own domain - for unbranded or paid accounts

{attr}

optional

Use this to limit the images that will show thumbnails. Only the images with the attribure set to something will get hooked by the script.

This parameter is optional.

Zoomable thumbnail

You can add a thumbnail on your site that allows zooming in then the mouse is hovered over the image. To add this, use the code bellow

<!-- PagePeeker zoomable thumbnail -->
<div id="{div-id}"></div>
<script type="text/javascript" src="http://pagepeeker.com/thumbsLoad.php?target={div-id}&size={size}&nextsize={next-size}&url={url}">
</script>
<!-- END PagePeeker zoomable thumbnail -->

Parameters to customize in this API

Parameter Description

{div-id}

The ID of the div element that will be used for displaying the thumbnail.

Note

The ID must be unique within the page.

{size}

The size of the thumbnail. Available sizes:

t Tiny, 90 x 68 pixels
s Small, 120 x 90 pixels
m Medium, 200 x 150 pixels
l Large, 400 x 300 pixels
x Extra large, 480 x 360 pixels

Note

Premium accounts can have other sizes available as well

{next-size}

optional

The size of the zoomed version of the thumbnail. Uses the same values as the {size} parameter above.

Must be bigger than the {size} parameter.

Defaults to the next bigger size. I. e. ix {size} = m then {next-size} = l

Note

Premium accounts can have other sizes available as well
{url}

The URL to generate the thumbnail from


REST APIs Intended to be used server side

These REST APIs are intended to be used server side, but will work client side as well, if needed.

Thumbnai Ready

This API will let you check if a thumbnail is generated on our server and is available for being displayed.

A normal sequence for calling this API would be:

  • Issue a reset API call: http://pagepeeker.com/thumbs.php?size=m&refresh=1&url=wikipedia.org
  • Poll this API until it returns that the image is available: http://pagepeeker.com/thumbs_ready.php?size=m&url=wikipedia.org
  • Download the image: http://pagepeeker.com/thumbs.php?size=m&url=wikipedia.org
http://pagepeeker.com/thumbs_ready.php?size={size}&code={code}&url={url}

The parameters for this API are

Parameter Description
{size}

The size of the thumbnail. Available sizes:

t Tiny, 90 x 68 pixels
s Small, 120 x 90 pixels
m Medium, 200 x 150 pixels
l Large, 400 x 300 pixels
x Extra large, 480 x 360 pixels

Note

Premium accounts can have other sizes available as well

{code}

optional

Your API key. This is optional and recomended to use only for server side calls. Client side usage does not require it, as we automatically show the thumbnails only for the domains added in your account.

For the free branded accounts, this parameter is ignored, as we provide the free branded service for anybody, free of charge.

Warning

Never use this code on client side pages. We use it for counting your impressions, so having it used by third parties will count against your monthly quota.
{url}

The URL to generate the thumbnail from

This URL returns JSON code that shows whether the thubnail is ready or not

  • Thumbnail is ready: {"IsReady": 1}
  • Thumbnail is NOT ready: {"IsReady": 0}