How to use our platform
PPI Loader URL's tipically consist of five parts. We call the first three parts your 'base URL'. In this documentation you will find code examples. Whenever we use ..., we actually mean your base URL. The URL's looks something like this: https://profilepageimages.usecue.com/images/jhvanderschee/small/0.jpg , and your base URL looks like this: https://profilepageimages.usecue.com/images/jhvanderschee . All parts are listed below:
| Protocol: | https:// |
| URL: | profilepageimages.usecue.com/images |
| Instagram username: | jhvanderschee |
| Size parameter: | small |
| Numbered image: | 0.jpg |
We renew your images every night (CET). When you log in to PPI Loader, you can manually renew your images in your account. You can do this once per hour. Clicking the link more frequently will result in a '0 images updated' message.
Below you will find a basic implementation example. This shows the images in a div. Using flexbox or grid layout you can style this in any way you want.
<div id="instafeed">
<img src=".../small/0.jpg" />
<img src=".../small/1.jpg" />
<img src=".../small/2.jpg" />
<img src=".../small/3.jpg" />
<img src=".../small/4.jpg" />
</div>
You can get larger images by leaving out the size parameter from the URL. The small images are around 25kb large, have 50% jpg compression and have 500px as their maximum dimension. Large images are the originals from Instagram. They can be up to 500kb each. Note that the ... stands for your PPI Loader base URL. Below the small and the large image URL:
.../small/0.jpg
.../0.jpg
You can get a JSON object with structured data at .../images.json . The id field contains the Instagram identifier for the post. The media_type field can have the values IMAGE , CAROUSEL_ALBUM or VIDEO . We recommend to ignore the media_url and thumbnail_url fields and use the image and image_small instead. Note that the ... stands for your PPI Loader base URL. If you want to create a deeplink to your instagram post, simply use the permalink value. Below you can find the JSON fields with example content:
| id: | 17867456578758388 |
| caption: | Lorem ipsum dolor sit amet |
| media_url: | https://scontent-lhr8-2.... |
| thumbnail_url: | https://scontent-lhr8-2.... |
| media_type: | IMAGE |
| permalink: | https://www.instagram.com/p/CAPdM-8ABlC/ |
| timestamp: | 2020-05-16T08:09:15+0000 |
| image: | .../0.jpg |
| image_small: | .../small/0.jpg |
With the structured data you can build any Instagram integration you want. You can use the permalink to link directly to your instagram post and use the media_type variable to differentiate between images, carousel albums and video's. We have built an advanced example that uses these features and showcases a responsive grid layout.