# Website Screenshot to Social Image (No Crop) (`bigaceboy/website-screenshot-to-social`) Actor Website screenshot API that turns any URL or HTML into ready-to-post images: Instagram 1080x1350, Pinterest pin, square, Story and Open Graph 1200x630. No cropping, rounded card or browser frame, dark mode, phone viewport, cookie banners hidden. $0.004 per image. AI agent and MCP ready. - **URL**: https://apify.com/bigaceboy/website-screenshot-to-social.md - **Developed by:** [Anthony Crawford](https://apify.com/bigaceboy) (community) - **Stats:** 2 total users, 1 monthly users, 0.0% runs succeeded, 0 bookmarks - **User rating**: No ratings yet ## Pricing from $4.00 / 1,000 image generateds This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events. Learn more: https://docs.apify.com/actors/running/actors-in-store.md#pay-per-event ## What's an Apify Actor? An Actor is a serverless cloud program that runs on the Apify platform. It has two run modes. In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours, and optionally produces a well-defined JSON output, datasets with results, or files in key-value store. In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server. Apify vocabulary and the platform model are defined once, in the agent quickstart at https://apify.com/agents.md. ## How to integrate an Actor? If asked about integration, you help developers integrate Actors into their projects. You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready. Do not guess an integration path. Every one of them is in the agent quickstart at https://apify.com/agents.md: the Apify MCP server, Agent Skills with the Apify CLI, the JavaScript and Python clients, the REST API, and the account-free path for an agent with no human to sign in. It also carries the rule on stating cost before the first paid run. For examples already wired to this Actor's own input schema, see the [API](#api) section below. Each client library has reference documentation the quickstart does not restate: [JavaScript/TypeScript](https://docs.apify.com/api/client/js/docs.md) (`npm install apify-client`) and [Python](https://docs.apify.com/api/client/python/docs.md) (`pip install apify-client`). # README **Turn any website screenshot into a ready-to-post social media image, without cropping.** Website Screenshot to Social Image opens a public web page (or your own HTML) in a real Chrome browser, takes the screenshot, and fits it into **Instagram portrait 1080×1350, Pinterest pin 1000×1500, square, Story 1080×1920 or an Open Graph / link-preview image 1200×630**, on a background color you choose, with an optional **rounded card + soft shadow** or **browser-window frame**. Cookie banners are hidden, dark mode and phone viewports are supported, and every image gets a direct download link. **$0.004 per image**, failed pages are free. Works from the Console, API, n8n, Make, Zapier and AI agents via the Apify MCP server. ### What can this website screenshot tool do? - 🌐 **URL to social image**: screenshot any public page (landing pages, app screens, blog posts, product pages, docs, changelogs). - 🧩 **HTML to image**: render your own HTML (quote cards, announcement cards, stats, mock tweets) and get PNG/JPG/WebP. - 📐 **Sizes**: `instagram-portrait` 1080×1350, `pinterest-pin` 1000×1500, `square` 1080×1080, `story` 1080×1920, `og-image` 1200×630 (link previews, X/LinkedIn cards), `raw` (plain screenshot), or `custom`. - 🖼️ **No cropping**: the screenshot is scaled to fit and padded with your background color (default warm cream `#F4EFE6`). - ✨ **Frame styles**: `rounded-shadow` (default), `browser` (window bar with the page address), `rounded`, `none`. - 🌙 **Dark mode** (`prefers-color-scheme: dark`), **retina** (device scale 2–3), custom **viewport** (phone or desktop), **full-page** capture with lazy-image scrolling. - 🍪 **Cookie banners hidden** (best effort: OneTrust, Cookiebot, Didomi, Quantcast, Usercentrics, generic fixed banners) plus your own `hideSelectors` and `customCss`. - 🛡️ **Safe by default**: only public http(s) addresses are fetched (private, loopback, link-local and cloud-metadata IPs are blocked; DNS is resolved and every redirect is checked). JavaScript is off for HTML snippets unless you turn it on. ### Who is it for? - **Marketers, indie makers and app builders** posting website or app screenshots to Instagram, Pinterest, X, LinkedIn or Facebook. - **AI agents and LLM apps** (via Apify MCP or API) that need to show "what this page looks like" or produce a share image for a link. - **Developers** generating OG images or changelog/announcement cards from HTML without running headless Chrome. ### How to turn a website screenshot into an Instagram post 1. Click **Try for free** (or **Start**) and sign in to Apify. 2. Paste one or more page links into **Web page URLs** (or put HTML into **HTML snippet**). 3. Pick **Output sizes**, e.g. *Instagram/Facebook portrait 1080×1350* and *Open Graph 1200×630*. 4. Choose a **Frame style** and **Background color**. 5. Click **Start**. The **Output** tab shows each image with its `imageUrl`. ### Input example ```json { "urls": ["https://www.wikipedia.org"], "presets": ["instagram-portrait", "og-image"], "frameStyle": "browser", "backgroundColor": "#F4EFE6" } ``` This creates 1 page × 2 sizes = **2 images = $0.008**. Phone-style screenshot for a Story: ```json { "urls": ["https://example.com"], "presets": ["story"], "viewportWidth": 390, "viewportHeight": 844, "deviceScaleFactor": 2, "frameStyle": "rounded-shadow" } ``` #### Main input fields | Field | Type | Default | Notes | | --- | --- | --- | --- | | `urls` | array of strings | – | Public web pages. | | `html` | string | – | One HTML document or fragment. | | `htmlSnippets` | array | – | Strings or `{ "name", "html" }` objects. | | `presets` | array | `["instagram-portrait","og-image"]` | `instagram-portrait`, `pinterest-pin`, `square`, `story`, `og-image`, `raw`, `custom`. | | `customWidth` / `customHeight` | integer | – | 64–6000 px, for `custom`. | | `frameStyle` | string | `rounded-shadow` | `rounded-shadow`, `browser`, `rounded`, `none`. | | `backgroundColor` | hex | `#F4EFE6` | | | `paddingPercent` | integer | `6` | 0–40. | | `cornerRadius` | integer | `18` | px. | | `outputFormat` | string | `png` | `png`, `jpg`, `webp`. | | `quality` | integer | `90` | jpg/webp. | | `viewportWidth` / `viewportHeight` | integer | `1280` / `800` | CSS px. Use e.g. 390×844 for a phone look. | | `fullPage` | boolean | `false` | Whole scrolling page (cut at `fullPageMaxHeight`, default 6000). | | `deviceScaleFactor` | integer | `1` | 2 = retina. | | `darkMode` | boolean | `false` | | | `hideCookieBanners` | boolean | `true` | Best effort. | | `waitUntil` | string | `load` | `load`, `domcontentloaded`, `networkidle`. | | `delayMillis` | integer | `1000` | Extra wait before the shot. | | `timeoutSecs` | integer | `45` | Per page. | | `hideSelectors` | array | – | CSS selectors to hide. | | `customCss` | string | – | Injected before the shot. | | `htmlJavaScript` | boolean | `false` | Run JS in HTML snippets. | ### Output example One dataset row per page × size; the image files are in the run's key-value store. ```json { "index": 0, "sourceType": "url", "source": "https://www.wikipedia.org", "finalUrl": "https://www.wikipedia.org/", "title": "Wikipedia", "preset": "instagram-portrait", "width": 1080, "height": 1350, "format": "png", "imageUrl": "https://api.apify.com/v2/key-value-stores//records/001-wikipedia.org-instagram-portrait.png", "status": "ok", "errorCode": null, "charged": true } ``` Error codes: `INVALID_INPUT`, `INVALID_URL`, `BLOCKED_URL`, `DNS_FAILED`, `HTTP_ERROR`, `FETCH_FAILED`, `NAVIGATION_FAILED`, `TIMEOUT`, `TOO_LARGE`, `RENDER_FAILED`, `SCREENSHOT_FAILED`, `PROCESSING_FAILED`. Error rows are never charged. ### How much does a website screenshot cost? | What you do | Images | Price | | --- | --- | --- | | 1 page → Instagram portrait | 1 | $0.004 | | 1 page → Instagram + Pinterest + OG image | 3 | $0.012 | | 50 pages → OG image | 50 | $0.20 | | 1,000 images | 1,000 | $4.00 | | Event | Price | When | | --- | --- | --- | | `image-generated` | **$0.004** | One output image (one page × one size) was saved. | | `apify-actor-start` | Apify's tiny standard start fee | Once per run. | Pages that fail (blocked, timeout, HTTP error) cost nothing, and runs stop cleanly at your maximum charge per run. Apify's free plan includes monthly platform credit, enough to try it many times. ### Use with AI agents (Apify MCP server) Load just this tool from the hosted [Apify MCP server](https://mcp.apify.com) in Claude, ChatGPT, Cursor, VS Code or any MCP client: ``` https://mcp.apify.com?tools=bigaceboy/website-screenshot-to-social ``` ```json { "mcpServers": { "website-screenshot": { "url": "https://mcp.apify.com?tools=bigaceboy/website-screenshot-to-social" } } } ``` Then ask: *"Screenshot my landing page and give me an Instagram post and a 1200×630 link preview with a browser frame."* The agent sends `urls` + `presets` and reads `imageUrl`. Every `imageUrl` is a direct public link, so vision models and chat apps can display it. ### Use with n8n, Make and Zapier - **n8n**: **Apify** node → *Actors* → **Run an Actor and Get Dataset** → Actor `bigaceboy/website-screenshot-to-social`, input `{ "urls": ["{{ $json.url }}"], "presets": ["instagram-portrait"] }`, then pass `imageUrl` to Buffer, Google Drive, Slack or your CMS. - **Make**: Apify → **Run an Actor** (wait for finish) → **Get Dataset Items** → map `imageUrl`. - **Zapier**: Apify → **Run Actor** (synchronous), then use `imageUrl`. ### Use with the API (curl, JavaScript, Python) ```bash curl -X POST "https://api.apify.com/v2/acts/bigaceboy~website-screenshot-to-social/run-sync-get-dataset-items" \ -H "Authorization: Bearer $APIFY_TOKEN" \ -H 'Content-Type: application/json' \ -d '{"urls":["https://www.wikipedia.org"],"presets":["og-image"],"frameStyle":"browser"}' ``` ```js import { ApifyClient } from 'apify-client'; const client = new ApifyClient({ token: process.env.APIFY_TOKEN }); const run = await client.actor('bigaceboy/website-screenshot-to-social').call({ urls: ['https://www.wikipedia.org'], presets: ['og-image'] }); const { items } = await client.dataset(run.defaultDatasetId).listItems(); console.log(items.map((i) => i.imageUrl)); ``` ```python from apify_client import ApifyClient client = ApifyClient("YOUR_APIFY_TOKEN") run = client.actor("bigaceboy/website-screenshot-to-social").call(run_input={"urls": ["https://www.wikipedia.org"], "presets": ["og-image"]}) for item in client.dataset(run["defaultDatasetId"]).iterate_items(): print(item["imageUrl"]) ``` ### FAQ #### How do I post a website screenshot on Instagram without it getting cropped? Use the `instagram-portrait` preset (1080×1350). The screenshot is fitted inside with a background around it. For a fuller portrait image, use a phone viewport (`viewportWidth: 390, viewportHeight: 844`) or `fullPage` with `pinterest-pin`/`story`. #### Can it make Open Graph (OG) images? Yes: the `og-image` preset is 1200×630, the size used for link previews on Facebook, LinkedIn, X and Slack. For custom OG cards, render your own HTML in `html`. #### Can it take full-page screenshots? Yes, set `fullPage: true` (scrolls to load lazy images; very long pages are cut at `fullPageMaxHeight`). Tall pages look small in wide sizes, so combine with `pinterest-pin` or `story`, or use `raw`. #### Does it remove cookie popups? It hides the common consent banners automatically (best effort). For anything else, add CSS selectors to `hideSelectors`. #### Can it screenshot pages behind a login? No, only public pages. For private content, render the HTML yourself via `html`. #### Is it a general website screenshot API? Yes. Use the `raw` preset to get the plain screenshot at its own size, or `custom` for exact dimensions. ### Other tools by this developer | Tool | What it does | Price | | --- | --- | --- | | [Social Image Resizer (No Crop)](https://apify.com/bigaceboy/social-image-letterboxer) | Fit photos into Instagram/Pinterest/Story sizes without cropping | $0.005 / image | | [Image Optimizer & Converter](https://apify.com/bigaceboy/image-optimizer-converter) | Compress images to WebP/AVIF/JPG, target KB size, strip GPS | $0.002 / image | | [Markdown & HTML to PDF Converter](https://apify.com/bigaceboy/markdown-html-to-pdf) | Turn Markdown, HTML or a URL into a clean PDF | $0.004 / PDF | ### Tips and limits - Up to 200 pages and 1,000 output images per run; HTML snippets up to 2 million characters. - Some sites block automated browsers or show popups that can't be removed; use `hideSelectors` for site-specific overlays. - Only screenshot pages you have the right to use. - Questions or feature requests: use the **Issues** tab. # Actor input Schema ## `urls` (type: `array`): Public http(s) pages to screenshot. Private, localhost and cloud-metadata addresses are blocked (DNS is resolved and every redirect is checked). ## `html` (type: `string`): Optional. One HTML document or fragment to render and screenshot (quote cards, charts, mock tweets, invoices). JavaScript is off for HTML unless you enable it under Advanced. ## `htmlSnippets` (type: `array`): Optional list of HTML strings, or objects like {"name": "quote-1", "html": "

