Docs / Examples / Convert a Facebook Post Embed | HTML to Image Docs

How to Convert a Facebook Post Embed to an Image

Render a Facebook post embed as a PNG. Useful for archiving posts, embedding in email newsletters, or including in printed materials.

Want it faster? Use the Facebook Post template and skip the SDK entirely. Send the post text and author as JSON and get a styled card back.

HTML and CSS

<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>

body { margin: 0; padding: 16px; background: white; }
.fb-post { margin: 0 auto !important; }
#fb-root { min-width: 500px; }

ms_delay

The Facebook SDK loads asynchronously. Use ms_delay of 1000ms minimum so the post renders before capture.

Code examples

cURL

curl -X POST https://app.html2img.com/api/html \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "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>",
    "css": "body { margin: 0; padding: 16px; background: white; } .fb-post { margin: 0 auto !important; } #fb-root { min-width: 500px; }",
    "width": 500,
    "height": 196,
    "ms_delay": 1000
  }'

PHP

$ch = curl_init('https://app.html2img.com/api/html');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => ['X-API-Key: ' . getenv('HTML2IMG_API_KEY'), 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => json_encode([
        '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>',
        'css' => 'body { margin: 0; padding: 16px; background: white; } .fb-post { margin: 0 auto !important; } #fb-root { min-width: 500px; }',
        'width' => 500,
        'height' => 196,
        'ms_delay' => 1000,
    ]),
]);
$url = json_decode(curl_exec($ch), true)['url'];
curl_close($ch);

Node.js

const response = await fetch('https://app.html2img.com/api/html', {
  method: 'POST',
  headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    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>',
    css: 'body { margin: 0; padding: 16px; background: white; } .fb-post { margin: 0 auto !important; } #fb-root { min-width: 500px; }',
    width: 500,
    height: 196,
    ms_delay: 1000,
  }),
});
const { url } = await response.json();

Python

import os, requests
response = requests.post(
    'https://app.html2img.com/api/html',
    headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
    json={
        '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>',
        'css': 'body { margin: 0; padding: 16px; background: white; } .fb-post { margin: 0 auto !important; } #fb-root { min-width: 500px; }',
        'width': 500, 'height': 196, 'ms_delay': 1000,
    },
)
url = response.json()['url']

Common pitfalls

SDK script blocked. Privacy extensions and corporate proxies sometimes block connect.facebook.net. Use the Facebook Post template for predictable output.
Post is private. Posts on private profiles render an empty card. Verify visibility before relying on this flow.
Render exceeds 30 seconds. The SDK can be slow. Add a webhook_url and process the response asynchronously.

Documentation