code-snippet

Szablon obrazka OG: Fragment kodu

Ciemne okno edytora z numerami wierszy, kolorowaniem składni i kartą pliku, na tle w kolorze akcentu.

Użyj tego szablonu — zacznij za darmo Dokumentacja
Szablon obrazka Open Graph „Fragment kodu” wyrenderowany przez Shareglint
Szablon Fragment kodu w rozmiarze square (1080×1080)
Szablon Fragment kodu w rozmiarze portrait (1080×1350)
Szablon Fragment kodu w rozmiarze story (1080×1920)
Szablon Fragment kodu w rozmiarze pinterest (1000×1500)
Szablon Fragment kodu 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 porad, poradników i wpisów o premierach, które pokazują kod. Kod wysyłasz z prawdziwymi znakami nowej linii; łańcuchy, komentarze, liczby i popularne słowa kluczowe dostają kolory, długie wiersze zawijają się przy swoim numerze, a cały blok zmniejsza się, gdy jest długi. Widać pierwsze 16 wierszy.

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
code tekst Kod ze znakami nowej linii. Widać do 16 wierszy. domyślnie: console.log('Hello, world') import { render } from '@northwind/og-kit' // One template, every size const images = await render({ template: 'blog-og', sizes: ['og', 'square', 'story'], title: 'Ship faster with signed URLs', }) console.log(images.length) // 3
title tekst Tytuł nad edytorem. Render every social size in one call
filename tekst Nazwa pliku na karcie edytora. render.ts
language tekst Język na pasku edytora, np. TypeScript. TypeScript
author tekst Autor albo jego nick obok tytułu. @mayacodes
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: #6366f1 #6366f1
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": "code-snippet",
    "modifications": {
        "code": "import { render } from '\''@northwind/og-kit'\''\n\n// One template, every size\nconst images = await render({\n  template: '\''blog-og'\'',\n  sizes: ['\''og'\'', '\''square'\'', '\''story'\''],\n  title: '\''Ship faster with signed URLs'\'',\n})\n\nconsole.log(images.length) // 3",
        "title": "Render every social size in one call",
        "filename": "render.ts",
        "language": "TypeScript",
        "author": "@mayacodes",
        "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/code-snippet.png?author=%40mayacodes&code=import%20%7B%20render%20%7D%20from%20%27%40northwind%2Fog-kit%27%0A%0A%2F%2F%20One%20template%2C%20every%20size%0Aconst%20images%20%3D%20await%20render%28%7B%0A%20%20template%3A%20%27blog-og%27%2C%0A%20%20sizes%3A%20%5B%27og%27%2C%20%27square%27%2C%20%27story%27%5D%2C%0A%20%20title%3A%20%27Ship%20faster%20with%20signed%20URLs%27%2C%0A%7D%29%0A%0Aconsole.log%28images.length%29%20%2F%2F%203&filename=render.ts&language=TypeScript&site=northwind.dev%2Fblog&title=Render%20every%20social%20size%20in%20one%20call&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/code-snippet/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"
Użyj tego szablonu — zacznij za darmo

Więcej szablonów obrazków OG

Szablon obrazka Open Graph „wpis na blogu” wyrenderowany przez Shareglint Wpis na blogu Szablon obrazka Open Graph „Karta strony internetowej” wyrenderowany przez Shareglint Karta strony internetowej Szablon obrazka Open Graph „oferta pracy” wyrenderowany przez Shareglint Oferta pracy Szablon obrazka Open Graph „wydarzenie” wyrenderowany przez Shareglint Wydarzenie Szablon obrazka Open Graph „odcinek podcastu” wyrenderowany przez Shareglint Odcinek podcastu Szablon obrazka Open Graph „changelog / wydanie” wyrenderowany przez Shareglint Changelog / wydanie Szablon obrazka Open Graph „strona dokumentacji” wyrenderowany przez Shareglint Strona dokumentacji Szablon obrazka Open Graph „oferta nieruchomości” wyrenderowany przez Shareglint Oferta nieruchomości Szablon obrazka Open Graph „karta produktu” wyrenderowany przez Shareglint Karta produktu Szablon obrazka Open Graph „produkt w promocji” wyrenderowany przez Shareglint Produkt w promocji Szablon obrazka Open Graph „lekcja kursu” wyrenderowany przez Shareglint Lekcja kursu Szablon obrazka Open Graph „przepis” wyrenderowany przez Shareglint Przepis Szablon obrazka Open Graph „miniatura wideo” wyrenderowany przez Shareglint Miniatura wideo Szablon obrazka Open Graph „wydanie newslettera” wyrenderowany przez Shareglint Wydanie newslettera Szablon obrazka Open Graph „karta z cytatem” wyrenderowany przez Shareglint Karta z cytatem Szablon obrazka Open Graph „case study / opinia klienta” wyrenderowany przez Shareglint Case study / opinia klienta Szablon obrazka Open Graph „repozytorium GitHub” wyrenderowany przez Shareglint Repozytorium GitHub Szablon obrazka Open Graph „zapowiedź funkcji” wyrenderowany przez Shareglint Zapowiedź funkcji Szablon obrazka Open Graph „profil / karta autora” wyrenderowany przez Shareglint Profil / karta autora Szablon obrazka Open Graph „porównanie (A vs B)” wyrenderowany przez Shareglint Porównanie (A vs B) Szablon obrazka Open Graph „wyróżniona liczba” wyrenderowany przez Shareglint Wyróżniona liczba Szablon obrazka Open Graph „Nowość w sklepie” wyrenderowany przez Shareglint Nowość w sklepie Szablon obrazka Open Graph „Obniżka ceny” wyrenderowany przez Shareglint Obniżka ceny Szablon obrazka Open Graph „Wyprzedaż błyskawiczna” wyrenderowany przez Shareglint Wyprzedaż błyskawiczna Szablon obrazka Open Graph „Kod rabatowy” wyrenderowany przez Shareglint Kod rabatowy Szablon obrazka Open Graph „Ocena produktu” wyrenderowany przez Shareglint Ocena produktu Szablon obrazka Open Graph „Karta podarunkowa” wyrenderowany przez Shareglint Karta podarunkowa Szablon obrazka Open Graph „Danie dnia” wyrenderowany przez Shareglint Danie dnia Szablon obrazka Open Graph „Dzień otwarty nieruchomości” wyrenderowany przez Shareglint Dzień otwarty nieruchomości Szablon obrazka Open Graph „Premiera książki” wyrenderowany przez Shareglint Premiera książki Szablon obrazka Open Graph „Zbiórka” wyrenderowany przez Shareglint Zbiórka Szablon obrazka Open Graph „karta prelegenta” wyrenderowany przez Shareglint Karta prelegenta Szablon obrazka Open Graph „webinar” wyrenderowany przez Shareglint Webinar Szablon obrazka Open Graph „meetup społeczności” wyrenderowany przez Shareglint Meetup społeczności Szablon obrazka Open Graph „odliczanie” wyrenderowany przez Shareglint Odliczanie Szablon obrazka Open Graph „bilet na wydarzenie” wyrenderowany przez Shareglint Bilet na wydarzenie Szablon obrazka Open Graph „rekrutujemy (kilka stanowisk)” wyrenderowany przez Shareglint Rekrutujemy (kilka stanowisk) Szablon obrazka Open Graph „powitanie nowej osoby” wyrenderowany przez Shareglint Powitanie nowej osoby Szablon obrazka Open Graph „certyfikat ukończenia” wyrenderowany przez Shareglint Certyfikat ukończenia Szablon obrazka Open Graph „transmisja na żywo” wyrenderowany przez Shareglint Transmisja na żywo Szablon obrazka Open Graph „premiera muzyczna” wyrenderowany przez Shareglint Premiera muzyczna Szablon obrazka Open Graph „Cytat z podcastu (audiogram)” wyrenderowany przez Shareglint Cytat z podcastu (audiogram) Szablon obrazka Open Graph „Miniatura twórcy” wyrenderowany przez Shareglint Miniatura twórcy Szablon obrazka Open Graph „Opinia z gwiazdkami” wyrenderowany przez Shareglint Opinia z gwiazdkami Szablon obrazka Open Graph „Post z mediów społecznościowych” wyrenderowany przez Shareglint Post z mediów społecznościowych Szablon obrazka Open Graph „Cytat redakcyjny” wyrenderowany przez Shareglint Cytat redakcyjny Szablon obrazka Open Graph „Przegląd tygodnia” wyrenderowany przez Shareglint Przegląd tygodnia Szablon obrazka Open Graph „Lista „X sposobów"” wyrenderowany przez Shareglint Lista „X sposobów" Szablon obrazka Open Graph „Plusy i minusy” wyrenderowany przez Shareglint Plusy i minusy Szablon obrazka Open Graph „Przed / po” wyrenderowany przez Shareglint Przed / po 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 „Plan rozwoju produktu” wyrenderowany przez Shareglint Plan rozwoju produktu Szablon obrazka Open Graph „Endpoint API” wyrenderowany przez Shareglint Endpoint API Szablon obrazka Open Graph „Aplikacja w sklepie” wyrenderowany przez Shareglint Aplikacja w sklepie Szablon obrazka Open Graph „Dzień premiery” wyrenderowany przez Shareglint Dzień premiery Szablon obrazka Open Graph „Nowa wersja pakietu” wyrenderowany przez Shareglint Nowa wersja pakietu Szablon obrazka Open Graph „Plany cenowe” wyrenderowany przez Shareglint Plany cenowe

Wszystkie szablony →