Social Media Screenshot Tool

Automate social card generation and social media image creation with a screenshot API. Create consistent, branded sharing images at scale.

Last updated: 2026-03-25

Try ScreenshotAPI free

5 free credits. No credit card required.

Start for free

The Problem with Social Media Image Creation

Every piece of content you publish needs social sharing images. Blog posts need OG images. Product launches need announcement cards. Newsletters need preview thumbnails. Event promotions need platform-specific graphics. And each social platform has its own recommended dimensions.

Creating these images manually in Figma, Canva, or Photoshop takes 10-30 minutes per image. That time adds up fast when you publish daily content. Marketing teams end up either skipping social images entirely (losing engagement) or spending hours each week on repetitive graphic design work.

What you need is an automated social cards pipeline that generates branded, platform-ready images from your content data, without manual design work for each piece.

How ScreenshotAPI Automates Social Card Generation

ScreenshotAPI turns any HTML page into a high-quality image. The strategy for social media screenshot automation is:

Build HTML/CSS templates for your social card designs.
Serve the templates with dynamic data (title, description, author, category).
Call ScreenshotAPI to capture the rendered template at the correct dimensions.
Upload the resulting image to your CDN and reference it in your content metadata.

This approach gives you the design flexibility of HTML/CSS with the automation of an API call. Your design team creates the templates once, and every future piece of content gets professional social cards automatically.

Why HTML templates beat image generation libraries

Full CSS support: Gradients, shadows, web fonts, flexbox, grid, animations (frozen at capture).
Easy iteration: Designers tweak CSS instead of learning a new image generation library.
Live preview: Open the template URL in a browser to see exactly what the card will look like.
Multiple variants: Create different templates for blog posts, product pages, events, and announcements.

Implementation Guide

Social Card Template

Create an HTML page that renders your social card design. Accept parameters via query string:


html
<!-- /social-card?title=My+Article&category=Engineering&author=Jane -->
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1200px;
      height: 630px;
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 60px;
    }
    .category {
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 3px;
      opacity: 0.7;
    }
    h1 {
      font-size: 52px;
      line-height: 1.2;
      max-width: 900px;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .author { font-size: 20px; opacity: 0.8; }
    .logo { font-size: 20px; font-weight: 700; }
  </style>
</head>
<body>
  <div class="category" id="category"></div>
  <h1 id="title"></h1>
  <div class="footer">
    <span class="author" id="author"></span>
    <span class="logo">YourBrand</span>
  </div>
  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById('title').textContent = params.get('title') || 'Untitled';
    document.getElementById('category').textContent = params.get('category') || '';
    document.getElementById('author').textContent = params.get('author') || '';
  </script>
</body>
</html>

Automated Social Card Generator

JavaScript


javascript
const axios = require("axios");
const { S3Client, PutObjectCommand } = require("@aws-sdk/client-s3");

const API_KEY = process.env.SCREENSHOT_API_KEY;
const s3 = new S3Client({ region: "us-east-1" });

const PLATFORMS = {
  og: { width: 1200, height: 630 },
  twitter: { width: 1600, height: 900 },
  instagram: { width: 1080, height: 1080 },
};

async function generateSocialCard({ title, category, author, slug, platform = "og" }) {
  const dimensions = PLATFORMS[platform];
  const templateUrl = new URL("https://yourapp.com/social-card");
  templateUrl.searchParams.set("title", title);
  templateUrl.searchParams.set("category", category);
  templateUrl.searchParams.set("author", author);

  const response = await axios.get("https://screenshotapi.to/api/v1/screenshot", {
    params: {
      url: templateUrl.toString(),
      width: dimensions.width,
      height: dimensions.height,
      type: "png",
      waitUntil: "networkidle",
    },
    headers: { "x-api-key": API_KEY },
    responseType: "arraybuffer",
  });

  const key = `social/${slug}-${platform}.png`;
  await s3.send(
    new PutObjectCommand({
      Bucket: "your-cdn-bucket",
      Key: key,
      Body: response.data,
      ContentType: "image/png",
      CacheControl: "public, max-age=31536000",
    })
  );

  return `https://cdn.yourapp.com/${key}`;
}

async function generateAllPlatforms({ title, category, author, slug }) {
  const results = {};
  for (const platform of Object.keys(PLATFORMS)) {
    results[platform] = await generateSocialCard({
      title, category, author, slug, platform,
    });
  }
  return results;
}

Python


python
import os
from urllib.parse import urlencode
import httpx
import boto3

API_KEY = os.environ["SCREENSHOT_API_KEY"]
s3 = boto3.client("s3")

PLATFORMS = {
    "og": {"width": 1200, "height": 630},
    "twitter": {"width": 1600, "height": 900},
    "instagram": {"width": 1080, "height": 1080},
}

def generate_social_card(
    title: str,
    category: str,
    author: str,
    slug: str,
    platform: str = "og",
) -> str:
    dimensions = PLATFORMS[platform]
    template_params = urlencode({"title": title, "category": category, "author": author})
    template_url = f"https://yourapp.com/social-card?{template_params}"

    response = httpx.get(
        "https://screenshotapi.to/api/v1/screenshot",
        params={
            "url": template_url,
            "width": dimensions["width"],
            "height": dimensions["height"],
            "type": "png",
            "waitUntil": "networkidle",
        },
        headers={"x-api-key": API_KEY},
    )
    response.raise_for_status()

    key = f"social/{slug}-{platform}.png"
    s3.put_object(
        Bucket="your-cdn-bucket",
        Key=key,
        Body=response.content,
        ContentType="image/png",
        CacheControl="public, max-age=31536000",
    )

    return f"https://cdn.yourapp.com/{key}"

def generate_all_platforms(title: str, category: str, author: str, slug: str) -> dict:
    return {
        platform: generate_social_card(title, category, author, slug, platform)
        for platform in PLATFORMS
    }

CMS Integration Workflow

Integrate social card generation into your content publishing pipeline:


javascript
async function onContentPublished(content) {
  const socialImages = await generateAllPlatforms({
    title: content.title,
    category: content.category,
    author: content.author.name,
    slug: content.slug,
  });

  await db.content.update({
    where: { id: content.id },
    data: {
      ogImage: socialImages.og,
      twitterImage: socialImages.twitter,
      instagramImage: socialImages.instagram,
    },
  });
}

Template Design Tips

Brand Consistency

Keep your templates aligned with your brand:

Use your brand colors as background gradients.
Load your brand fonts via Google Fonts or self-hosted @font-face.
Include your logo in a consistent position across all templates.
Maintain readable contrast ratios for text on background.

Content-Aware Layouts

Handle varying title lengths gracefully:


css
h1 {
  font-size: clamp(32px, 5vw, 56px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Dark and Light Variants

Generate both variants using the colorScheme parameter:


javascript
const lightCard = await generateSocialCard({ ...data, colorScheme: "light" });
const darkCard = await generateSocialCard({ ...data, colorScheme: "dark" });

Platform-Specific Dimensions Reference

Platform	Recommended Size	Aspect Ratio	Use Case
Facebook / LinkedIn	1200x630	1.91:1	Link sharing
Twitter/X Summary	1200x630	1.91:1	Link cards
Twitter/X Large	1600x900	16:9	Image posts
Instagram Feed	1080x1080	1:1	Square posts
Instagram Stories	1080x1920	9:16	Stories
Pinterest	1000x1500	2:3	Pins

Pricing Estimate

Scenario	Posts/Month	Platforms	Credits/Month	Recommended Plan
Personal blog	10	1 (OG)	10	Free tier + Starter
Company blog	30	2 (OG + Twitter)	60	Starter (500 credits, $20)
Content platform	200	3 (OG + Twitter + IG)	600	Growth (2,000 credits, $60)
Media company	1,000	3+ platforms	3,000+	Pro (10,000 credits, $200)

Each platform variant uses one credit. Credits never expire. Visit the pricing page for all plan options.

Social Cards vs. Manual Design

Approach	Time per Image	Consistency	Scalability	Cost
Manual (Figma/Canva)	10-30 min	Variable	Poor	Designer time
Canva templates	2-5 min	Good	Medium	$13/month
@vercel/og / Satori	0 (build-time)	Good	Good	Free (compute)
ScreenshotAPI templates	0 (automated)	Perfect	Excellent	Per credit

For a detailed comparison of screenshot generation approaches, check our best screenshot API roundup. For the OG image-specific workflow, see the OG image generation use case.

Getting Started

Sign up for 5 free credits.
Design your social card template in HTML/CSS.
Deploy the template to a URL your API can access.
Call ScreenshotAPI with the template URL and platform dimensions.
Integrate into your CMS or publishing workflow.

Read the API documentation for the full parameter reference.

Frequently asked questions

What dimensions should social media images be?

The standard Open Graph image size is 1200x630, which works across Facebook, Twitter/X, LinkedIn, and Slack. For Instagram stories, use 1080x1920. For Twitter/X posts, 1600x900 is also popular. ScreenshotAPI lets you set exact width and height for any platform.

Can I generate social images for all my blog posts automatically?

Yes. Create an HTML template that accepts parameters (title, author, category), then call ScreenshotAPI for each post. Integrate this into your CMS publish workflow or run it as a post-build step.

How do I ensure web fonts render correctly?

Use waitUntil: networkidle to ensure all font files finish loading before capture. If your fonts are self-hosted, make sure the template page loads them with proper @font-face declarations.

Can I generate images for multiple platforms at once?

Yes. Make parallel API calls with different width and height parameters for each platform's recommended dimensions. Each call uses one credit.

Start capturing screenshots today

Create a free account and get 5 credits to try the API. No credit card required. Pay only for what you use.

Create free account View pricing