Dokumentacja Shareglint

Wysyłasz JSON, dostajesz adres gotowego PNG. Bez przeglądarki po Twojej stronie.

Kontrakt w formie maszynowej: /openapi.json (OpenAPI 3.1 — import do Postmana, generowanie klientów).

Pierwszy render

Potrzebujesz klucza: załóż konto (bez karty, 100 obrazków miesięcznie) — klucz pokaże się od razu po rejestracji. Trzy szablony startowe dostajesz razem z kontem, więc poniższe żądanie zadziała bez żadnej konfiguracji.

?wait=true mówi, że chcesz poczekać na obrazek zamiast odpytywać o wynik.

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "blog-og",
    "locale": "pl",
    "modifications": {
      "title": "Dziesięć rzeczy, które psują sen",
      "author": "Anna Kowalska",
      "site": "twojblog.pl",
      "accent": "#f97316"
    }
  }'

$response = Http::withToken('sk_live_TWOJ_KLUCZ')
    ->post('https://shareglint.com/v1/images?wait=true', [
        'template' => 'blog-og',
        'locale' => 'pl',
        'modifications' => [
            'title' => 'Dziesięć rzeczy, które psują sen',
            'author' => 'Anna Kowalska',
            'site' => 'twojblog.pl',
        ],
    ]);

$url = $response->json('url');

const res = await fetch('https://shareglint.com/v1/images?wait=true', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer sk_live_TWOJ_KLUCZ',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    template: 'blog-og',
    locale: 'pl',
    modifications: {
      title: 'Dziesięć rzeczy, które psują sen',
      author: 'Anna Kowalska',
      site: 'twojblog.pl',
    },
  }),
});

const { url } = await res.json();

import requests

res = requests.post(
    "https://shareglint.com/v1/images?wait=true",
    headers={"Authorization": "Bearer sk_live_TWOJ_KLUCZ"},
    json={
        "template": "blog-og",
        "locale": "pl",
        "modifications": {
            "title": "Dziesięć rzeczy, które psują sen",
            "author": "Anna Kowalska",
            "site": "twojblog.pl",
        },
    },
)

url = res.json()["url"]

Uwierzytelnianie

Klucz w nagłówku Authorization: Bearer sk_live_…. Klucze wydajesz i odwołujesz przez /v1/keys albo w panelu.

Pełny klucz pokazujemy dokładnie raz, przy wydaniu — w bazie trzymamy tylko jego skrót. Zgubionego nie odzyskasz, wydajesz nowy i odwołujesz stary.

Ostatniego aktywnego klucza nie da się odwołać. To celowe: bez działającego klucza nie wydasz kolejnego i zamkniesz sobie konto od środka.

Async i sync

Tryb synchroniczny ma własne zasoby, oddzielone od kolejki asynchronicznej — zalew zadań w tle nie zagłodzi klienta czekającego na połączeniu. Gdy mimo to nie zdążymy w oknie czasowym, dostajesz 503 z kodem sync_overloaded. Zlecenie wtedy nie przepada: w ciele jest id, więc możesz odpytać o wynik jak w trybie asynchronicznym.

Formaty plików

Dodaj format do ciała żądania: png (domyślnie), jpeg, webp albo pdf. Przy jpeg i webp quality (1–100, domyślnie 85) ustawia kompresję. Przy każdym formacie rastrowym scale wybiera gęstość pikseli: 2 (domyślnie) daje 2400×1260 dla szablonu 1200×630, 1 — dokładnie 1200×630, czyli mniejszy plik, który wciąż spełnia wymagania og:image każdego serwisu.

{ "template": "blog-og", "format": "jpeg", "quality": 80, "scale": 1, "modifications": { "title": "…" } }

pdf to jedna strona dokładnie w wymiarach szablonu w pikselach CSS (1200×630 dla szablonów wbudowanych), bez marginesów, z wydrukowanym tłem. Tekst zostaje wektorowy — ostry przy każdym powiększeniu i do zaznaczenia. quality i scale go nie dotyczą.

Format jest częścią tożsamości obrazka: te same wartości jako PNG i jako JPEG to dwa pliki i dwa rendery. Parametr, który pliku nie zmienia — quality przy PNG, scale przy PDF — nigdy nie wywoła drugiego renderu. Odpowiedź i GET /v1/images/{id} mają pole format, a adres pliku kończy się na .png, .jpg, .webp albo .pdf. W planie Free znak wodny jest w każdym formacie, także w PDF.

Idempotencja

Dołóż nagłówek Idempotency-Key (dowolny UUID). Powtórzone żądanie z tym samym kluczem i tym samym ciałem zwróci tę samą odpowiedź, bez drugiego renderu i bez drugiego odliczenia z limitu.

Ten sam klucz z innym ciałem to 422 — to prawie zawsze błąd po stronie integracji, a nie zamiar.

Niezależnie od tego identyczny render drugi raz i tak nie kosztuje: ten sam szablon z tymi samymi wartościami zwraca istniejący obrazek i nie zużywa limitu.

Błędy i limity

Pole error to stały kod maszynowy — buduj na nim swój switch. Pole message jest dla człowieka i zmienia język zależnie od nagłówka Accept-Language (obsługujemy en, pl, de, es, fr).

Jak długo żyją obrazki

Gotowe pliki nie leżą u nas wiecznie i mówimy o tym wprost, bo adres z naszej odpowiedzi trafia zwykle prosto do cudzego og:image.

Po tym czasie znika plik i wpis w historii. Znaczy to również, że ten sam render zamówiony ponownie nie trafi już w cache i policzy się do limitu drugi raz. Jeśli obrazek ma żyć dłużej niż my go trzymamy, pobierz go do siebie od razu po wygenerowaniu — adres jest zwykłym plikiem PNG.

Własne szablony

Wysyłasz swój HTML i CSS. Pola wstawiasz jako {{ nazwa }} i deklarujesz je w fields. Niezadeklarowane pole to błąd przy zapisie, a nie puste miejsce w gotowym obrazku.

{
    "name": "Karta wydarzenia",
    "fields": [
        "headline",
        "place",
        "photo"
    ],
    "images": [
        "photo"
    ],
    "css": "body{background:#111827;color:#f9fafb;padding:72px;font-family:Roboto}",
    "html": "<div class=\"fitbox\"><h1 class=\"fit\" data-autofit>{{ headline }}</h1></div><span>{{ place }}</span>"
}

Kilka rzeczy warto wiedzieć zawczasu:

• HTML jest czyszczony przy zapisie — <script>, <iframe> i atrybuty on* znikają. Odpowiedź zawiera wersję po czyszczeniu, więc od razu widzisz, co realnie się wyrenderuje.
• CSS traci @import, @font-face i url() spoza data:. Zasoby z sieci i tak nie zostałyby pobrane.
• Fonty wybierasz z naszej listy. Wartości pól są escapowane, więc treść użytkownika nigdy nie stanie się znacznikiem.
• Adresy obrazków pobieramy my i wklejamy jako dane — dlatego pole z obrazkiem musi być wymienione w images.

Podgląd nie zużywa limitu, więc iterowanie nad wyglądem nic nie kosztuje.

Szablony wbudowane

Każde konto renderuje je po samym slugu, bez konfiguracji — "template": "job-posting" po prostu działa. Każde pole jest opcjonalne; accent (kolor hex) i theme (dark albo light) działają we wszystkich. Podglądy i przykłady dla każdego są w galerii szablonów.

GET /v1/templates/library zwraca tę samą listę w JSON-ie, z wartościami domyślnymi, przykładowymi i adresem podglądu. Szablonów wbudowanych nie edytujesz; POST /v1/templates/library/{slug}/copy zakłada z jednego z nich zwykły szablon HTML na Twoim koncie, z tymi samymi polami, który potem zmieniasz przez PATCH /v1/templates/{id}. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje, więc Twoje dotychczasowe wywołania przechodzą na Twoją wersję; jeśli nie — dostaje końcówkę -copy (albo podaj własne slug i name). Szablon konta zawsze wygrywa z wbudowanym o tym samym slugu.

Auto-dopasowanie tekstu

Prędzej czy później ktoś wstawi tytuł na 200 znaków w pole zaprojektowane na 60. Dodaj data-autofit elementowi wewnątrz kontenera .fitbox — zmniejszymy czcionkę, aż tekst się zmieści. Dolną granicę ustawiasz przez data-autofit-min.

<div class="fitbox">
  <h1 class="fit" data-autofit data-autofit-min="36">{{ title }}</h1>
</div>

Edytor wizualny

Nie piszesz CSS? Złóż szablon w edytorze wizualnym w panelu: zacznij od gotowego układu, dodaj warstwy tekstu, obrazka i kształtu, przeciągnij je na miejsce (z przyciąganiem do krawędzi i środków), ustaw kroje, kolory, gradienty, zaokrąglenia i krycie, a przycisk Podgląd pokaże prawdziwy PNG wyrenderowany przez Chrome — podgląd nie zużywa limitu.

Dowolną warstwę tekstu połączysz z nazwą pola — wpisany tekst staje się wtedy przykładem i wartością domyślną pola; {{ name }} możesz też wpisać w dowolnym miejscu tekstu. Warstwa obrazka bierze albo adres obrazka przy każdym renderze (pole obrazka), albo wgrany plik. fields i images edytor deklaruje sam.

Edytor kompiluje warstwy do zwykłego HTML i CSS, które przechodzą przez ten sam sanityzator i tę samą ścieżkę renderu co szablony pisane ręcznie — wywołujesz go przez "template": "twoj-slug" jak każdy inny. Wgrane obrazki są osadzone w CSS, więc razem muszą się zmieścić w około 48 KB — edytor sam je kompresuje; zdjęcia zmienne przy każdym obrazku podawaj przez pole obrazka.

Ręczna edycja szablonu z edytora (w edytorze kodu albo przez PATCH /v1/templates) przełącza go w tryb kodu: od tej chwili to zwykły HTML i CSS, a edytor wizualny go nie otwiera.

Szablon wygenerowany przez AI

Opisz obrazek jednym-dwoma zdaniami albo wgraj zrzut ekranu projektu, który ci się podoba, a POST /v1/templates/generate odda gotowy szablon: HTML, CSS, fields, przykładowe defaults i adres darmowego podglądu. To propozycja — nic się nie zapisuje, dopóki nie wyślesz jej (bez zmian albo po poprawkach) na POST /v1/templates. W panelu przycisk Wygeneruj z AI wypełnia za ciebie edytor kodu.

curl https://shareglint.com/v1/templates/generate \
  -H "Authorization: Bearer sk_live_…" \
  -F description="Dark blog card, big white title, author at the bottom, purple accent" \
  -F image=@design.png

Odpowiedź przechodzi dokładnie tę samą walidację i ten sam sanityzator co szablon pisany ręcznie: tylko nasze fonty, pola {{ pole }}, .fitbox/data-autofit na długie tytuły, bez skryptów i bez zewnętrznych adresów. Szablony mają 1200×630.

Tylko plany płatne (Starter 20, Pro 50, Scale 100 generowań dziennie, odnawiane o północy UTC); Free dostaje 403 plan_required, limit dzienny — 429 ai_daily_limit. Gdy zawiedzie dostawca AI, dostajesz 502 ai_failed i nic się nie liczy. Obraz to PNG, JPEG albo WebP do 4 MB, wysyłany jako multipart image; opisu ani obrazu nie trzymamy po zakończeniu żądania.

Webhooki

Podaj webhook_url przy zlecaniu renderu, a zawiadomimy Cię, gdy się skończy — zamiast odpytywania w pętli.

{
    "event": "image.completed",
    "id": "img_01m08s3ez1zcv28h335g9923bw",
    "status": "completed",
    "url": "https://cdn.yourdomain.com/renders/img_01m08s3ez1zcv28h335g9923bw.png",
    "error": null,
    "created_at": "2026-08-17T21:13:54+00:00"
}

Każde wywołanie ma nagłówki X-Webhook-Timestamp i X-Webhook-Signature. Sekret do weryfikacji znajdziesz w panelu albo pod GET /v1/account; wymienisz go przez POST /v1/account/webhook-secret. Podpis liczymy z obu wartości, żeby podsłuchanego wywołania nie dało się odtworzyć:

$expected = hash_hmac('sha256', $timestamp . '.' . $rawBody, $webhookSecret);

if (! hash_equals($expected, $request->header('X-Webhook-Signature'))) {
    abort(400);
}

Ponawiamy pięć razy z narastającym odstępem, więc chwilowa awaria po Twojej stronie nie gubi zdarzenia. Adres w sieci prywatnej odrzucamy od razu, kodem 422 — zamiast przyjąć zlecenie, policzyć je do limitu i po cichu nie zadzwonić.

Podpisane adresy obrazków (bez kodu po stronie serwera)

Adres, który wklejasz wprost w og:image — dla stron statycznych, Webflow, Shopify, motywów Ghosta i narzędzi no-code, gdzie nie da się trzymać klucza API ani wysłać POST-a. Pola szablonu idą w query stringu, a parametr s to podpis zrobiony Twoim sekretem podpisującym. Dostępne w każdym planie, także Free.

<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/blog-og.png?title=Ten%20things%20that%20ruin%20your%20sleep&s=…">

Pierwsze żądanie renderuje obrazek (około sekundy), zużywa jeden render z limitu dokładnie tak jak POST /v1/images i odpowiada przekierowaniem 302 na gotowy plik. Każde kolejne żądanie o ten sam szablon z tymi samymi wartościami to 302 na istniejący plik — bez renderu i bez limitu. Przekierowanie da się cache'ować przez godzinę (sam plik przez rok), więc roboty co jakiś czas wracają przez nas — i każda taka wizyta trafia do statystyk wyświetleń.

Jak podpisać

1. Ścieżka: /i/{account_id}/{template}.{ext} — id Twojego konta (acc_…, jawne, to nie jest poświadczenie), slug szablonu i rozszerzenie, o które prosisz. Bez hosta. Rozszerzenie wybiera format: .png, .jpg, .webp (jakość 85) albo .pdf; rastry mają 2× wymiary szablonu. Rozszerzenie jest częścią podpisanej ścieżki, więc podpisz dokładnie ten adres, który publikujesz — podpis dla .png nie otworzy .jpg.
2. Weź wszystkie parametry query poza s (pola szablonu i opcjonalne locale), posortuj je po nazwie (kolejność bajtowa), zakoduj nazwę i wartość wg RFC 3986 — wszystko poza A–Z a–z 0–9 - _ . ~, więc spacja to %20 — i złącz jako nazwa=wartość znakiem &.
3. Kanon = ścieżka + ? + złączone parametry. ? zostaje nawet bez parametrów.
4. s = pierwsze 32 znaki hex (małymi literami) z HMAC-SHA256(kanon, signing_secret) (128 bitów — przy naszych limitach żądań zgadywanie nie ma sensu, a adres jest o połowę krótszy).
5. Dopisz s do adresu. Sam adres może mieć parametry w dowolnej kolejności i spację jako + albo %20: dekodujemy go i składamy kanon sami. Wartości podpisujesz dokładnie takie, jakie wysyłasz — niczego nie przycinamy.

Sprawdź swoją implementację tym wektorem testowym, zanim wkleisz cokolwiek w og:image:

secret     sign_example
path       /i/acc_01k8example0000000000000000/blog-og.png
params     title=Hello, world!   author=Ann & Bob   locale=en
canonical  /i/acc_01k8example0000000000000000/blog-og.png?author=Ann%20%26%20Bob&locale=en&title=Hello%2C%20world%21
s          cdc6c6ad85a071f083b5f1374b0a6d98

PHP

function signedImageUrl(string $accountId, string $template, array $params, string $secret, string $ext = 'png'): string
{
    $path = "/i/{$accountId}/{$template}.{$ext}"; // png, jpg, webp or pdf

    ksort($params, SORT_STRING);
    $query = implode('&', array_map(
        fn ($name, $value) => rawurlencode((string) $name).'='.rawurlencode((string) $value),
        array_keys($params),
        $params,
    ));

    $s = substr(hash_hmac('sha256', $path.'?'.$query, $secret), 0, 32);

    return 'https://shareglint.com'.$path.'?'.($query === '' ? '' : $query.'&').'s='.$s;
}

