app-share-achievement

Szablon obrazka OG: Osiągnięcie z aplikacji

Karta, którą aplikacja proponuje po treningu albo lekcji: mapa trasy lub okładka, nazwa aktywności, do czterech wyników z separatorami, seria kropek i odznaka odbita jak pieczątka na zdjęciu.

Użyj tego szablonu — zacznij za darmo Dokumentacja
Szablon obrazka Open Graph „Osiągnięcie z aplikacji” wyrenderowany przez Shareglint
Szablon Osiągnięcie z aplikacji w rozmiarze square (1080×1080)
Szablon Osiągnięcie z aplikacji w rozmiarze portrait (1080×1350)
Szablon Osiągnięcie z aplikacji w rozmiarze story (1080×1920)
Szablon Osiągnięcie z aplikacji w rozmiarze pinterest (1000×1500)
Szablon Osiągnięcie z aplikacji 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.

Dla aplikacji sportowych, językowych, do medytacji i nawyków, w których ludzie chwalą się tym, co właśnie zrobili — render po każdej takiej akcji. Nazwa aktywności zmniejsza się, gdy jest długa, wyniki i imiona kończą się wielokropkiem, pieczątka mieści trzy linijki, a bez zdjęcia panel pokazuje poziomice w kolorze akcentu jak na mapie terenu. W kadrach poziomych zdjęcie stoi po lewej, a wyniki w dwóch rzędach; w kwadratowych i pionowych zdjęcie jest u góry, a liczby w jednym rzędzie albo w siatce dwa na dwa.

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
activity tekst Co zostało zrobione, np. Poranny bieg nad rzeką. domyślnie: Workout complete Morning river run
user_name tekst Imię osoby; jego pierwsza litera zastępuje brakujący awatar. Maya Chen
avatar adres obrazka Zdjęcie osoby. https://example.com/images/avatar-woman2.jpg
metrics tekst Do czterech wyników jako pary etykieta|wartość oddzielone średnikami, np. Dystans|12,4 km; Czas|1:02:18. Distance|12.4 km; Time|1:02:18; Pace|5:01 /km; Climb|86 m
streak tekst Seria w takiej postaci, w jakiej ma się wyświetlić, np. 23 dni z rzędu. Pierwsza liczba wypełnia rząd 14 kropek. 23-day streak
date tekst Data i godzina w dowolnym zapisie, np. niedz., 26 paź · 7:42. Sun, Oct 26 · 7:42
badge tekst Tekst pieczątki, np. Rekord na 10 km. Puste pole = bez pieczątki. Personal best 10K
image adres obrazka Mapa trasy, okładka kursu albo inne zdjęcie aktywności. https://example.com/images/b04-route-map.png
app_name tekst Nazwa aplikacji obok logo. Stride
logo adres obrazka Logo aplikacji. https://example.com/images/logo-p.png
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #f97316 #f97316
theme dark | light Schemat kolorów: dark albo light. domyślnie: 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": "app-share-achievement",
    "modifications": {
        "activity": "Morning river run",
        "user_name": "Maya Chen",
        "metrics": "Distance|12.4 km; Time|1:02:18; Pace|5:01 /km; Climb|86 m",
        "streak": "23-day streak",
        "date": "Sun, Oct 26 · 7:42",
        "badge": "Personal best 10K",
        "app_name": "Stride",
        "avatar": "https://example.com/images/avatar-woman2.jpg",
        "image": "https://example.com/images/b04-route-map.png",
        "logo": "https://example.com/images/logo-p.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/app-share-achievement.png?activity=Morning%20river%20run&app_name=Stride&badge=Personal%20best%2010K&date=Sun%2C%20Oct%2026%20%C2%B7%207%3A42&metrics=Distance%7C12.4%20km%3B%20Time%7C1%3A02%3A18%3B%20Pace%7C5%3A01%20%2Fkm%3B%20Climb%7C86%20m&streak=23-day%20streak&user_name=Maya%20Chen&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/app-share-achievement/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 „Wykres liniowy” wyrenderowany przez Shareglint Wykres liniowy Szablon obrazka Open Graph „Wykres pierścieniowy” wyrenderowany przez Shareglint Wykres pierścieniowy Szablon obrazka Open Graph „Wyniki ankiety” wyrenderowany przez Shareglint Wyniki ankiety

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