Twitter Embed to Image

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

HTML Content

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/username/status/1298730289737293824"></a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js"></script>

CSS Styles

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

.twitter-tweet {
    margin: 0 !important;
}

MS Delay

We add a 1 second delay to the API request to ensure that the tweet has loaded before we try to capture it. You can adjust the delay as needed.

API Request

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

{
    "html": "<blockquote class=\"twitter-tweet\"><a href=\"https://twitter.com/username/status/1298730289737293824\"></a></blockquote><script async src=\"https://platform.twitter.com/widgets.js\"></script>",
    "width": 550,
    "height": 321,
    "css": "body { margin: 0; padding: 0; background: white; } .twitter-tweet { margin: 0 !important; }",
    "ms_delay:": 1000
}

How it Works

1. We use Twitter’s official embed code to render the tweet
2. The CSS ensures proper spacing and a white background
3. The API request includes both the HTML and CSS needed to render the tweet
4. We set a fixed width and height to ensure the tweet is captured properly