echo signedImageUrl('acc_YOUR_ACCOUNT_ID', 'blog-og', [
    'title' => 'Ten things that ruin your sleep',
    'author' => 'Anna Kowalska',
], getenv('SHAREGLINT_SIGNING_SECRET'));

JavaScript (Node)

import { createHmac } from 'node:crypto';

// encodeURIComponent leaves !'()* alone; RFC 3986 (and PHP's rawurlencode) does not.
const enc = (v) => encodeURIComponent(String(v))
  .replace(/[!'()*]/g, (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase());

export function signedImageUrl(accountId, template, params, secret, ext = 'png') {
  const path = `/i/${accountId}/${template}.${ext}`; // png, jpg, webp or pdf
  const query = Object.keys(params).sort()
    .map((name) => `${enc(name)}=${enc(params[name])}`)
    .join('&');
  const s = createHmac('sha256', secret).update(`${path}?${query}`).digest('hex').slice(0, 32);

  return `https://shareglint.com${path}?${query ? query + '&' : ''}s=${s}`;
}

console.log(signedImageUrl('acc_YOUR_ACCOUNT_ID', 'blog-og', {
  title: 'Ten things that ruin your sleep',
  author: 'Anna Kowalska',
}, process.env.SHAREGLINT_SIGNING_SECRET));

Narzędzia no-code

Podpisze wszystko, co ma funkcję HMAC-SHA256: krok z kodem JavaScript w Zapierze, Pipedream i podobnych (dostosuj JavaScript z góry), węzeł Crypto w n8n (akcja Hmac, typ SHA256, kodowanie hex — potem pierwsze 32 znaki) albo krok budowania generatora stron statycznych. Kanon składasz dokładnie jak w krokach wyżej. Nigdy nie podpisuj w JavaScripcie przeglądarki: sekret stałby się publiczny.

Warto wiedzieć

• Sekret podpisujący i id konta znajdziesz w panelu i pod GET /v1/account (signing_secret, id). To osobny sekret niż klucze API i sekret webhooków: jego wyciek nie daje nikomu dostępu do API — ale pozwala renderować na Twój limit.
• Wymienisz go przez POST /v1/account/signing-secret. Każdy adres podpisany starym sekretem przestaje działać natychmiast, także już opublikowane. Przekierowania zapamiętane przez roboty i CDN mogą żyć jeszcze do 1 h.
• Ostrzej niż w API POST: pole, którego szablon nie deklaruje, to 400 — literówka nie wypuści po cichu obrazka bez tytułu. Twoje szablony przyjmują fields i images; wbudowane — swoje udokumentowane pola oraz accent i theme.
• Błędy to krótki text/plain, nigdy HTML: 400 nieznane pole albo locale, 402 wyczerpany limit, 403 brak albo zły podpis, 404 nieznane konto albo szablon (nie do odróżnienia), 429 limit żądań, 503 render jeszcze trwa — ponów po Retry-After.
• Limity: 120 poprawnie podpisanych żądań na minutę na konto (żądania ze złym podpisem nigdy nie liczą się do Twojego) i 600 żądań na minutę z jednego adresu IP.

Obrazki auto OG (jeden tag, bez kodu)

Dodaj domenę w panelu (albo przez POST /v1/auto-og/sites) i wstaw jeden tag do szablonu strony. Dla każdej podstrony pobieramy ją, czytamy tytuł, opis, nazwę witryny, ikonę, og:image i theme-color i renderujemy kartę szablonem site-card — albo twoim własnym.

<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https%3A%2F%2Fexample.com%2Fblog%2Fhello-world">
<meta name="twitter:card" content="summary_large_image">

• Rozszerzenie wybiera format: .png, .jpg albo .webp. Adres strony idzie zakodowany po ?url=. Podpisu nie ma: obrazki dostają tylko strony z dozwolonych domen (i ich subdomen), każdy inny host to 403.
• Obrazek jest w cache według tego, co jest na karcie, a nie według adresu: niezmieniona strona nigdy nie zużywa limitu drugi raz, nawet udostępniona z ?utm_source=… albo pod innym adresem z tym samym <link rel="canonical">. Stronę czytamy ponownie najwyżej co 60 min, więc nowy tytuł pojawia się najpóźniej po tym czasie.
• Query string jest domyślnie odcinany (linki śledzące zamieniałyby inaczej jedną stronę w wiele renderów). Włącz keep_query dla domeny, której strony różnią się parametrami; utm_*, fbclid, gclid i podobne odpadają i tak.
• Gdy strony nie da się przeczytać (strona błędu, przekroczony czas, nie HTML, przekierowanie poza domenę), dostajesz kartę z samą nazwą witryny zamiast zepsutego obrazka — tę samą dla każdej takiej strony domeny, więc kosztuje jeden render.
• Własny szablon dostaje te z pól title, description, site, url, favicon, image, accent i theme, które deklaruje. Szablon, kolor akcentu i motyw ustawiasz osobno dla każdej domeny.
• Nowa karta zużywa jeden render z limitu, tak samo jak POST /v1/images. Błędy to krótkie teksty text/plain: 400 zły url, 402 wyczerpany limit, 403 domena spoza listy, 404 nieznane konto, 429 limit żądań. Limity: 120 żądań na minutę na konto, 600 na adres IP.

Fragmenty dla twojej platformy:

HTML

Dowolna strona: tag w <head> każdej podstrony, z jej adresem zakodowanym po ?url=. Generatory stron statycznych wstawią go ze zmiennej z adresem strony.

<!-- In the <head> of each page, with that page's own address -->
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https%3A%2F%2Fyour-site.com%2Fpricing">
<meta name="twitter:card" content="summary_large_image">

WordPress

Dodaj do functions.php motywu potomnego albo wtyczką do fragmentów kodu. Jeśli wtyczka SEO (Yoast, Rank Math) już wypisuje og:image, wyłącz w niej obrazek, żeby strona miała tylko jeden.

// functions.php of your (child) theme, or a code-snippets plugin
add_action('wp_head', function () {
    global $wp;
    $page = is_singular() ? wp_get_canonical_url() : home_url(user_trailingslashit($wp->request));
    $image = 'https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=' . rawurlencode($page);

    echo '<meta property="og:image" content="' . esc_attr($image) . '">' . "\n";
    echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
}, 1);

Shopify

Sklep internetowy → Motywy → Edytuj kod. Zamień linie og:image w snippets/meta-tags.liquid (albo w layout/theme.liquid). canonical_url działa na produktach, kolekcjach, stronach i wpisach bloga.

{%- comment -%} snippets/meta-tags.liquid — replace the og:image lines {%- endcomment -%}
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url={{ canonical_url | url_encode }}">
<meta property="og:image:secure_url" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url={{ canonical_url | url_encode }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

Ghost

Edytuj default.hbs motywu i wstaw tagi nad {{ghost_head}}. Code injection w panelu Ghosta nie wykonuje Handlebars, więc nie wstawi adresu strony.

{{!-- default.hbs, in <head> ABOVE {{ghost_head}} --}}
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url={{url absolute="true"}}">
<meta name="twitter:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url={{url absolute="true"}}">
<meta name="twitter:card" content="summary_large_image">

Hugo

Wstaw do partiala, który składa <head>. .Permalink to pełny adres strony, urlquery go koduje.

{{/* layouts/partials/head.html (or the <head> of baseof.html) */}}
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url={{ .Permalink | urlquery }}">
<meta name="twitter:card" content="summary_large_image">

Webflow

Na stronie szablonu CMS: Page settings → Custom code → Inside <head> tag, z polem Slug wstawionym w miejsce SLUG. Strony statyczne: ten sam tag z adresem strony.

<!-- CMS template page → Page settings → Custom code → Inside <head> tag.
     Replace SLUG with the Slug field (“+ Add field”). -->
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://your-site.com/blog/SLUG">
<meta name="twitter:card" content="summary_large_image">

Wix

Dla każdej strony: SEO basics → Advanced SEO → Additional tags. Po ?url= adres tej strony.

<!-- Page → SEO basics → Advanced SEO → Additional tags, per page -->
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://your-site.com/about">

Framer

Dla każdej strony: Page settings → Custom Code → End of <head>, z adresem tej strony. Usuń własny obrazek społecznościowy strony, żeby został jeden og:image.

<!-- Page settings → Custom Code → End of <head>, per page -->
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://your-site.com/features">
<meta name="twitter:card" content="summary_large_image">

Screenshot API — zrzuty stron

Wysyłasz publiczny adres, dostajesz PNG, JPEG, WebP albo PDF strony — sam widok albo całą przewijaną stronę, z ustawieniami urządzeń, trybem ciemnym, dodatkowym czekaniem, selektorem, na który czekamy, selektorami do ukrycia i małym filtrem reklam i banerów cookie. Tryby jak przy obrazkach: domyślnie asynchronicznie, ?wait=true, żeby poczekać (do 25 s), webhook_url, żebyśmy zawołali (screenshot.completed / screenshot.failed).

curl -X POST "https://shareglint.com/v1/screenshots?wait=true" \
  -H "Authorization: Bearer sk_live_…" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "full_page": true, "format": "webp", "block_ads": true}'

Zrzut widoku zużywa 1 render z limitu, zrzut całej strony 2. Ten sam adres z tymi samymi opcjami w ciągu 24 h oddaje gotowy plik za darmo. Strona, która się nie uda — status 4xx/5xx, przekroczony czas, zablokowany adres — kończy się status: failed z powodem, a limit wraca. Na planie Free zrzuty mają tę samą małą plakietkę „Made with” co obrazki.

Nie masz serwera? Podpisz adres tak samo jak adresy obrazków, ze ścieżką /s/{account_id}.{ext} i opcjami w query stringu (hide po przecinku), i wstaw go w <img> albo og:image:

<img src="https://shareglint.com/s/acc_YOUR_ACCOUNT_ID.png?url=https%3A%2F%2Fexample.com&device=mobile&s=…">

• Zrzuty robi osobna pula przeglądarek w odizolowanej sieci: jedyne wyjście to proxy wyjściowe, które przepuszcza tylko adresy publiczne na portach 80 i 443. Przekierowania, ramki, obrazki i skrypty prowadzące do adresów prywatnych, pętli zwrotnej, link-local (metadane chmury) i innych wewnętrznych są odrzucane po rozwiązaniu DNS — przekierowanie na 127.0.0.1 albo domena z rebindingiem kończy się tak samo jak wpisany wprost adres prywatny.
• Limity: widok 320–3840 × 200–2160 px, cała strona do 16,000 px wysokości, delay do 10 s, 20 s na stronę.

MCP: Claude, ChatGPT, Cursor

API jest też zdalnym serwerem Model Context Protocol, więc asystent AI może za ciebie renderować obrazki, przeglądać szablony, budować podpisane adresy do og:image i sprawdzać limit. Adres (streamable HTTP): https://shareglint.com/mcp. Dwie drogi, jedno konto: aplikacje czatowe (Claude, ChatGPT) logują się przez OAuth — logujesz się do Shareglint i zatwierdzasz aplikację; narzędzia programistyczne i twój kod wysyłają klucz API w nagłówku Authorization: Bearer sk_live_…. W obu przypadkach to samo konto, ten sam limit i te same ograniczenia co /v1.

Narzędzia: render_image, get_image, list_templates, get_template, create_signed_url, get_usage, take_screenshot i generate_template (plany płatne). Błędy wracają jako {"error": kod, "message": …} z tymi samymi kodami co w API HTTP.

Claude i ChatGPT (logowanie OAuth)

Claude (przeglądarka, aplikacja na komputer i telefon): Settings → Connectors → Add custom connector, nazwa Shareglint, adres https://shareglint.com/mcp, potem Connect. Trafisz na logowanie do Shareglint i ekran zgody; po zatwierdzeniu narzędzia pojawią się w czacie. W planach Team i Enterprise konektor najpierw dodaje właściciel organizacji.

ChatGPT (przestrzenie Business, Enterprise i Edu): Settings → Connectors → Create, adres https://shareglint.com/mcp, uwierzytelnienie OAuth, potem logowanie i zgoda tak samo. Administrator przestrzeni może najpierw musieć zezwolić na własne konektory.

Połączone aplikacje widać w ustawieniach konta — każdą można odłączyć, a jej tokeny od razu przestają działać. Access token żyje dobę i odświeża się sam. Klienci OAuth znajdą resztę (dynamiczna rejestracja klienta, kod autoryzacji z PKCE) pod https://shareglint.com/.well-known/oauth-protected-resource/mcp.

Cursor, Claude Code, VS Code i kod (klucz API)

Claude Code:

claude mcp add --transport http shareglint https://shareglint.com/mcp \
  --header "Authorization: Bearer sk_live_…"

Cursor (~/.cursor/mcp.json), VS Code i inne klienty, które przyjmują adres z nagłówkami:

{
  "mcpServers": {
    "shareglint": {
      "url": "https://shareglint.com/mcp",
      "headers": { "Authorization": "Bearer sk_live_…" }
    }
  }
}

Z kodu — konektor MCP w Claude API albo OpenAI Responses API przekazują klucz tak samo:

// Claude API (MCP connector)
"mcp_servers": [{ "type": "url", "url": "https://shareglint.com/mcp", "name": "images", "authorization_token": "sk_live_…" }]

// OpenAI Responses API
"tools": [{ "type": "mcp", "server_label": "images", "server_url": "https://shareglint.com/mcp", "headers": { "Authorization": "Bearer sk_live_…" } }]

Statystyki wyświetleń

Każdy obrazek podany przez adres — podpisany /i/… (także adresy auto OG i zrzutów ekranu) — dodaje jeden do dziennego licznika platformy, która go pobrała, rozpoznanej po User-Agencie: Facebook, LinkedIn, X, Slack, Discord, WhatsApp, Telegram, iMessage, Google, inne roboty albo przeglądarka. Podglądy linków liczymy jako udostępnienia — mniej więcej „Twój link wklejono N razy”. Zobaczysz je w panelu albo pobierzesz z GET /v1/analytics?days=30 (do 90 dni, czas UTC).

• Nie zapisujemy adresu IP ani User-Agenta — tylko dzień, platformę, szablon i liczbę.
• Liczymy tylko żądania, które do nas docierają. Przekierowanie z /i/ jest cache'owane przez godzinę (sam plik przez rok), więc roboty wracają przez nas; plik spod url z POST /v1/images idzie prosto z magazynu i się nie liczy. Żądania HEAD i błędy też nie.

Referencja

Poniższa lista powstaje z tej samej specyfikacji, którą serwujemy pod /openapi.json.

Opisy endpointów są po angielsku niezależnie od języka strony: specyfikacja jest kontraktem maszynowym, z którego generuje się klientów, więc ma jedną, niezmienną wersję.

Images

{
    "template": "blog-og",
    "locale": "en",
    "modifications": {
        "eyebrow": "Health",
        "title": "Ten things that ruin your sleep",
        "author": "Anna Kowalska",
        "site": "yourblog.com",
        "accent": "#f97316",
        "date": "2026-08-17",
        "reading_time": 7
    }
}

Templates

{
    "name": "Event card",
    "width": 1200,
    "height": 630,
    "fields": [
        "headline",
        "place",
        "photo"
    ],
    "images": [
        "photo"
    ],
    "css": "body{background:#111827;color:#f9fafb;padding:72px;font-family:Roboto} h1{font-size:88px;font-weight:900}",
    "html": "<div class=\"fitbox\"><h1 class=\"fit\" data-autofit>{{ headline }}</h1></div><img src=\"{{ photo }}\"><span>{{ place }}</span>"
}

{
    "slug": "careers-card",
    "name": "Careers card"
}

{
    "fields": [
        "title"
    ],
    "html": "<h1>{{ title }}</h1>",
    "css": "body{background:#0f172a;color:#fff;font-family:Roboto}",
    "modifications": {
        "title": "Preview"
    }
}

{
    "description": "Dark blog card, big white title, author at the bottom, purple accent"
}

Account

Analytics

Auto OG

{
    "host": "example.com",
    "template": "site-card",
    "accent": "#2563eb",
    "theme": "light"
}

Screenshots

{
    "url": "https://example.com",
    "full_page": true,
    "format": "webp",
    "block_ads": true
}