Hi

"}. Combined with URLs and the HTML snippet. ## `presets` (type: `array`): Sizes to create for every page. instagram-portrait 1080×1350, pinterest-pin 1000×1500, square 1080×1080, story 1080×1920, og-image 1200×630 (link previews, X/LinkedIn cards), raw = the plain screenshot at its own size. 'custom' uses Custom width/height. Each selected size is one billable image. ## `customWidth` (type: `integer`): Width for the 'custom' size (64–6000). Setting width and height adds a custom output. ## `customHeight` (type: `integer`): Height for the 'custom' size (64–6000). ## `frameStyle` (type: `string`): How the screenshot sits on the background. rounded-shadow = rounded corners + soft drop shadow (default), browser = adds a simple browser-window bar with the page address, rounded = corners only, none = plain rectangle. ## `backgroundColor` (type: `string`): Hex color behind the screenshot, e.g. #F4EFE6 (warm cream, default), #FFFFFF or #111111. ## `paddingPercent` (type: `integer`): Space around the screenshot as a percent of the output width/height. 0–40. ## `cornerRadius` (type: `integer`): Rounded-corner radius in output pixels (frame styles other than none). ## `outputFormat` (type: `string`): png is sharpest for text; jpg and webp are smaller. ## `viewportWidth` (type: `integer`): Browser window width in CSS pixels. 1280 = laptop, 390 = phone. ## `viewportHeight` (type: `integer`): Browser window height in CSS pixels (the visible area captured when Full page is off). ## `fullPage` (type: `boolean`): Capture the whole scrolling page instead of just the visible window (scrolls first to load lazy images). Tall pages look small in social sizes; combine with pinterest-pin or story. ## `fullPageMaxHeight` (type: `integer`): Very long pages are cut at this height (CSS pixels). ## `deviceScaleFactor` (type: `integer`): 1 = normal, 2 = retina (sharper text, slower, bigger raw files). ## `darkMode` (type: `boolean`): Ask the page for its dark color scheme (prefers-color-scheme: dark). Only works on sites that support it. ## `hideCookieBanners` (type: `boolean`): Best-effort: hides common cookie/consent popups (OneTrust, Cookiebot, Didomi, Quantcast, Usercentrics and generic fixed banners). ## `waitUntil` (type: `string`): When the page counts as loaded. ## `delayMillis` (type: `integer`): Extra wait after load before the screenshot (animations, fonts, late content). ## `timeoutSecs` (type: `integer`): Give up on a page after this long (not charged). ## `hideSelectors` (type: `array`): CSS selectors to hide before the screenshot, e.g. ".chat-widget", "#promo-bar". ## `customCss` (type: `string`): Extra CSS injected into the page before the screenshot. ## `htmlJavaScript` (type: `boolean`): Off by default for safety. Turn on for snippets that draw charts with JS. ## `quality` (type: `integer`): jpg/webp quality (1–100). Ignored for png. ## Actor input object example ```json { "urls": [ "https://www.wikipedia.org" ], "html": "
“Ship small, ship often.”
", "htmlSnippets": [ { "name": "quote-1", "html": "

