คู่มือการ Embed

โครงสร้าง URL

GIF ทุกไฟล์มีสาม URL ที่คุณจะอ้างอิงเมื่อ embed:

แทนที่ {ID} ด้วย GIF ID 8 ตัวอักษร (เช่น xK9mQ2pL)

1. Markdown

รูปแบบที่พบบ่อยที่สุดสำหรับไฟล์ GitHub README ห่อภาพ GIF ในลิงก์ไปยังหน้ารายละเอียด:

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

พร้อมการจัดตำแหน่งกึ่งกลาง (HTML แบบ GitHub ใน Markdown):

<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>

ใช้ raw GIF URL ในแท็ก <img> เพื่อควบคุมขนาดและสไตล์อย่างเต็มที่:

<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 (Player โต้ตอบ)

การ embed iframe รวม player terminal โต้ตอบพร้อมการสลับธีม ตัวควบคุมการเล่น และการเล่น cast ซ้ำ:

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

Player ตรวจจับโหมดมืด/สว่างจากหน้าหลักโดยอัตโนมัติ คุณสามารถบังคับธีมด้วย query parameter:

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

4. Script Widget (Auto-embed)

วาง div และ script tag เดียว — widget จัดการทุกอย่างโดยอัตโนมัติ:

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

Widget เรนเดอร์ player ที่ตอบสนองซึ่งปรับตามความกว้างของ container การ embed หลายอันในหน้าเดียวใช้ script เดียวกัน — รวมไว้เพียงครั้งเดียว

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.

แท็ก HTML <link> ในแต่ละหน้า GIF เปิดใช้งานการค้นพบอัตโนมัติ:

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

Query endpoint oEmbed โดยตรง:

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

การตอบกลับ:

{
  "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. Badge (SVG)

Badge SVG ขนาดกะทัดรัดที่ลิงก์ไปยัง GIF มีประโยชน์ในแถว badge ของไฟล์ README:

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

ใน Markdown:

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

เคล็ดลับเฉพาะแพลตฟอร์ม

GitHub README

GitHub เรนเดอร์ทั้ง Markdown และ HTML ในไฟล์ README ใช้ รูปแบบ HTML กึ่งกลาง เพื่อผลลัพธ์ที่ดีที่สุด — จะจัดกึ่งกลาง GIF และจำกัดความกว้าง:

<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> และ <script> — ใช้วิธี Markdown หรือ HTML <img> เท่านั้น

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

Notion

วาง URL ของ AgentGIF โดยตรงลงในหน้า Notion การรองรับ oEmbed ของ Notion จะเรนเดอร์ตัวอย่างโดยอัตโนมัติ หรือใช้บล็อก /embed แล้ววาง embed URL

Slack & Discord

วาง URL รายละเอียด GIF (https://agentgif.com/ID) ทั้งสองแพลตฟอร์มรองรับ oEmbed unfurling และจะแสดงตัวอย่างที่สมบูรณ์พร้อมภาพ GIF

เว็บไซต์เอกสาร (Docusaurus, MkDocs, VitePress)

ใช้การ embed แบบ Markdown หรือ HTML ตัวสร้างเอกสารส่วนใหญ่รองรับ HTML มาตรฐานในไฟล์ Markdown การ embed iframe ทำงานได้ถ้าตัวสร้างของคุณไม่ลบ iframes

ขนาดที่ตอบสนอง

สำหรับการ embed แบบ responsive ที่ปรับตามความกว้างของ container:

<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>

สำหรับ iframes แบบ responsive ให้ห่อใน container ที่มี aspect ratio:

<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>