animated-growing-bars

Szablon obrazka OG: rosnący wykres słupkowy

Do ośmiu słupków, które rosną jeden po drugim, z wartością nad każdym i tytułem nad wykresem.

Użyj tego szablonu — zacznij za darmo Dokumentacja
Szablon rosnący wykres słupkowy w rozmiarze square (1080×1080)
Szablon rosnący wykres słupkowy w rozmiarze portrait (1080×1350)
Szablon rosnący wykres słupkowy w rozmiarze story (1080×1920)
Szablon rosnący wykres słupkowy w rozmiarze pinterest (1000×1500)
Szablon rosnący wykres słupkowy w rozmiarze youtube (1280×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.

Do postów o wzroście, raportów miesięcznych i aktualizacji dla inwestorów jako GIF albo MP4. Słupki podajesz jako pary Etykieta:wartość; skalujemy je do największej wartości, a ostatni jest wyróżniony. Format statyczny daje gotowy wykres.

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.

Pole Typ Opis Przykład
title tekst Główny nagłówek. domyślnie: Chart title Signed URLs now serve most of our traffic
values tekst Słupki jako pary Etykieta:wartość po przecinku, do 8, np. maj:18, cze:24, lip:31. domyślnie: A:3, B:5, C:8 May:18, Jun:24, Jul:31, Aug:39, Sep:52, Oct:67
unit tekst Co mierzą wartości, pod wykresem, np. Udział renderów, %. Share of renders, %
eyebrow tekst Krótka etykieta nad tytułem. Growth
site tekst Twoja domena albo krótki adres. northwind.dev/blog
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #0ea5e9 #0ea5e9
theme dark | light Schemat kolorów: dark albo light. —

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": "animated-growing-bars",
    "modifications": {
        "title": "Signed URLs now serve most of our traffic",
        "values": "May:18, Jun:24, Jul:31, Aug:39, Sep:52, Oct:67",
        "unit": "Share of renders, %",
        "eyebrow": "Growth",
        "site": "northwind.dev/blog"
    }
}'

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/animated-growing-bars.png?eyebrow=Growth&site=northwind.dev%2Fblog&title=Signed%20URLs%20now%20serve%20most%20of%20our%20traffic&unit=Share%20of%20renders%2C%20%25&values=May%3A18%2C%20Jun%3A24%2C%20Jul%3A31%2C%20Aug%3A39%2C%20Sep%3A52%2C%20Oct%3A67&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/animated-growing-bars/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"
Użyj tego szablonu — zacznij za darmo

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

Szablon obrazka Open Graph „wyróżniona liczba” wyrenderowany przez Shareglint Wyróżniona liczba Szablon obrazka Open Graph „Zbiórka” wyrenderowany przez Shareglint Zbiórka Szablon obrazka Open Graph „Siatka wskaźników” wyrenderowany przez Shareglint Siatka wskaźników Szablon obrazka Open Graph „Wykres słupkowy” wyrenderowany przez Shareglint Wykres słupkowy Szablon obrazka Open Graph „Kamień milowy” wyrenderowany przez Shareglint Kamień milowy Szablon obrazka Open Graph „Podsumowanie roku” wyrenderowany przez Shareglint Podsumowanie roku Szablon obrazka Open Graph „Osiągnięcie z aplikacji” wyrenderowany przez Shareglint Osiągnięcie z aplikacji Szablon obrazka Open Graph „Wykres liniowy” wyrenderowany przez Shareglint Wykres liniowy Szablon obrazka Open Graph „Wykres pierścieniowy” wyrenderowany przez Shareglint Wykres pierścieniowy

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