How to Create Snapshots using WordPress.com

WordPress.com has his unique app to create dynamic screenshots of websites.

It's based on python and you can use it in your projects.

How does it work?

Create an image with the following source:

http://s.wordpress.com/mshots/v1/YOUR_URL?w=YOUR_WIDTHCode language: JavaScript (javascript)

You need to specify the desired URL and image width.

Please notice the app needs some time to generate the snapshot if it's not generated already.

The first time you retrieve an URL you will see a loading gif like this:

Example

Important: the URL must be encoded using PHP's function urlencode:

<img src="//s.wordpress.com/mshots/v1/<?=urlencode('https://ricard.dev')?>?w=400" />Code language: HTML, XML (xml)

The full source with the encoded URL looks like this:

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fphp.quicoto.com?w=422Code language: JavaScript (javascript)

Result

If you're using this app, be nice, link to WordPress.com 😉