Gömme Kılavuzu

URL Yapısı

Her GIF'in gömme sırasında referans vereceğiniz üç URL'si vardır:

{ID} yerine 8 karakterli GIF kimliğini yazın (örn. xK9mQ2pL).

1. Markdown

GitHub README dosyaları için en yaygın format. GIF görüntüsünü detay sayfasına bir bağlantıyla sarar:

[![Demo](https://media.agentgif.com/ID.gif)](https://agentgif.com/ID)

Ortalanmış hizalamayla (Markdown içinde GitHub tarzı HTML):

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

2. HTML <img>

Boyutlandırma ve stil üzerinde tam kontrol için ham GIF URL'sini bir <img> etiketinde kullanın:

<a href="https://agentgif.com/ID">
  <img src="https://media.agentgif.com/ID.gif"
       alt="Terminal demo"
       width="800"
       loading="lazy">
</a>

The loading="lazy" attribute defers loading until the image is near the viewport — useful for pages with multiple GIFs.

3. iframe (İnteraktif Oynatıcı)

iframe gömme, tema değiştirme, oynatma kontrolleri ve cast tekrar oynatma içeren interaktif terminal oynatıcısını içerir:

<iframe
  src="https://agentgif.com/embed/ID/"
  width="800"
  height="500"
  frameborder="0"
  allow="clipboard-write"
  loading="lazy"
></iframe>

Oynatıcı, ana sayfadan karanlık/aydınlık modu otomatik olarak algılar. Bir sorgu parametresiyle tema zorlayabilirsiniz:

https://agentgif.com/embed/ID/?theme=dracula

4. Script Widget'ı (Otomatik gömme)

Tek bir div ve script etiketi ekleyin — widget her şeyi otomatik olarak yönetir:

<div data-agentgif="ID"></div>
<script src="https://agentgif.com/widget.js" async></script>

Widget, kapsayıcı genişliğine uyum sağlayan duyarlı bir oynatıcı oluşturur. Bir sayfadaki birden fazla gömme aynı betiği paylaşır — yalnızca bir kez ekleyin.

5. oEmbed

AgentGIF supports oEmbed for auto-discovery. Platforms like Notion, Slack, Discord, and WordPress can automatically render a rich preview when you paste an AgentGIF URL.

Her GIF sayfasındaki HTML <link> etiketi otomatik keşfi etkinleştirir:

<link rel="alternate" type="application/json+oembed"
  href="https://agentgif.com/oembed?url=https://agentgif.com/ID&format=json" />

oEmbed endpoint'ini doğrudan sorgulayın:

curl "https://agentgif.com/api/v1/oembed/?url=https://agentgif.com/ID&format=json"

Yanıt:

{
  "type": "photo",
  "version": "1.0",
  "title": "Docker Compose Up",
  "width": 1000,
  "height": 580,
  "url": "https://media.agentgif.com/ID.gif",
  "provider_name": "AgentGIF",
  "provider_url": "https://agentgif.com"
}

6. Rozet (SVG)

GIF'e bağlanan kompakt bir SVG rozeti. README dosyalarının rozet satırlarında kullanışlıdır:

<a href="https://agentgif.com/ID">
  <img src="https://agentgif.com/badge/ID.svg" alt="AgentGIF demo">
</a>

Markdown'da:

[![AgentGIF](https://agentgif.com/badge/ID.svg)](https://agentgif.com/ID)

Platforma Özel İpuçları

GitHub README

GitHub, README dosyalarında hem Markdown hem de HTML'i oluşturur. En iyi sonuçlar için ortalanmış HTML kalıbını kullanın — GIF'i ortalar ve genişliği sınırlar:

<p align="center">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif" alt="demo" width="800">
  </a>
</p>

GitHub, <iframe> ve <script> etiketlerini kaldırır — yalnızca Markdown veya HTML <img> yöntemini kullanın.

See the full guide: How to Embed GIFs in GitHub README.

Notion

Bir AgentGIF URL'sini doğrudan Notion sayfasına yapıştırın. Notion'ın oEmbed desteği otomatik olarak bir önizleme oluşturacaktır. Alternatif olarak, /embed bloğunu kullanın ve gömme URL'sini yapıştırın.

Slack & Discord

GIF detay URL'sini yapıştırın (https://agentgif.com/ID). Her iki platform da oEmbed açılımını destekler ve GIF görüntüsüyle zengin bir önizleme gösterir.

Dokümantasyon Siteleri (Docusaurus, MkDocs, VitePress)

Markdown veya HTML gömme kullanın. Çoğu dokümantasyon oluşturucu, Markdown dosyalarında standart HTML'i destekler. iframe gömme, oluşturucunuz iframe'leri kaldırmıyorsa çalışır.

Duyarlı Boyutlandırma

Kapsayıcı genişliğine ölçeklenen duyarlı gömmeler için:

<div style="max-width: 800px; margin: 0 auto;">
  <a href="https://agentgif.com/ID">
    <img src="https://media.agentgif.com/ID.gif"
         alt="demo"
         style="width: 100%; height: auto;">
  </a>
</div>

Duyarlı iframe'ler için, en boy oranına sahip bir kapsayıcıya sarın:

<div style="position: relative; padding-bottom: 58%; max-width: 800px;">
  <iframe src="https://agentgif.com/embed/ID/"
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
          frameborder="0"></iframe>
</div>