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.
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 |
|
|
Free Unbranded Basic Advanced |
You can also use your own domain |
|
We will communicate a custom domain to use |
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.
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:
NotePremium accounts can have other sizes available as well |
||||||||||
{url} |
The URL to generate the thumbnail from WarningThis API only accepts domain names as URLs, such as: wikipedia.org, cnn.com, etc. It will not accept internal pagesPlease 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.
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}
url= parameter to be the very last parameter passedpagepeeker.com is used only for free branded accounts. All other accounts, please use custom.pagepeeker.com if you were not given a custom domain nameThe parameters for this API are
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. |
We have several JS wrappers that allow for various functionality to be enbedded in your pages, with minimal effort
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:
NotePremium accounts can have other sizes available as well |
||||||||||
{url} |
The URL to generate the thumbnail from |
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:
NotePremium accounts can have other sizes available as well |
||||||||||
{domain} |
The domain to load the thumbnail from Can be:
|
||||||||||
|
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. |
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 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
The ID of the div element that will be used for displaying the thumbnail. NoteThe ID must be unique within the page. |
||||||||||
|
|
The size of the thumbnail. Available sizes:
NotePremium accounts can have other sizes available as well |
||||||||||
|
optional |
The size of the zoomed version of the thumbnail. Uses the same values as the Must be bigger than the Defaults to the next bigger size. I. e. ix NotePremium accounts can have other sizes available as well |
||||||||||
{url} |
The URL to generate the thumbnail from |
These REST APIs are intended to be used server side, but will work client side as well, if needed.
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:
http://pagepeeker.com/thumbs.php?size=m&refresh=1&url=wikipedia.orghttp://pagepeeker.com/thumbs_ready.php?size=m&url=wikipedia.orghttp://pagepeeker.com/thumbs.php?size=m&url=wikipedia.orghttp://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:
NotePremium accounts can have other sizes available as well |
||||||||||
|
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. WarningNever 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
{"IsReady": 1}{"IsReady": 0}