PageGlimpse: Usar miniaturas de páginas web

PageGlimpse es un servicio que nos permite generar miniaturas de páginas web y mostrarlas en nuestro sitio, sin necesidad de crearlas previamente, utilizando sólo etiquetas HTML o JavaScript.

Implementar esto es extremadamente sencillo. Primero que nada, debemos crear una cuenta gratuita, enseguida nos enviarán un correo a través del cual nos informarán cuál es nuestra clave (una serie de números y letras).

Para utilizar el servicio, en 925html.com han creado una librería de apenas 4KB que nos permite manejar estas miniaturas pero, en realidad, si miramos la documentación del API de PageGlimpse, nos daremos cuenta que no hace falta todo eso y que todo se reduce a crear una URL o un enlace con los parámetros correctos.

Por ejemplo CLICK ACÁ

Ahí se abre en una ventana modal con LightWindow pero, podría colocarse directamente:

Una función muy interesante que nos ofrecen es que, si la miniatura no existe, ellos la generarán en menos de 24 horas.

¿Cómo creamos esa URL? Lo mínimo que debemos excribir es algo así:

http://images.pageglimpse.com/v1/thumbnails?url=http://XXXXXXXXXX&devkey=XXXXXXXXXX

La base es:

http://images.pageglimpse.com/v1/thumbnails?

a lo que le agregamos algunos parámetros uniendolos con el símbolo &:

• devkey es un texto obligatorio, la clave que previamente nos adjudicaron
• url es un texto obligatorio con la dirección URL de la página que queremos mostrar y siempre, debe comenzar con http:// o https://
• size es un texto opcional que tiene tres valores posibles y que establecen el tamaño de la miniatura a mostrar:
• • small muestra una imagen de 150x108 (es el valor por defecto)
  • medium muestra una imagen de 280x202
  • large muestra una imagen de 430x310
• root es un texto opcional que indica si se mostrará la miniatura de la raiz del dominio y no de una página interior si esa miniatura no está disponible. Por defecto es yes.
• nothumb es u texto con la URL de una imagen alternativa que será mostrada en caso que la miniatura no esté disponible.

Un ejemplo:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX

Esa URL la podemos aplicar a cualquier etiqueta, por ejemplo IMG:

<img src="http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX" />

Con un poco de JavaScript, podríamos simplificar als cosas aún más. Podríamos crear una función que creara esa etiqueta IMG por nosotrso, enviándole algunos datos.

Agreguemos esto antes de </head>:

<script type='text/javascript'>
// <![CDATA[ 
function getMiniaturaPG (cual,como) {
  if (cual == null){return}
  if (como == null){como = 'small'}
  document.write('<img class="miniPG" src="http://images.pageglimpse.com/v1/thumbnails?url=' + cual + '&size=' + como + '&devkey=XXXXXXXXXX" />');
}
// ]]>
</script>

Por supuesto, reemplazando XXXXXXXXXX por nuestra clave personal.

Y lo usaríamos de este modo:

<script>getMiniaturaPG('http://unaDireccion');</script>

En cuyo caso, se mostrará la miniatura de tamaño mínimo, o bien, podemos agregarle el parámetro para mostrar miniaturas más grandes:

<script>getMiniaturaPG('http://unaDireccion','small');</script>
<script>getMiniaturaPG('http://unaDireccion','medium');</script>
<script>getMiniaturaPG('http://unaDireccion','large');</script>

Como en el script, la etiqueta tiene una clase (miniPG), podríamos darle propiedades CSS para mostrarla con cierto diseño: por ejemplo:

.miniPG {
  background-color: #000;
  border: 2px solid #456;
  margin: 5px;
  padding: 5px;
}

O crear enlaces: