Generate Social Cards

Generate Open Graph social sharing cards with dynamic titles, descriptions, and branding.

Who this is for

Content platforms and developer blogs use this recipe to generate Open Graph images for social sharing. Define a canvas with your brand background and render the article title, description, and site name — ready for og:image meta tags with consistent, eye-catching previews.

curl -X POST https://api.iterationlayer.com/image-generation/v1/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "dimensions": {
      "width": 1200,
      "height": 630
    },
    "output_format": "png",
    "layers": [
      {
        "index": 0,
        "type": "solid-color-background",
        "hex_color": "#0F172A"
      },
      {
        "index": 1,
        "type": "text",
        "text": "Building Scalable APIs with Elixir",
        "font_name": "Inter",
        "font_size_in_px": 48,
        "text_color": "#FFFFFF",
        "font_weight": "Bold",
        "position": { "x": 80.0, "y": 120.0 },
        "dimensions": { "width": 1040, "height": 200 }
      },
      {
        "index": 2,
        "type": "text",
        "text": "A practical guide to designing fault-tolerant API services",
        "font_name": "Inter",
        "font_size_in_px": 24,
        "text_color": "#94A3B8",
        "position": { "x": 80.0, "y": 360.0 },
        "dimensions": { "width": 1040, "height": 80 }
      },
      {
        "index": 3,
        "type": "text",
        "text": "iterationlayer.com",
        "font_name": "Inter",
        "font_size_in_px": 20,
        "text_color": "#6366F1",
        "position": { "x": 80.0, "y": 530.0 },
        "dimensions": { "width": 400, "height": 40 }
      }
    ]
  }'
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const result = await client.generateImage({
  dimensions: { width_in_px: 1200, height_in_px: 630 },
  output_format: "png",
  layers: [
    {
      index: 0,
      type: "solid-color-background",
      hex_color: "#0F172A",
    },
    {
      index: 1,
      type: "text",
      text: "Building Scalable APIs with Elixir",
      font_name: "Inter",
      font_size_in_px: 48,
      text_color: "#FFFFFF",
      font_weight: "Bold",
      position: { x: 80.0, y: 120.0 },
      dimensions: { width_in_px: 1040, height_in_px: 200 },
    },
    {
      index: 2,
      type: "text",
      text: "A practical guide to designing fault-tolerant API services",
      font_name: "Inter",
      font_size_in_px: 24,
      text_color: "#94A3B8",
      position: { x: 80.0, y: 360.0 },
      dimensions: { width_in_px: 1040, height_in_px: 80 },
    },
    {
      index: 3,
      type: "text",
      text: "iterationlayer.com",
      font_name: "Inter",
      font_size_in_px: 20,
      text_color: "#6366F1",
      position: { x: 80.0, y: 530.0 },
      dimensions: { width_in_px: 400, height_in_px: 40 },
    },
  ],
});

await Bun.write("result.png", Buffer.from(result.data.buffer, "base64"));
import base64

from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")

result = client.generate_image(
    dimensions={"width_in_px": 1200, "height_in_px": 630},
    output_format="png",
    layers=[
        {
            "index": 0,
            "type": "solid-color-background",
            "hex_color": "#0F172A",
        },
        {
            "index": 1,
            "type": "text",
            "text": "Building Scalable APIs with Elixir",
            "font_name": "Inter",
            "font_size_in_px": 48,
            "text_color": "#FFFFFF",
            "font_weight": "Bold",
            "position": {"x": 80.0, "y": 120.0},
            "dimensions": {"width_in_px": 1040, "height_in_px": 200},
        },
        {
            "index": 2,
            "type": "text",
            "text": "A practical guide to designing fault-tolerant API services",
            "font_name": "Inter",
            "font_size_in_px": 24,
            "text_color": "#94A3B8",
            "position": {"x": 80.0, "y": 360.0},
            "dimensions": {"width_in_px": 1040, "height_in_px": 80},
        },
        {
            "index": 3,
            "type": "text",
            "text": "iterationlayer.com",
            "font_name": "Inter",
            "font_size_in_px": 20,
            "text_color": "#6366F1",
            "position": {"x": 80.0, "y": 530.0},
            "dimensions": {"width_in_px": 400, "height_in_px": 40},
        },
    ],
)

with open("result.png", "wb") as f:
    f.write(base64.b64decode(result["data"]["buffer"]))
package main

import (
    "encoding/base64"
    "os"

    il "github.com/iterationlayer/sdk-go"
)

func main() {
    client := il.NewClient("YOUR_API_KEY")

    result, err := client.GenerateImage(il.GenerateImageRequest{
        Dimensions:   il.Dimensions{WidthInPx: 1200, HeightInPx: 630},
        OutputFormat: "png",
        Layers: []il.Layer{
            il.NewSolidColorBackgroundLayer(0, "#0F172A"),
            il.NewTextLayer(1, "Building Scalable APIs with Elixir", "Inter", 48, "#FFFFFF",
                il.Position{X: 80.0, Y: 120.0}, il.Dimensions{WidthInPx: 1040, HeightInPx: 200}),
            il.NewTextLayer(2, "A practical guide to designing fault-tolerant API services", "Inter", 24, "#94A3B8",
                il.Position{X: 80.0, Y: 360.0}, il.Dimensions{WidthInPx: 1040, HeightInPx: 80}),
            il.NewTextLayer(3, "iterationlayer.com", "Inter", 20, "#6366F1",
                il.Position{X: 80.0, Y: 530.0}, il.Dimensions{WidthInPx: 400, HeightInPx: 40}),
        },
    })
    if err != nil {
        panic(err)
    }

    decoded, _ := base64.StdEncoding.DecodeString(result.Data.Buffer)
    os.WriteFile("result.png", decoded, 0644)
}

Related Recipes

Start building in minutes

Free trial credits included. No credit card required.