Docs / Examples / Instagram Post to Image Example

Instagram Post to Image

This example shows how to convert an Instagram post embed into an image using the HTML API. We’ll use Instagram’s official embed code to render the post.

HTML Content

<blockquote 
    class="instagram-media" 
    data-instgrm-captioned 
    data-instgrm-permalink="https://www.instagram.com/p/EXAMPLE_POST_ID/"
    data-instgrm-version="14">
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

CSS Styles

body {
    margin: 0;
    padding: 16px;
    background: white;
}

.instagram-media {
    margin: 0 auto !important;
    min-width: 326px !important;
    max-width: 550px !important;
    width: calc(100% - 2px) !important;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https://www.instagram.com/p/BsOGulcndj-/\" data-instgrm-version=\"14\"></blockquote><script async src=\"//www.instagram.com/embed.js\"></script>",
    "width": 600,
    "height": 800,
    "css": "body { margin: 0; padding: 16px; background: white; } .instagram-media { margin: 0 auto !important; min-width: 326px !important; max-width: 550px !important; width: calc(100% - 2px) !important; }"
}

Make sure to replace the Instagram post URL with the actual post you want to capture.

How it Works

We use Instagram’s embed code to render the post
The CSS ensures proper sizing and centering of the post
Width and height are set to accommodate standard Instagram post sizes

Consider using a webhook URL to ensure the Instagram embed has time to load and render completely.

Additional Options

You can customize the embed with these data attributes:

data-instgrm-captioned: Include the post caption
data-instgrm-permalink: The post URL to embed
data-instgrm-version: Instagram embed API version

Documentation