Szablon obrazka OG: Ranking

og1200×630 square1080×1080 portrait1080×1350 story1080×1920 pinterest1000×1500 youtube1280×720

To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.

Dla społeczności, zespołów sprzedaży, gier, klas i projektów open source, które publikują swój ranking. Do dziesięciu wierszy: w kadrach poziomych i kwadratowych mieszczą się miejsca 4–8, w pionowym portrecie do 9., na Pintereście i w relacjach wszystkie dziesięć. Imiona i wyniki kończą się wielokropkiem, zmiana z minusem robi się czerwona, a jedno miejsce można wyróżnić jako własne miejsce oglądającego. W kadrach poziomych podium stoi obok listy, w pozostałych nad nią.

Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

Wyrenderuj go jednym żądaniem

Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "leaderboard",
    "modifications": {
        "title": "Top contributors",
        "period": "October 2026",
        "rows": "1|Maya Chen|4,820 pts|+2; 2|Leo Park|4,610 pts|-1; 3|Ana Silva|4,375 pts|+1; 4|Tom Weber|3,990 pts|0; 5|Priya Nair|3,815 pts|+4; 6|Jonas Berg|3,640 pts|-2; 7|Emma Rossi|3,410 pts|+1; 8|Kenji Ito|3,205 pts|-3",
        "highlight": "6",
        "site": "community.northwind.dev",
        "logo": "https://example.com/images/logo-northwind.png"
    }
}'

Albo wklej podpisany adres w og:image

Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.

<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/leaderboard.png?highlight=6&period=October%202026&rows=1%7CMaya%20Chen%7C4%2C820%20pts%7C%2B2%3B%202%7CLeo%20Park%7C4%2C610%20pts%7C-1%3B%203%7CAna%20Silva%7C4%2C375%20pts%7C%2B1%3B%204%7CTom%20Weber%7C3%2C990%20pts%7C0%3B%205%7CPriya%20Nair%7C3%2C815%20pts%7C%2B4%3B%206%7CJonas%20Berg%7C3%2C640%20pts%7C-2%3B%207%7CEmma%20Rossi%7C3%2C410%20pts%7C%2B1%3B%208%7CKenji%20Ito%7C3%2C205%20pts%7C-3&site=community.northwind.dev&title=Top%20contributors&s=YOUR_SIGNATURE">

Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

curl -X POST "https://shareglint.com/v1/templates/library/leaderboard/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów: Dane, wykresy i kamienie milowe

Wyróżniona liczba Zbiórka Siatka wskaźników Wykres słupkowy Kamień milowy Podsumowanie roku Osiągnięcie z aplikacji Wykres liniowy Wykres pierścieniowy

Wszystkie szablony w kategorii Dane, wykresy i kamienie milowe (14) →  ·  Wszystkie szablony →