now-playing

Szablon obrazka OG: Teraz gra

Ekran odtwarzacza: rozmyta okładka w tle, koperta z wysuwającą się płytą i pasek postępu z czasem i przyciskami.

Szablon obrazka Open Graph „Teraz gra” wyrenderowany przez Shareglint
Szablon Teraz gra w rozmiarze square (1080×1080)
Szablon Teraz gra w rozmiarze portrait (1080×1350)
Szablon Teraz gra w rozmiarze story (1080×1920)
Szablon Teraz gra w rozmiarze pinterest (1000×1500)
Szablon Teraz gra 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 muzycznych, radia, DJ-ów i kuratorów playlist, którzy udostępniają aktualny utwór, a także do README na profilu. Czas od początku liczy się z progress i duration w postaci 3:41 albo 1:02:15; czas zapisany inaczej pokaże się bez zmian i bez tego licznika. Postęp jest przycinany, więc suwak nigdy nie wyjdzie poza pasek, a długi tytuł się zmniejsza. Bez album_art koperta staje się kafelkiem w kolorze akcentu z nutą, a tło miękką poświatą. W szerokich kadrach koperta stoi obok tytułu; w kwadracie i pionie wszystko jest wyśrodkowane pod większą kopertą, jak w odtwarzaczu na telefonie.

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
track tekst Tytuł utworu, największy tekst. domyślnie: Track title Afterglow Avenue
artist tekst Wykonawca pod tytułem. Lumen Harbor
album_art adres obrazka Okładka albumu, kwadratowa; rozmyta wypełnia też tło. https://example.com/images/b09-album-neon.png
progress tekst Ile utworu już minęło: od 0 do 1 (0.42) albo w procentach (42 lub 42%). domyślnie: 0.4 0.42
duration tekst Długość utworu, np. 3:41; z niej liczy się czas po lewej. 3:41
platform tekst Stacja, aplikacja albo playlista obok korektora, np. Aurora Radio. Aurora Radio
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #e879f9 #e879f9
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": "now-playing",
    "modifications": {
        "track": "Afterglow Avenue",
        "artist": "Lumen Harbor",
        "progress": "0.42",
        "duration": "3:41",
        "platform": "Aurora Radio",
        "album_art": "https://example.com/images/b09-album-neon.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/now-playing.png?artist=Lumen%20Harbor&duration=3%3A41&platform=Aurora%20Radio&progress=0.42&track=Afterglow%20Avenue&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/now-playing/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów: Podcasty, muzyka i książki

Wszystkie szablony w kategorii Podcasty, muzyka i książki (10) →  ·  Wszystkie szablony →