Hello

" } ], "presets": [ "instagram-portrait", "og-image" ], "customWidth": 1600, "customHeight": 900, "frameStyle": "browser", "backgroundColor": "#F4EFE6", "paddingPercent": 6, "cornerRadius": 18, "outputFormat": "png", "viewportWidth": 1280, "viewportHeight": 800, "fullPage": false, "fullPageMaxHeight": 6000, "deviceScaleFactor": 1, "darkMode": false, "hideCookieBanners": true, "waitUntil": "load", "delayMillis": 1000, "timeoutSecs": 45, "hideSelectors": [ ".chat-widget", "#promo-bar" ], "customCss": "header { position: static !important; }", "htmlJavaScript": false, "quality": 90 } ``` # Actor output Schema ## `results` (type: `string`): Dataset rows: index, source, preset, width, height, imageUrl, status, errorCode, error, charged. ## `files` (type: `string`): Keys of the generated images saved in the default key-value store. # API You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup. ## JavaScript example ```javascript import { ApifyClient } from 'apify-client'; // Initialize the ApifyClient with your Apify API token // Replace the '' with your token const client = new ApifyClient({ token: '', }); // Prepare Actor input const input = { "urls": [ "https://example.com" ] }; // Run the Actor and wait for it to finish const run = await client.actor("bigaceboy/website-screenshot-to-social").call(input); // Fetch and print Actor results from the run's dataset (if any) console.log('Results from dataset'); console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`); const { items } = await client.dataset(run.defaultDatasetId).listItems(); items.forEach((item) => { console.dir(item); }); // 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs ``` ## Python example ```python from apify_client import ApifyClient # Initialize the ApifyClient with your Apify API token # Replace '' with your token. client = ApifyClient("") # Prepare the Actor input run_input = { "urls": ["https://example.com"] } # Run the Actor and wait for it to finish run = client.actor("bigaceboy/website-screenshot-to-social").call(run_input=run_input) # Fetch and print Actor results from the run's dataset (if there are any) print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}") for item in client.dataset(run.default_dataset_id).iterate_items(): print(item) # 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start ``` ## CLI example ```bash echo '{ "urls": [ "https://example.com" ] }' | apify call bigaceboy/website-screenshot-to-social --silent --output-dataset ``` ## MCP server setup ```json { "mcpServers": { "apify": { "type": "http", "url": "https://mcp.apify.com/?tools=fetch-actor-details,bigaceboy/website-screenshot-to-social" } } } ``` The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer ` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations). ## OpenAPI specification Download the OpenAPI definition: https://api.apify.com/v2/actors/e3bs7VS6o1dksh7ch/builds/VGMfoInzt2ViWoOpj/openapi.json