Facebook Post to Image

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

HTML Content

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"></script>
<div class="fb-post" 
     data-href="https://www.facebook.com/facebook/posts/1056016466570373"
     data-width="500"
     data-show-text="true">
</div>

CSS Styles

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

.fb-post {
    margin: 0 auto !important;
}

/* Ensure container is wide enough */
#fb-root {
    min-width: 500px;
}

MS Delay

We add a 1 second delay to ensure the Facebook SDK has time to load and render the post completely.

API Request

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

{
    "html": "<div id=\"fb-root\"></div><script async defer crossorigin=\"anonymous\" src=\"https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0\"></script><div class=\"fb-post\" data-href=\"https://www.facebook.com/facebook/posts/1056016466570373\" data-width=\"500\" data-show-text=\"true\"></div>",
    "width": 500,
    "height": 196,
    "css": "body { margin: 0; padding: 0; background: white; } .fb-post { margin: 0 auto !important; } #fb-root { min-width: 500px; }",
    "ms_delay": 1000
}

How it Works

1. We use Facebook’s SDK and embed code to render the post
2. The CSS ensures proper spacing and centering of the post
3. We set appropriate width and height to accommodate most post sizes